~ / teaching / InfoVis / practical works

Infovis practical works with D3.js

© 2012—2023 - Renaud Blanch

Before you start…

• read this quick Intro to D3.js. It first introduces the web standards (HTML, CSS, SVG) you will need to understand before starting using D3. It also presents the main concepts of D3 in a compact way.
• refer to D3 in Depth for a more comprehensive introduction (have a first look at it and come back to it later when needed).
• keep D3.js: a JavaScript/HTML/SVG/CSS visualization toolkit, the official documentation at hand for another quick introduction, and more importantly for links to tutorials and documentation, and to many examples.

Practical works

1. Anscombe's quartet: simple scatterplots reproducing the famous Anscombe's quartet figures
2. Penguins: scatterplot with colors, shapes and legend
3. GapMinder: bubble chart with animation and interaction
4. Temperature anomaly: horizon graphs with animation and interaction

Going further

• Data cleaning, manipulation, and wrangling in JavaScript with D3.js: a must read!
• Interactive Data Visualization for the Web: a D3 tutorial: a nice book
• D3 Tips and Tricks
• Introduction to D3 Course: a video intro by Observable
• Observable Gallery: D3.js code examples by categories

last update: jan. 10, 2025