enter update exit

February 25, 2014

D3 is a data visualization tool that uses method chaining to produce big pictures with little code. The selection library performs a full Outer Join between the data (D) and the visual elements (V), and the enter-update-exit pattern performs work on subsets of this join:

UPDATE: Inner Join (D union V)

selection.data(data_points)

data() binds data_points to the html or svg elements returned by the selection and returns the data not visualized.

ENTER: Left excluding join (D/V)

selection.data(data_points).enter()

enter() returns data_points that are not yet represented visually by html or svg. Chain .append() to add a new element to the page.

EXIT: Right excluding join (V/D)

selection.data(data_points).exit()

exit() returns html or svg elements that no longer have data associated with them. Chain .remove() to eliminate them, or .translate() to make them slide off the page.

Resources

Data Visualization with D3.js Cookbook (affiliate link)

Visual Representation of SQL Joins


Katie Leonard

Mostly Katie explaining things to herself.

© 2025