Online data visualisation (D3.js)

One of the most powerful ways to tell stories online is by using a data visualisation. A static data visualisation can be used to give one perspective to the audience. With an online visualisation, people can choose their perspective themselves and seek out parts of the story that are interesting to them.

In this training you will learn essential skills to create web-based data visualisations. Online data visualisations make use of the central web technologies of HTML, CSS and JavaScript to enable engaging data explorations. In this training you will learn how to make data interactive and how to bring it to life in a visualisation using D3.js. Some knowledge and experience in web-based development (in particular Javascript) is required. Participants need to know at least Arrays and Objects, maps and filters.

Course description

We will start by looking at the D3 documentation, which is thorough but can be quite overwhelming to navigate. D3.js is the most powerful Javascript library for creating dynamic and interactive visualisations.

We will look at how the D3 ecosystem can be used to your advantage. Then we dive straight into the code, starting with selections and data binding. When we have a good idea about these concepts, we will use enter-append to create our first bar chart. We will learn scales and axes to annotate charts and learn update/merge and exit-remove to transition the chart between different data states.

Depending on the expertise of the participants, more complex visual shapes and interaction techniques will be added to the programme. If possible, we will also have a look at some other D3 modules to explore.

This one day training is a mix of explanation, demonstration and hands-on exercises. At the end of the training you will have a better understanding in how to make visually attractive and interactive graphs using D3.js.

The following topics will be covered:

  • examples of online data visualisations;
  • looking into the code design and language;
  • going through the D3 ecosystem;
  • the core of D3 (selections, data binding, DOM elements);
  • scales and axes;
  • colors and shapes;
  • Enter and update; Exit and merge;
  • adding interaction with D3.js;



Shirley Wu is a freelance software engineer specializing in data visualization. She combines her love of art, math and code into colorful, interactive data visualizations. Her work can be found at


The cost for the training is € 369 excluding VAT and including coffee, tea and lunch.

Target audience

The workshop is for those who are new to D3.js or who have played around but haven’t made their own visualisation from scratch. The goal is to get an intuitive understanding of D3’s core concepts and equip participants with the tools to explore are learn the rest of the library on their own. The workshop is more like a deep dive into specific core modules of D3 then a comprehensive introduction.
Some experience in Javascript is required.

Practical information

20 May 2019 (09.30 – 17.00)
The training will be given in English.
The training will take place in Amsterdam (with reservation).

Sign in