Summary: In this article we look at how D3.js can be used to create a simple visualisation to illustrate the terrible recent Ebola virus outbreak in western Africa.
In this article we look at how D3.js can be used to create a simple visualisation to illustrate the terrible recent Ebola virus outbreak in western Africa.
When I think of the phrase "interactive data visualisation", two related, but subtly different groups of tools come to mind. The first type, and one that has benefited from significant investment in recent years, is the type that allows business analysts to visually explore data, helping them look for relationships that may exist. A popular example of such a tool is Tableau. Tableau aims to allow business analysts and managers to view and explore data without needing to write a single line of code. The other type that comes to mind, and one that is the focus of this article, are tools and libraries that can be easily incorporated into a website to help visitors understand and explore structured data more easily. These tools require a greater understanding of the relationship between source data sets as web developers need to write code to define what data should be used and how is should be presented. My favourite tool of this type, is the awesome javascript library, D3.js, created by Mike Bostock. Some of the most visually appealing and highly interactive websites use D3.js to bind data to DOM objects and display the data using one of a bewildering number of plots and graphs. Some of my favourite examples of visually interactive websites created with D3.js include:
- Colony is a neat little visualisation tool for exploring Node projects and their dependencies
- PBL Netherlands Environmental Assessment Agency
- Uber rides by neighbourhood
- How budgets and box office returns have varied over the 22 Bond films
- Visualisation of domestic energy consumption
- Events in the game of thrones
- Digital archives of jazz history
- Education of world leaders in each country
- Remittance of migrants to their home country
During the past few weeks, I have been looking for a weekend project to dig into D3.js and see how quickly it could be used to build a visually interactive web page. With the terrible news of the recent Ebola virus outbreak in western Africa, I felt there was an opportunity to put together what I hoped would be a useful visualisation for people to use.
While there are a number of good tutorials available on D3.js, if you are looking for a resource that assumes very little background in either HTML, CSS, Javascript and D3.js, I would highly recommend Interactive Data Visualisation for the Web by Scott Murray. After reading the first three quarters of the book, I was able to create a visualisation showing the reported incidents and deaths caused by Ebola in each of the western African countries. While there are still a number of potential improvements, the visualisation captures the key elements of what is becoming an increasingly worrying situation.
All data used in the visualisation was collected from the World Health Organisation. While I have attempted to ensure that the data presented is accurate, please refer to the WHO’s website as a source of truth and for on-going updates.
Interactive data visualisation is a great addition to any website wishing to effectively communicate complex or numerous data as is particularly common with time series data. When we think of time series data, we usually think about historical data, but visually interacting with forward looking data models or predictions is potentially more valuable than historical data. It is a very powerful tool for moving people into action. Two such examples are:
It’s never been easier to create interactive data visualisations for the web. What could you do today that would make a difference to your business or a cause you feel passionate about? Get building.