Data visualization with d3.js

In this post, I present some visualizations I plotted using the d3.js package.

According to d3.js, “D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.”

Line plot

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 rt.live.

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

Scatter plot

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

Bar plot

Figure 4: bar chart race.

Moving average

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

Area plot

Figure 6: stream chart plot.

Geographic plot

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

Network

Figura 8: force-directed graph.

Resources

- 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

- rt.live

References

[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
Previous

Related