Skip to main content
SimilarExport ZIP
100%

MAking a face

✓ Published0🌍 Public
AAlex Jiasheng Ni
Last edited Jan 15, 2021
Created on Jan 15, 2021
Forked from HTML Starter

This example renders a bar chart of country populations from a CSV file, displaying each country’s population as a horizontal bar. The chart uses D3 v6’s `scaleLinear` and `scaleBand` to map population values to bar widths and country names to vertical positions, respectively. The SVG is drawn via D3’s `select` and `selectAll` methods, with data loaded asynchronously through `csv`. The population values are multiplied by 1000 during data preprocessing, and the bars are styled with a simple fill color against a white background.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

make a face

This example displays a horizontal bar chart of country populations using a clean, monospace aesthetic. The visualization encodes population values with bar width via a `d3.scaleLinear` and country names along the y-axis using `d3.scaleBand`. Axes are generated with `d3.axisLeft` and `d3.axisBottom`, while the SVG rendering is driven by React and D3 v5. The data is loaded from a local CSV file and parsed with D3’s `csv` function.

Jjiayuansun
91% match
Loading thumbnail…

Let's make a face with D3.js

This example visualizes country populations as horizontal bars using D3.js v5 within a React framework, rendering to SVG. The bar chart displays each country’s population on the x-axis and country names on the y-axis, with bar widths scaled linearly via `d3.scaleLinear` and positions set by `d3.scaleBand`. The code loads data from a CSV file, multiplies population values by 10, and appends rectangles to the SVG. The visualization uses `d3.csv` for data loading and `d3.max` to determine the scale domain.

Rrgarimella-viz
90% match
Loading thumbnail…

Let's make a face with D3.js!

This example shows a horizontal bar chart of population by country, rendered as SVG rectangles in a React-based D3 v5 setup. The bars are scaled linearly by population and banded by country name. The code uses `d3.csv` to load population data, `d3.scaleLinear` and `d3.scaleBand` for axes, and appends `<rect>` elements via `svg.selectAll`. Data is parsed by converting population strings to numbers. SVG dimensions are read from the markup, and rendering is triggered after asynchronous CSV loading.

Mmarkxwang
89% 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
89% 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, 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
89% 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
89% match
Loading thumbnail…

Lets make a face with D3.js

This example uses D3.js to render a population bar chart from a CSV file, displaying country names alongside their populations in thousands. The SVG visualization applies scaleLinear to map data values, appending rectangles of fixed width and height for each entry. The code loads the data with d3.csv, converts population values numerically, and binds them to SVG elements. The final rendering produces a simple, static representation of the dataset without interactive features.

BBoris97929500
88% match
Loading thumbnail…

Making Bar Chart with D3.js

This example shows a simple horizontal bar chart of country populations, with each bar’s width proportional to the population value from the CSV file. The visualization uses D3 v5’s `scaleLinear` for the x-axis and `scaleBand` for the y-axis, rendering SVG `rect` elements inside a fixed 960×500 viewport. It loads data asynchronously via `csv()`, converts population strings to numbers, and appends the bars using a data join.

EEverest K.C.
88% match