Let's make a face with D3.js!

100%

Let's make a face with D3.js!

✓ Published1🌍 Public

Last edited Mar 12, 2021

Created on Mar 9, 2021

This example demonstrates a horizontal bar chart of country populations using D3 version 6, rendered as SVG. It loads data from a CSV file, scales the population values with `scaleLinear` and maps country names via `scaleBand`, then draws rectangles for each bar. The chart includes axes created with `axisBottom` and `axisLeft`, custom tick formatting using `format` to abbreviate large numbers, and styling from an external CSS file.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

This example displays a horizontal bar chart of country populations using D3.js v5, with each bar’s length scaled linearly against population values and countries ordered along a band scale. The SVG rendering relies on `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `d3.axisBottom` to compose axes, while data loads from a CSV file via `d3.csv` and populates `rect` elements dynamically.

DDifan Gu

95% match

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates a horizontal bar chart of country populations using D3.js v5, with SVG rendering. The chart displays population data from a CSV file, where each country’s bar width is scaled by population using `d3.scaleLinear`, and the y-axis positions are set via `d3.scaleBand`. It loads data asynchronously with `d3.csv` and appends rectangles to the SVG. The accompanying README includes a linked YouTube tutorial, referencing “Let's make a face!” as the project’s playful title.

Mmdfmk

94% match

Loading thumbnail…

Let's make a face with D3.js

This example displays a horizontal bar chart of country populations using D3.js, with bars rendered as SVG rectangles. The chart scales bar widths linearly against population values and positions them along a band scale for country names. The code imports specific D3 modules (`select`, `csv`, `scaleLinear`, `max`, `scaleBand`) to load data from a CSV file, parse population numbers, and bind the data to rectangle elements. Each bar’s height is set by the band scale’s bandwidth, creating a simple, clean visualization of comparative country sizes.

PpilafGB62

94% match

Loading thumbnail…

Let's make a face with D3.js!

This example visualizes a population bar chart using D3.js, drawing each country as a rectangle scaled by its population data from a CSV file. It uses `d3.csv` to load the data, `d3.scaleLinear` and `d3.scaleBand` for positioning, and `d3.axisLeft` and `d3.axisBottom` to render axes. Bars are appended as SVG rectangles in steel blue, with all rendering handled in the browser via SVG.

Bbenroston

93% match

Loading thumbnail…

Let's make a face with D3.js!

This bar chart visualizes population data for six countries using D3.js v5, with orange bars drawn in SVG. The code loads data from a CSV file, maps country names to the x-axis using `scaleBand`, and population values to the y-axis with `scaleLinear`. Axes are added via `axisBottom` and `axisLeft`, while the chart is rendered by appending rectangles to an SVG group, with margins and dimensions derived from the SVG element’s attributes.

FFrançois Plet

93% match

Loading thumbnail…

Let's make a face with D3.js!

This example renders a horizontal bar chart from population data in data.csv, using d3.scaleBand to map country names to y-axis positions and d3.scaleLinear to map population counts to bar widths. The code loads data with d3.csv, converts the population values to thousands, and appends SVG rect elements within a fixed 960×500 viewport. Although the title promises a face, the visible implementation only draws bars, with console logging showing the scale domain and raw data.

PPatrick White

93% match

Loading thumbnail…

Let's make a face with D3.js!

This example builds a simple bar chart from a CSV of country populations, rendering each row as a 300-by-300 pixel SVG rectangle. The code uses D3’s `select` and `csv` modules, parsing the population column and multiplying it by 1000 before appending the rectangles to the SVG element. The chart demonstrates basic D3 v6 data loading, attribute setting, and SVG rendering without axes or labels.

Lliuleirain

92% match

Loading thumbnail…

Let's make a face with D3.js!

This example displays a horizontal bar chart of country populations, using D3.js v5 APIs such as `select`, `csv`, `scaleLinear`, `scaleBand`, and `max`. The SVG canvas is 960 by 500 pixels, and bars are appended as `rect` elements with heights set by bandwidth and widths scaled to population values loaded from a local `data.csv` file. The chart sorts countries along the y-axis alphabetically, with populations multiplied by 1000 to reflect actual figures.

LLonwabo11

92% match