This week we need to use some spatial Data to create visualization. As I am interested in energy-related data, I found some data which is really useful from Enerdata, a public website provides lots of diverse data. And then I chose to use electricity consumption between countries worldwide. However, it only shows global consumption of energy without geolocation or other spatial data.
Therefore, I combine d3.js to include spatial data. That is, This globe will rotate to the center once you input country’s name like United States, China, Russia, Japan and so forth. It uses polygons, arcs to create geometry to visualize it. For the data part, I use p5.js to load JSON file and do some changes to DOM element.
Then, I think of an idea to alert the country where it consumes most electricity in this world. As a battery status visualization, when it shows redish color, showing that the most electricity is consumed. On the contrary, greenish color meaning more friendly to the environment. For me, I also want to do gradient color animation to simulate breathe effect to other colors in the future.