Question: Does a country's access to electricity and its education expenditure serve as a good representation of where it stands in terms of its Human Development Index (HDI)?
The data for the education expense and the electricity access is taken from http://databank.worldbank.org/data/source/world-developm. The education expense has been scaled by a value of 20 to make the data more readable and to help fit the scales on the same page.
The hybrid structure of my visualization follows the INTERACTIVE SLIDESHOW . I have 5 slides in the slideshow and each slide represents a new scene with a new graph. This visulization follows a scene by scene visualization (slideshow) ordered in a way to convey the story to the user. In each slide, the user can find out more about each datapoint and country if they want to investigate furher. In all the 4 scenes, the user can hover on the bars or circles to know the exact values and country names if they want. In the last slide, the user can filter if they want and look at only one circle at a time by clicking on the legend for that circle. In this way, the user can choose to investigate a country and it's values further by filtering it. This was done in the last slide because the size of circles is big and there is overlap and the user might want to see only a particular circle and this can be done through filtering using the legends.
Hence, my visualization follows a defined slideshow with interactions that the user can make to investigate further.
My visualization contains 4 scenes and this is the first slide, which serves as just an introduction. There are 4 graphs on the next 4 slides. Each slide represents a new scene. In each scene, the person can hover on the charts to know the exact values and country names.
The first and second scenes are bar charts and the third and the fourth are scatter plots. This ordering was essential to convey the story as well as to ensure that the user isn't disorieneted everytime because of changing types of charts.
The last scene provides a complete overview.
The same template, width, height and style is chosen for the different scenes which can be navigated through the buttons on the top to ensure that the user can follow along and stay oriented throughout. The background and the page heading are exactly the same on all. Even though the graph changes in each scene, the layout is maintained for visual consistency. Each slide is a single scene and helps convey the story. Each slide also has a translucent explanation box on the side to give the user a quick introduction to the graph and tell him/her about the available features, for example, tooltip, filtering by clicking on the legends, etc.
The annotations in the different slides are all shown in black boxes of the same width to make it easier for the user to follow and understand. They are only used in the graph when there was a need to draw the user's attention to certain observations. The annotations are cleared between the scenes as the graphs each represent a different scene and the annotations from previous slides are not required to continue the story. There is also a text box on each slide to convey the overally graph for that scene. The text box is 50% transparent to ensure that if the screen size is small and it happens to come on top of the graph, the graph can be seen through it.
There are different parameters that control the visualization. The slides number is a parameter that changes from slide to slide. It can be changed through the buttons on the top numbered 1-4. Deciding whether to animate a chart or not was another parameter and I decided to animate it only in the 4th slide to show how the sizes change from slide 3. In slide 4, I decided to enable clicking on the legend to highlight a country and make the others less visible. This was done so that users can see the overlapping countries by clicking on that country name in the legend. The other slides do not have this feature because there is no overlap.
The parameters are controlled by triggering different events or functions based on the user clicks and actions. Each time the user clicks on the top buttons named About the Visalization,1,2,3,4, a new html page is triggered which changes the slide. The current slide is coloured in blue so that the user knows which page he/she is currently on. The buttons look 3D so that the user can know that he can click them to move to that slide number. Also, hovering on a bar or circle triggers an on mouseover event which changes the opacity of a div that can display values corresponding to that country. In the last slide, an onclick function on a country color on the legend changes the opacity of the circles such that only the selected country's circle is visisble. On clicking back on that legend, everything goes back to normal. Another way to convey to the user the different events that can trigger changes is through the text box on the side. It lists the available features, for example hover, click, etc. for the user to know.
It can be seen that the higher on the right a country is on the electricity vs education graph, the higher is its human development index, with the exception of a few outliers.