D3.js: How to select the best charting option for your data
By: Marcia Arambulo Rodriguez
Tags: Visualization, Choropleth Map, Charts, D3js

D3.js (Data-Driven Documents) is a JavaScript library that manipulates documents based on data. In other words, data drives the changes in the DOM. D3.js allows us to take data and translate it into a visual form.

D3.js is a powerful data visualization tool because you have more control over what you build and you are able to build custom representations of your data, but as we know, with great power comes great responsibility since D3.js will not create charts for you, but it will help you draw them.

In order to adequately visualize your data you need to both prepare your data, and figure out which charting option works best to visualize it. At first, I considered that I wanted to do a comparison of the data using readily available data that didn’t need much preparation. I downloaded data from the World Health Organization and decided to visualize the Health-Adjusted Life Expectancy (HEAL) at birth for all the countries in the world.

I created a bar chart visualization (great tutorial for a bar charts linked here) that showed the many world countries life expectancy in a manner that was comparable. This was the result:

Bar chart built with D3.js

This chart successfully visualizes a very large number of items in a way where they can still be compared. The challenge with this visualization approach is that it becomes cluttered with too many values, diminishing the impact of the visualization. In particular, in this case, as the differences in values were not that extreme, the bar chart is quite crowded. Adding a slider allows you to increase or decrease the number of values visualized, which can certainly help here.

Bar chart that includes slider to filter data

Nevertheless, there is a better way to visualize this data. A geospatial visualization type might be superior in order to understand a different dimension of the data, specifically, composition (great tutorial for maps linked here). This would allow us to show how individual data from individual countries can be combined to show how life expectancy varies around the world.

To show the composition of world lifespan data, I determined that a choropleth map would be ideal. Furthermore, I implemented mouse-over features to highlight each country and to enable the presentation of data for a specific country.

In this case I decided to build a dashboard that includes three indicators with the most up-to-data data available. I downloaded all the data from UNICEF’s data warehouse.

Choropleth map built with D3.js — Life Expectancy

Choropleth map built with D3.js — Population Under 5 Years of Age

Choropleth map built with D3.js — Share of Urban Population

This visualization is more visually appealing, takes advantage of the type of data, and enables a visualization of both the individual countries and the larger whole of the world.

From this exercise, we can see that in D3.js, as in any data visualization tool, the questions you ask are just as important as the technology you use. Specifically I propose that any D3.js user starts out by asking some key questions.

1. What message are you trying to deliver, and to whom?

Knowing whether your intent is to inform, to persuade, to analyze, to entertain, or something else is a valuable start. Moreover, learning about who your intended audience will help you figure out how detailed or general to get, and what types of interactivity or consumption-ready features you wish to build into the visualization

2. Are you looking to analyze trends, show data composition, compare different entities, identify relationships between variables, or show the distribution of values?

Depending on the desired outcome, you might:

· Show trends using a line chart, or a column chart

· Show composition using a pie chart, a stacked chart, or perhaps a geospatial visualization (if the data has a geospatial component)

· Compare or identify relationships between different entities using bubble charts, scatter plots spider charts

· Show the distribution of values using a column chart or histogram or a scatter plot

3. What is the desired user experience? You want to make data visualization intuitive and effortless for the reader, this will them experience your intended outcome.

Depending on the visualization, filters, sliders, key performance indicators (KPIs), text or numeric values might be useful features to include. Moreover, building interactivity features can greatly improve the user experience, such as the ability to:

· Mouse-over and see the value of the selected region or dot

· Add enter and exist selections, transition elements and other animations

· Click to drill down into a deeper detailed version of the data

· Link different visualizations on the same page together so that when you change one visualization or selection the other selections change.

4. How can I get the data that I need, and then, what techniques can I use to prepare it so that is ready to visualize?

Prepare to spend a good amount of time preparing (and verifying) your data. You need to make sure that the data you capture is accurate so your visualization is useful. Open data portals from organizations such as the W.H.O. are a good place to start.

5. What add-ons should I combine to build the desired visualization, interactivity features, and user experience?

Since users can customize the visualization in accordance to their needs, D3.js allows you to create countless models. You can see many (168+ and counting!) examples at Observable: https://observablehq.com/@d3/gallery

Having answered these questions, it is then time to figure out which data, methods and features of D3.js you will need to learn, prepare and/or deploy to accomplish your goal.