Homework 5: Coordinated Views (In Class)
In this exercise you will create a tool using D3 to visualize different aspects of the D3 Les Misérables data.
In-Class Goal
It will include two visualizations:
-
A force-directed node-link visualization of the character co-occurrences.
-
A pie chart showing the size of the node groups using the sector arc encoding.
You will implement brushing and linking interaction between them like so:
-
When a node is moused over in the node-link visualization, it highlights the associated sector of the pie chart.
-
When a sector is moused over in the pie chart, it highlights the associated nodes in the node-link visualization.
At the end of class post your solution in Piazza as a JS Fiddle or the like under HW5.
Stretch Goal
If you still have time in class, include a third visualization:
- A bar chart showing the distribution of edge values.
The interaction is modified thusly:
-
When a node is moused over in the node-link visualization, it highlights connected edges, the associated sector of the pie chart, and the associated bars in the bar chart.
-
When a sector is moused over in the pie chart, it highlights the associated nodes and connected edges in the node-link visualization, and the associated bars in the bar chart.
-
When a bar is moused over in the bar chart, it highlights the associated edges in the node-link visualization and their connected nodes. The sectors of the pie chart that are associated with the connected nodes are highlighted.
Examples
Some examples of brushing and linking: