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:
time variable (eg.: data per month)
at least three different variables for 1 time stamp (eg.: maximum temperature, minimum temperature, average temperature per month)
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.
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.
- publish your visualization through github pages as usual.
- Pay attention to the overall design of your page. Don’t forget your name, title, sources, etc.