Maarten van 't Wout

@vantwoutmaarten·3 public vizzes

Let's make a face with D3.js!

Five D3-generated apples start as plain circles on an SVG canvas. Using data binding and `selection.enter()`, each fruit receives an interactive face made from additional circle elements, with positions tied to index-based spacing. The example demonstrates fundamental D3 v5 joins with `selectAll` and `attr` updates, rendering entirely through SVG as specified in the HTML document.

Dec 12, 2019

Loading thumbnail…

Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates D3’s general update pattern with special cases for entering, updating, and exiting elements in a fruit bowl visualization. Five apples appear initially; one is removed, another is replaced by a lemon, and a third apple is deleted, showing how `selection.join` handles groups via `enter`, `merge`, and `exit`. The code uses `d3.scaleOrdinal` for colors and radii, and appends SVG `rect`, `circle`, and `text` elements. Data is plain JavaScript objects, with updates triggered by `setTimeout` calls.

Dec 12, 2019

Loading thumbnail…

Choropleth Map

This choropleth map visualizes global income categories by economy type, coloring each country according to a categorical color scale. Countries are drawn as SVG paths using the D3 geoPath projection, with a natural Earth projection applied. The color legend is implemented as a custom component that shows the categorical palette. Data on country economies comes from a TSV file loaded via D3's TSV utility, combined with TopoJSON world map features. Zooming is supported through D3's zoom event handler.

Dec 12, 2019