Multiseries line graph with D3

Prepare and load your dataset

This week you will create a multiseries line graph based on your own dataset (if you are not inspired you can always use the KNMI dataset). Your dataset must contain the following variables:

  1. time variable (eg.: data per month)

  2. at least three different variables for 1 time stamp (eg.: maximum temperature, minimum temperature, average temperature per month)

  3. this dataset should be dependent on one extra variable, which should have at least two values (eg.: two different years, two different cities)

Make sure that you put your data in JSON format correctly (the JSON format is compulsory). Optionally, you can use multiple data files. If you want to load several data files that all need to be available before your program can run look into queue.js. This D3 example uses queue to load two json files: D3: Queue.js.

Implement an interactive multiseries line graph

Note: there are plenty of links in this assignment so that you browse through a lot of examples to see what is possible in D3. This does not mean your visualization should look and work exactly like those in the examples. This is just for inspiration! Also do not blindly copy the whole code, always create your files from scratch and understand what is happening.

Before you get started, take a look at these D3 examples of a simple line graph and a multiseries line graph. Note for the simple line graph, the JavaScript is < 60 lines with whitespace.

Start with creating a plot that shows at least three lines. Those lines should be permanently visible on the plot (only if you are ahead of schedule you can try to add/remove the lines interactively). Make sure that you properly label the axes, that the plot has a title and that the data source is explained. Make sure that the date axis uses JavaScript dates, something that is fairly simple using d3.time.format function.

Part 2: Add interactivity

As you already know the D3 selection.on function allows you to bind event listeners to DOM elements. Create a moving cross-hair (or a dot) by binding an event listener to the appropriate DOM element. Note that D3 also makes dealing with mouse coordinates quite easy, see d3.mouse, and that the D3 scales have an invert function.

Create a pop-up next to your moving cross-hair/dot in which you print the exact values of the variables (example: date and temperature).

Part 3: Extend your graph to plot the lines for different years/cities

Extend your multiseries line plot with an additional interactive element. Add an element of your choice that will allow you to toggle between the extra variable (see Part1 point 3). For example you can make a drop-down where you choose a variable (example: a year), a list that toggles between variables (example: two different years) or a slider to change the variable.