D3 Linked Views

In this homework you will create a linked views visualization in D3 consisting of at least two interactive visualizations. You can find many examples of linked views online, here is one that comes close to what you will be designing in this assignment Asylum Seekers Europe. This is merely an example, be critical in your own design!

This is an assignment for two weeks with an interim deadline. The following components will be graded:

Step 1: datasets

As you know, the linked views paradigm is a method of taking multiple simple views of data and allowing interactions with one to modify the display of data in all the linked views. A simple example is that selecting a data case in one view shows that data case highlighted in all other views. In this assignment you will design two linked views to show the dataset of your choice. There is one strict requirement about your data: you have to load to separate files using queue.js. This D3 example uses queue to load two json files: D3: Queue.js. Please take care that your data is complex enough for your design: enough distinct variables for two visualizations and the interactive elements. We advise you to use existing datasets, do not to scrape as that might dominate the assignment. Whether you use JSON or CSV is up to you, as long as you load them from a separate files using the proper D3 functions.

If you are running out of time finding your own data, please have a look here: Happy Planet Index, Better Life Index, Quality of Life.

Step 2: interactive visualizations

Your dashboard must consist of two interactive visualisations. You can reuse one visualisation from a previous assignment but the second visualisation should be something new, which you have not implemented yet.

You can choose from the basic options: (1) map, (2) calendar view, (3) grouped/stacked barchart.
Or if you want to challenge yourself choose from the advanced options: sunburst, chord plot, sankey diagram, tree/network, etc. Choose your battles wisely and consult with your TA before your start on advanced option.

Your first visualisation should encode at least two variables and be interactive (e.g. a map of European countries which visualises a variable in color, with tooltip). Your second interactive graph should represent another variable(s) from a dataset and should be interactive as well (e.g. scatterplot wth a tooltip).

Step 3: linked views

The two interactive visualizations should be connected with each other. That means that interaction on the map should cause an update of your second visualization (or other way around, or both). You can, for example, select a country on the map and update your e.g. scatterplot accordingly (so that it shows data for the selected country).

Another example would be a multiseries line graph with an onclick function on the lines which would update a grouped barchart of the variable that the line represents (e.g. clicking on the line which represents max/avg/min temp on a certain date would then update a second visualisation with more information about that date).

Consider using the update function to structure your interaction (not compulsory, but recommended), like in this example.

Step 4: bootstrap

Use bootstrap to optimize the design of your website. “Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.”. Take your time to get to know bootstrap through e.g. this excellent bootstrap tutorial.

Step 5: storytelling

Write a short description of your data and the story that you want to tell with it (you can create a separate tab for it on your website or place the text under your visualisations). Check whether the description matches with the design and the functionality of your interactive linked views. Which storytelling model and which genre(s) do you use? Did you make your point?

Step 6: design choices

Describe the design process and for each step all your design choices (in separate pdf document). You can simply use bullet points so that we can follow the steps that you have taken. Think about the specific design choices for each visualisation, interaction design, the overall website design and also about the technical design (e.g. how do your visualisations communicate?).

Step 7: code optimization

Take at least few hours to critically look at your code. Use this guidelines to optimize your code. The assessment of your code will be very strict this week and based on those guidelines.

Checks before the final deadline: