Interaction

As explained in D3.js in Action, Third Edition

An interaction is a user action and the resulting change in a visualization or interface.

An interaction connects a user action with a visible change in a visualization or interface. Plan it around the questions users want to answer. section 14.6

Useful interactions can answer questions such as:

• Identify the painting represented by a circle with a tooltip. section 14.6
• Reveal exact monthly counts for paintings, drawings, and letters with a tooltip. section 14.6
• Connect cities and artistic production through cross-highlighting. section 14.6

Figure 14.19 Tooltip triggered when the mouse is positioned over a visualization and revealing the number of paintings, drawings, and letters for each month

Hovering over the visualization reveals monthly counts in a tooltip. section 14.6

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

Selecting a timeline period filters the visualization to paintings created during that period. section 14.6

How D3.js in Action, Third Edition covers it

How deep it goes

Defines tooltips and cross-highlighting but defers implementation details and event-listener code.

Examples

Uses painting circles, monthly counts, timeline selection, and linked cities as interaction examples.

What it assumes

Assumes a completed static visualization and focuses on planning its next interactive behaviors.

What you can do after

Apply tooltips and cross-highlighting to answer concrete questions in a visualization.

How it connects

Connects tooltips, cross-highlighting, timelines, and data visualization.

liveBookmanning.com

Read D3.js in Action, Third Edition on liveBook Get the book at manning.com

Related concepts

• consumer contractpart of · A consumer contract is a machine-readable agreement specifying the interactions and responses a consumer expects from a service provider.
• Pact specificationpart of · The Pact specification is a defined file format for representing consumer-provider contracts and their interaction details.
• multimodal interactionincludes · A multimodal interaction is an exchange involving an AI system in which information is communicated through two or more modalities, such as text, speech, or images.
• contract testingused by · Contract testing is a software testing technique that verifies whether interacting components conform to an agreed interface, message, or behavioral contract.
• cross-highlightingimplemented by · Cross-highlighting is an interaction technique in which selecting or focusing one visual element highlights related elements in another view.

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.