Assignment: Create an Interactive Visualization
For this assignment, you are to create an interactive visualization by doing the following:
- Take a look at your bl.ocks.org profile and think about which of your existing visualizations could be made interactive.
- Fork one of your examples on bl.ocks.org.
- Add one of the interaction techniques discussed in Chapter 11 and listed below to the fork.
- Submit the bl.ocks.org URL of the interactive visualization.
You may add any of the following interactions:
- Change over time
- For example, you could add a menu for selecting which attribute maps to a certain channel (such as X, Y, or Color), and make the visualization change to the new selection with an animated transition.
- Here's an example that does this: scatterplot menus with d3-component | radius select
- Another example of change over time would be to add a time slider.
- For example, hovering over elements in a color legend can highlight the corresponding marks. This can be done wherever there is a color legend.
- Here's an example that does this: Religions of Largest 20 Countries
- Note that one effective way to achieve this is to have separate layers as <g> elements, one for the static base layer, and one for the highlighted marks.
- Panning & Zooming
- If your visualization has lots of detail, panning and zooming may be a good choice.
- It's most common with maps, but also can work for scatter plots and other idioms.
- There are many examples in d3-zoom
- The simplest to implement is geometric zooming, which updates the transform of a group element.
- Here's an example of panning & zooming on a globe.
- Here's a more complex example Cities on the Globe.