Mike Henderson

@mike-henderson·2 public vizzes

Let's make a map with D3.js!

A world map rendered with D3.js displays country boundaries filled in light green on a light blue sphere, using natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`. Hovering highlights a country in red with a tooltip showing its name from the World Atlas TSV data. The map supports zoom and pan through `d3.zoom`, applying transforms to the SVG group. TopoJSON from world-atlas provides geometry, processed with `topojson.feature`. The visualization demonstrates combining geographic data, interactive controls, and CSS styling in an SVG context.

Jul 3, 2019

Loading thumbnail…

Let's make a face with D3.js! Now

This example demonstrates fundamental DOM manipulation with D3.js by building a smiley face with animated eyebrows. It first sets the SVG canvas background to red, then renders the face elements. The code uses D3’s selection and styling methods (`d3.select`, `svg.style`) on an SVG element, with the face constructed via the `bundle.js` script. The visualization relies on D3 v5 and a simple SVG rendering approach, as shown in the embedded HTML and styles.

Jul 3, 2019