Design Rationale
Since our dataset contains information about individual countries throughout the world, we wanted to display the data on a map where people could easily compare data for a particular parameter between different countries. In our map, we have excluded Antarctica because the dataset contains no information about Antarctica for any of the parameters. Above the map, we placed a dropdown menu where people can select for which parameter they would like to view data on the map. Currently, our design only allows people to view data relating to one parameter at a time; this seemed like the simplest way to begin engaging with the data for an initial prototype. In addition, from another dropdown menu, people can select the year for which they would like to view data. As an alternative, we considered implementing a slider that would allow people to scroll through the data for a given parameter by year. However, given some of our team members’ lack of experience with D3, we did not figure out how to do this in time for the deadline and instead chose the simplest solution for the time being. Below the map, we provide a description of the parameter that explains the data currently shown in greater depth as well as the sources of the data for that parameter in case the viewer is interested in finding more information. We placed these sections below the map because they may be of interest to the viewer, but people will primarily be interested in viewing the visualization. Thus, we did not want people to have to scroll down their web browser to view the map. Also, it may be easier for people to notice the dropdown menus that control the map when the large bodies of text are separated from them.
Once a parameter and a year are selected from the dropdown menus, the map displays the data by coloring in the countries according to a gradient from white to navy; darker shades of blue correspond to a higher value for that parameter. For now, we chose a blue gradient to encode the data because people generally respond well to blue, and the color does not carry any connotations like a red to green gradient does. Since we are still learning the implications of our dataset, we do not want to display the data with any implications about the goodness of different values for any parameter. In addition, we chose gray to indicate no data was collected for a given country because the color is subdued enough to avoid drawing people’s attention to null data. When people hover their cursor over a particular country, a tool tip appears that displays that country’s name and its value for the selected parameter in the given year; if people hover over a country for which there is no data, the value displayed is “N/A” to indicate the data is not available. These tooltips allow people to garner a more concrete understanding of the actual data values to supplement the color gradient on the map.
People can also select countries on the map by clicking on them. After doing so, a line chart appears directly below the map that compares the values for the parameter selected in the dropdown above the map over every year in the dataset. Each country selected is encoded by a different color with the name of the country directly next to the line representing its data; we have chosen to display a legend in this manner because providing both spatial proximity and color coding facilitate people’s perception of the chart. When a new country is selected from the map, the chart slowly rescales to help people understand how the data for the newly selected country compares to the other lines they have already seen on the chart. To remove a country from the line chart, people simply click that country again. Again, for an initial prototype, removing countries from the chart in this manner seemed like the simplest solution to begin analyzing the data.
Development Process
We had a group meeting to discuss ideas for our initial prototype and divide the initial stages of our work. Daniel and Becky wrangled the data to convert it to a format that was easier for Git to store and our code to handle. Since Lane has used D3 for his job, he assumed the task of writing the primary code for the map. After completing these tasks, we met as a group again to discuss our prototype, determine what changes we wanted to make before the deadline, and divide the final stages of work for our initial prototype. To provide another view of the data, we decided to add another chart that shows the changes over time in a certain parameter for countries selected by viewers; again, given his experience with D3, Lane set up this chart. Daniel added tool tips to provide people with information when hovering over a country and began researching how to add a legend for the color gradient to the map. Since she enjoys writing, Becky wrote the design rationale and development process; she also started researching different color gradients to use and how to implement them in D3. Matthew began working on a slider for people to more easily view the map data from different years; he also started investigating how to implement zooming and panning for the map.
Collectively, we spent about 20 hours developing the initial prototype. Far and away, writing the code to set up the charts for our prototype and, for those of us with no experience with D3 prior to this class, researching how to implement different features consumed most of our time in development.