liveBook · Manning

Keyboard interaction

As explained in D3.js in Action, Third Edition

A keyboard interaction is an interface interaction performed through keyboard input rather than a pointing device.

Keyboard interaction lets users operate visualizations without a mouse. In an SVG scatterplot, make data marks focusable and reveal the same tooltip on keyboard focus that appears on mouse entry. section 10.2.4

Implement keyboard access by:

  • Adding tabindex="0" to SVG marks so the Tab key can focus them. section 10.2.4
  • Sorting bound data when a predictable DOM and focus order is useful. section 10.2.4
  • Pairing mouseenter with focus to show feedback, and mouseleave with blur to hide it. section 10.2.4
  • Reapplying tabindex and event listeners when filtering creates new SVG elements. section 10.2.4

Accessible cetacean scatterplot

A scatterplot can let users Tab through cetacean circles and display each name in a tooltip. Visible instructions explain that users can pass over circles with a mouse or access them with the Tab key. section 10.2.4

How D3.js in Action, Third Edition covers it

How deep it goes
Explains SVG focusability, DOM order, focus and blur events, and filtered joins, but stops short of broader keyboard semantics.
Examples
Uses a cetacean scatterplot whose circles expose names through mouseenter, focus, mouseleave, and blur.
What it assumes
Assumes an interactive SVG visualization with mouse-driven feedback; teaches keyboard focus handling from the interaction pattern.
What you can do after
Apply SVG tabindex and paired focus events to make interactive chart marks keyboard-accessible.
How it connects
Connects keyboard interaction with accessibility, SVG, tooltips, focus events, blur events, and data binding.
Cover of D3.js in Action, Third Edition
liveBookmanning.com
Read D3.js in Action, Third Edition on liveBook Get the book at manning.com

Also explained in

Compare how 3 books explain keyboard interaction →

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.