Interactive barchart with D3

This week you will implement an interactive barchart using D3. Note that you are not allowed to use any other libraries then D3.

Part 1: Intro D3

This is an introduction assignment to D3. Please take time to read the tutorials carefully. Please note that there are different versions of D3. If you decide to use the newest release of version 4, pay attention that the examples you base your code on are in the same version! The tutorial that you will be going through this week uses version 3!


Introduction: Readings on D3 and SVG

Please read this blog post about D3, Three Little Circles, A Bar Chart Part 1 and answer the following questions (save your answers in questions.pdf). For further reference a short list of D3 and SVG resources is included below. Please take a look, as these may be helpful for your homeworks or future projects!

  1. How can D3 access and change the DOM? What do select and selectAll do?

  2. What are the d and i in function(d){} and function(d, i){}?

  3. Write sample lines of JavaScript to add a div element with class “barChart1” and to add an svg element with class “barChart2” with square dimensions.

  4. Describe append, update, enter, and exit at a high level. What does “selectAll + data + enter + append” refer to?

  5. What are the main differences between drawing a bar chart with HTML and SVG?

  6. In drawing the simple bar chart with D3 and SVG, what elements were appended, and what parts of the graph did these elements correspond to?

D3 setup

You can find the detailed instructions on how to set up D3 here.

You should run the server from within the directory where your html file is located. Once the server is running, go to:


Load dataset in JSON

The most convenient way to load your data set with D3 is to use JSON format and to load it using the d3.json function. Note that this loading function takes callbacks (ex 1 and ex 2) and that the file loading is done asynchronously, so the data will only be available in the scope of the callback. As an aside: if you want to load several files that all need to be available before your program can run look into queue.js.

Part 2: Interactive barchart

Read Part 3 of the barchart tutorial (you might want to read Part 2 of this tutorial as well, if you haven’t done so yet) and reproduce the barchart using your own data that you prepared this week (Intro). As for interaction, your bars should change color while hovering over them (just like in the example in Part 3). Additionally you should display the data value for the chosen bar above it (on mouse hover). Use the d3-tooltip and do not make any changes through CSS.

Update your completed files in a folder Barchart: barchart.html , barchart.js and barchart.css. Note that you may not need barchart.css here unless you would like to change additional styling with regard to text, margins, etc.

Submit instructions

  1. Push the following into your Week 3 folder:
    • 1: questions.pdf
    • 2: barchart.html, barchart.css, and barchart.js
    • 3: D3 library, if linked to a local copy.
      1. Don’t forget to link to your ‘barchart.html’ in the ‘index.html’, so that your assignment is published om your github website.