Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Let's make a face with D3.js!

Public visualization

Let's make a face with D3.js!

0 stars0🌍 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.

Comments

Sign in to join the discussion.

MIT Licensed