Tutorial on d3.js: Data Driven Documents

When: April 18, 2023 at 16:00 - 18:00
Place: ITU, 4D Corridor
Run by: Søren Knudsen

This data jam will introduce d3.js through hands-on tutorials and activities

d3.js, which is short for Data Driven Documents, has now been available for more than ten years. Yet, it is still one of the programming libraries that are most often used to create novel interactive data visualizations both in industry and research. Since its publication, the library has undergone a wealth of changes and improvements. However, the core idea still stands: To support developers in binding data to visual elements.

In this tutorial, Søren will give a first-hand introduction to the library and how to use it. He will assume some familiarity with common web technologies, such as HTML, CSS, and JavaScript.

At the end of the tutorial, we expect that you will be able to:

  • Explain the core idea of d3.js.
  • Create an interactive version of a simple well-known visualization type in d3.js (likely, a bar chart).
  • Explore d3.js further on your own.

We hope to offer a follow-up data jam later in the semester (probably on May 2 or 9).


We loosely follow this plan but are open to drop-ins as time permits.

16.00 Brief introduction to d3 and simple prototyping setup (this will assume basic knowledge of common web technologies)
16.30 How to draw a barchart in d3 (hands-on):
  Joining data to visual elements
  Setting visual attributes from data
  Loading data
  Using d3.scale to map data values to stuff on the screen
  Adding axes using d3.scale
17.00 Check in
17.15 Animating the bars
17.30 Adding interactivity
18.00 Light refreshments and informal chat


Keeping with the jam narrative, we aim for this event to be fun and engaging, and to allow us to meet fellow people with interests related to human data interaction.

  • Have fun
  • Bring your own laptop
  • Discuss perspectives related to human data interaction and beyond