chanellingHansRosling | GapMinder World visualisation using D3.js

chanellingHansRosling is a HTML library. chanellingHansRosling has no bugs, it has no vulnerabilities and it has low support. You can download it from GitHub.

An interactive version of the GapMinder World visualisation used in that demo is available at www.gapminder.org/world. I have recreated the visualisation using D3.js, JS, CSS and HTML. The visualisation has three elements in it as follows,. In the first part, I have created a bubble plot wherein the x axis represents the GDP, the Y axis represents the Global Competitive Index and the radius of the circle represents the total population of the country. The GDP has been scaled with log values whereas the Global Competitive index is scaled linearly. I have used well defined ticks which are labelled properly. As log scale was used in x axis the ticks were not equal in distance hence, with the help of array and tick format; that is .1s I made sure they are well presented to the user. ‘Mouse hover’ functionality is built where in, by hovering a particular circle we can see the name of the country and two lines are mapped on x and y axis to show the values with respect to the hovered circle. The play button and slider is placed just below the graph that can be used to see the transition. Also, the slider is labelled with years allows the user to click on the particular year and bubbles are transitioned accordingly. The year for which the data is represented is displayed at the back of the visualisation. Colour for the bubbles are selected on the basis of the Forum classification field. The legend is created towards the left side of the graph, which represents the colour used for specific regions. In the second part, I have created the trace functionality. when the visualisation is in the pause mode I can click on the particular circle (country) to find out the trace of that circle (country) for all the years. A check box is provided to the user to select the single or two countries for comparisons in the multivariate graph. When the two countries are selected the bar graph for the two countries are created below the bubble chart all the 12 pillars as mentioned in the database. This bar graph varies with respect to year as the play button is clicked along with the bubble plot. The text box is provided in the bar graph which represents the name of the country whose data is being displayed. Also, the colour of the bar chart is changed with respect to its region which is represented in the bubble graph.