Homework: 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. At the end of class post your solution in Piazza as a Blocks + Gist or JS Fiddle under HW5.

Setup

This assignment includes 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 link these visualizations by adding interactions so they can affect each other. To do this, learn about the event handler d3-dispatch (included in d3 v4), which makes communication across visualizations easier. We show some examples of this in class.

To make it easier to get started, we have prepared a starting point (demo, code) with the node-link diagram and the pie chart statically put side by side. Note the use of d3.dispatch: data.js loads the data, and notifies both visualizations that the data is available, which can then use this information independently to render.

First Goal

Use d3.dispatch and the strategies discussed in class to implement the following interactions:

• 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.

Second Goal

Now, add brushing and linking to the node-link diagram, and use it to re-draw the pie chart to show the distribution of groups among the selected nodes. An example of brushing can be found here.

Take the brush variable, make sure you add the svg layer for the brush (it calls .call(brush)), and then implement a brushended function that detects the nodes within the drawn rectangle, and that tells the pie chart to update via a event dispatch that contains information about the selected nodes.

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:

• Bar, scatter, and time, which uses d3-dispatch.

• Force-directed and parallel coordinates.