Being from a programming background in CS, I am well versed with HTML,CSS,JS & Jquery. Hence, I began working directly on D3.
D3 was a challenging language for me. It took me a week to understand it. I spent the other 2 weeks coding my design idea and finishing my project.
Next I made some rough sketches as what I expect a basic chart would look like:
Design Choices:
I wanted to make the colors prominent hence i decided to go with a dark background.
I also wanted the elements to move around or 'behave' reflecting some changes made by the user. Hence, animating the Pie chart.
I used many color schemes, but ended up using my own color choices. I wanted to use complementary colors.
I also wanted to make big graphs with big elements for clarity.
I realised the scatter plot was not clear as most regions had very low values for datasets compared to some large countries. Using log scales or non-linear scales was out of the question.
I simple removed the major regions such as "Asia" etc aside, to make the scatter plot more clear.
I used a Data map to represent the Heat Map.
I grouped all the controls together and away from the charts so that the user doesn't have to spend to much time finding controls and the charts are clear
I parsed the data in many ways to enable plotting of bar chart as well as scatter plot. ie. parse data row wise as well as column wise.
How it helps users:
This method of representing data helps the user visualize years of data together of multiple countries.
It also helps the users to view regional trends using color coded scatter plots
The Pie Chart helps understand the distribution of Energy data between the major regions.
The Heat Map helps to visualize the energy distribution of one energy type all over the world in a most wholistic view.