Data visualization with d3.js

According to Crameri et al., “The accurate representation of data is essential in science communication” [1]. Indeed, the choice of the most adequate type of visualization according to the characteristics of data is crucial in order to convey the results of scientific research. For example, the figure below shows the temporal evolution of the effective reproductive number $R(t)$ of COVID-19 in Maringá. By showing the values above one, indicating the accelerated pace of spreading, in red, and values below one, indicating the decelerated pace of spreading, in green, we can visually convey the pace of transmission of the virus.

Figure 1: line plot with confidence interval and colors defined by a threshold. Values above this threshold are colored in red, while values below this threshold are colored in green. This visualization was inspired by the one in the website

The size of the elements is also crucial when representing data. The figure below shows the value of my artist and track listening streaks during 2022. The marker size varies with streak size, thus, visually conveying the size of each streak.

Figure 2: scatter plot with variable marker size according to the variable value (with buttons to alternate between categories).

As another example, the figure below shows the track volume of my most listened artists in 2022. In this context, it makes sense using a stream chart since it conveys the idea of volume.

Figure 3: stream chart plot.

In this following, I present some other figures made by using the d3.js package and their respective tutorial, besides some resources that may help in learning general concepts of data visualization. The source code of the figures can be acessed in this page.

Line plot

Figure 4: multipanel figure (with buttons to alternate between categories). Each panel shows a filled line plot.

Bar plot

Figure 5: bar chart race.

Moving average

Figure 6: bar plot with moving average and adjacent timeline (with button for deactivation of the moving average).

Geographic plot

Figure 7: map with color varying scale depending on the amplitude of the variable (with buttons to alternate between categories).


Figura 8: force-directed graph.


- colorbrewer2

- d3-time-format

- SVG Attribute reference

- D3 6.0 migration guide

- How to Resize an SVG When the Window is Resized in d3.js

- Scatterplot with tooltips

- Multiline chart

- Multiline chart with mouseover

- Barplot

- Barplot with button to change input

- Barplot with clickable legend

- Grouped barplot

- Circular barplot

- Bar chart race

- Streamplot

- Streamplot with transitions

- Map

- Force-directed graph



[1] Scott, A. Interactive Data Visualization for the Web (O’Reilly Media, 2013)

[2] Wilke, C. O. Fundamentals of Data Visualization (O’Reilly Media, 2019)

[3] F. Crameri, G. E. Shephard, P. J. Heron, The misuse of colour in science communication. Nature Communications 11, 5444 (2020).

comments powered by Disqus