Skip to main content
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
Iimoutidi
Last edited Sep 25, 2019
Created on Sep 25, 2019

This example charts the ten most populous countries using a horizontal bar chart, with population values read from a CSV file. The visualization transforms D3.js’s fundamental DOM manipulation capabilities into an interactive tutorial, as demonstrated by a smiley face with moving eyebrows. The code explicitly uses `d3.csv` to load data, `scaleLinear` and `scaleBand` for positioning, and `axisLeft` and `axisBottom` for axes. D3’s selection and data-binding methods (`selectAll`, `enter`, `append`) populate the SVG’s `rect` elements, while a tick formatter using `format('.3s')` shortens large numbers in the display.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes