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