liveBook · Manning

Semantic zoom

As explained in D3.js in Action, Third Edition

Semantic zoom is an interaction technique that changes the type or level of detail of displayed data as the view is zoomed.

Semantic zoom changes the kind or level of displayed data as a view zooms, rather than merely enlarging the same graphics. A map can show country boundaries and major cities when zoomed out, then reveal roads, smaller towns, and parks when zoomed in. section 13.3

Use semantic zoom to:

  • Present strategic or global information at low zoom levels. section 13.3
  • Expose higher-resolution data as users zoom in. section 13.3
  • Apply the pattern to maps and other data visualizations. section 13.3

Map detail by zoom level

A zoomed-out map displays country boundaries and major cities; zooming in replaces that overview with roads, smaller towns, and parks. Mobile maps commonly use this pattern. section 13.3

How D3.js in Action, Third Edition covers it

How deep it goes
Defines semantic zoom and contrasts it with graphical zoom, but does not provide its implementation.
Examples
Uses maps that progress from country boundaries and major cities to roads, towns, and parks.
What you can do after
Apply semantic zoom to reveal strategic or high-resolution data at appropriate zoom levels.
How it connects
Connects semantic zoom with graphical zoom, maps, mobile interfaces, and data visualization.

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.