liveBook · Manning

Scatterplot filtering

As explained in D3.js in Action, Third Edition

Scatterplot filtering is the technique of restricting the data displayed in a scatterplot according to a selected criterion.

Scatterplot filtering restricts visible points according to a selected criterion. In a D3 chart, filter buttons trigger a click handler, update the active button, and derive a reduced dataset. section 7.4.2

A practical filtering update typically:

  • Listens for clicks on buttons with the filter class. section 7.4.2
  • Marks the clicked filter active and deactivates the others. section 7.4.2
  • Binds the result to circles and transitions their positions, sizes, colors, and visibility. section 7.4.2

Filtering by hemisphere

A filter handler can compute updatedData with data.filter(d => d.hemisphere === datum.id), then update the chart through a keyed join. The key preserves the identity of points that remain visible instead of matching circles only by DOM order.

How D3.js in Action, Third Edition covers it

How deep it goes
Walks through event handling, active states, dataset filtering, joins, transitions, and stable keys for retained points.
Examples
Uses cetacean hemisphere buttons, circle marks, and an all-data option to demonstrate filtering.
What you can do after
Apply it via D3 to filter bound circle elements and animate entering, updating, and exiting points.
How it connects
Connects event listeners, data binding, data joins, transitions, and enter, update, and exit selections.
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

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.