liveBook · Manning

Cross-highlighting

As explained in D3.js in Action, Third Edition

Cross-highlighting is an interaction technique in which selecting or focusing one visual element highlights related elements in another view.

Cross-highlighting links views so an interaction in one view reveals the related data in another. It helps people connect a timeline, map, or other control to the items it describes instead of inspecting each view separately. section 14.6 section 8.7

Filter paintings by timeline period

Selecting a period on a timeline can limit a paintings view to works created during that period, connecting places and periods in a life timeline with artistic production. section 14.6

Explore events by country

A map can act as a filter for a blackout visualization: choosing a country highlights or exposes the internet-blackout events associated with it. section 8.7

Figure 14.20 When a period is selected on the timeline, only the paintings created during that period are visible on the visualization.
figure

The selected timeline period leaves only the related paintings visible, showing cross-highlighting as a direct visual filter. section 14.6

How D3.js in Action, Third Edition covers it

How deep it goes
Defines the interaction through project examples but defers implementation details.
Examples
Uses a selected timeline period to filter paintings and a map to explore country-specific blackout events.
What you can do after
Evaluate/understand how linked interactions can make a visualization more explorable.
How it connects
Links tooltips, filtering, highlighting, maps, timelines, and Svelte stores.

Related concepts

This explainer was generated by Manning's knowledge graph from the text of D3.js in Action, Third Edition. The section links point to the parts of the book it draws on.