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:
interim deadline: load two datasets using queue(), make a new interactive visualization that uses update function, re-use an interactive visualization that you made in the previous weeks and link it interactively to your new visualization.
final deadline: fix the bugs, use bootstrap to add additional interactive element and optimize your design, explain your design choices, optimize your code (strict grading).
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.
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.
Add another interactive element to change an additional variable using bootstrap. You can choose from: a button, a drop down, a search balk. If you would like to add an interactive table or another element you must first get a permission from your TA.
You can also add a navigation balk to re-direct to the texts for step 5 and 6.
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:
- Each of your visualizations should have all the necessary ingredients (title, axes, names, etc.).
- Design of your visualizations is important, also the overall design of your webpage will be graded.
- Think about all the design principles that were mentioned during the course and whether your visualizations are designed according to those (e.g. graphical integrity).
- Pay attention to the storytelling aspect of your visualizations.
- Do not forget to link to the data sources or any other sources that you are using.
- Push any libraries used, including d3 if linked to a local copy.
- Push the PDF in which you describe the design process and justify your design choices.
- Do not forget to publish your webpage.