The Data Driven Library (D3) is one of the most famous Javascript libraries used to build graphs and draw paintings. Regarding graphs, there are many web sites providing ready-to-use code, such as the D3 Graph Gallery and From Data to Viz. However, these web sites provide only the basic code, without tips or details to highlight data context or insights.
In this tutorial, I exploit the d3-annotation library to extend two simple graphs provided by the D3 Graph Gallery, in order to make them more readable from general audience:
No one ever made a decision because of a number. They need a story. (Dan Kahneman)
All the code is available in my GitHub repository.
The first example is the simple bar chart, provided by the D3 Graph Gallery and shown in the following figure:
Image by Author
The graph tries to plot the following dataset:
Image by Author
From the point of view of data context, this graph presents at least two problems:
#javascript #graph #data-science #d3js