Fork me on GitHub
Assignment: Brushing & Linking in D3
In this assignment you will learn about how to implement brushing and linking.
Murder, Poverty, and Unemployment in Texas
The line chart and scatterplot below show murder, poverty, and unemployment rates from 1996 to 2017 in Texas, USA. They are interactively connected via brushing and linking.
If you drag a brush across the marks in one view the marks are selected and highlighted. This is an example of brushing. In general, brushing means selecting as subset of the data marks with an input device which is usually paired with adding a pop-out channel to the marks to highlight them.
You will notice that brushing in one visualization causes marks in the other view to be highlighed too. This is an example of brushing and linking working together. In linking, the same brush effect (pop-out, highlighting) is applied to marks in other visualizations that correspond to the same datums.
What interesting patterns can you see in the data using brushing and linking? How is year related to unemployment rate?
Acknowledgments
List here where any code, packages/libraries, text, images, designs, etc. that you leverage come from.
• D3: Data-Driven Documents by Mike Bostock is used for manipulating the DOM to create visualizations. In particular:
◦ d3-brush, which let you select a one- or two-dimensional region using the mouse or touch. We use it for brushing.
◦ d3-dispatch, which lets you register named callbacks and call them with arguments. We use it for linking.
• Pure CSS responsive ‘Fork me on GitHub’ ribbon by Chris Heilmann is used to create the banner that links back to the source code repository.
• Data from Truth in Accounting’s State Data Lab.