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 averageFigure 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
- How to Resize an SVG When the Window is Resized in d3.js
- Multiline chart with mouseover
- Barplot
- Barplot with button to change input
- Barplot with clickable legend
- Map
- 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).