Skip to main content
SimilarExport ZIP
100%

Make a bar chart!

✓ Published1🌍 Public
ZZihan (Lexie) Zhou
Last edited Mar 6, 2023
Created on Mar 6, 2023

This example shows a horizontal bar chart of population estimates for ten countries, sourced from the World Population Prospects 2017. The chart uses `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the y-axis, with `d3.axisLeft` and `d3.axisBottom` to render ticks. Rectangles are appended to an SVG group after applying the margin convention. Data is loaded from a CSV file and converted to numeric values before rendering.

AI-generated description

Make a bar chart. Data from "World Population Prospects 2017" The topic includes representing a data table in JavaScript, creating rectangles for each row, using linear and band scales, the margin convention and adding axes.

MIT Licensed

Similar vizzes

Loading thumbnail…

Making a bar chart

This example shows a horizontal bar chart of population estimates for ten countries, using a CSV data file. The bars are rendered as SVG rectangles with a steelblue fill, and the chart includes left and bottom axes. The code uses D3 v5’s `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to load data, map population values to widths, and position country labels. Population numbers are read as strings and converted to numeric values before scaling.

Mmagua
91% match
Loading thumbnail…

Making a Bar Chart

A horizontal bar chart displays population estimates for ten countries, with bars extending from left to right and labeled by country name. The visualization uses D3 v5’s `scaleLinear` and `scaleBand` to map population values and country names to pixel positions, while a data join appends `rect` elements to the SVG. Data is loaded from a CSV file using `d3.csv`, with population values parsed as numbers before rendering.

Rross-fisher
90% match
Loading thumbnail…

Making a bar chart

This example shows a horizontal bar chart of population estimates for the ten most populous countries, scaled in thousands. The visualization uses D3 v7 with an SVG renderer, loading data from a CSV file and encoding population with a linear scale and country names with a band scale. The code imports specific D3 modules like `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct axes, while bars are appended as SVG `rect` elements with steelblue fill.

JJuyeonee
90% match
Loading thumbnail…

Make a BarChart

This example visualizes the populations of the ten most populous countries using a horizontal bar chart, based on 2018 estimates from World Population Prospects 2017. The chart encodes country names on a band scale and population counts on a linear scale, with bars rendered as SVG rectangles. It loads data from an external CSV file via `d3.csv`, converts population values from thousands to absolute numbers, and builds the axes using `axisLeft` and `axisBottom`. The implementation relies on D3 v6 modules such as `scaleLinear`, `scaleBand`, and `select`.

DDataFeast_71
90% match
Loading thumbnail…

Making a bar chart

A horizontal bar chart displays population estimates for ten countries, ordered from largest to smallest and read from a CSV file. The chart uses D3 v5’s `scaleBand` for the categorical country axis and `scaleLinear` for the quantitative population axis. SVG rectangles are bound to the data, with width mapped to population and height set by the band scale’s `bandwidth`. Axes are rendered using `axisLeft` and `axisBottom`, with margins applied via an SVG group transform.

JJason-Manbodh
90% match
Loading thumbnail…

Making a bar chart

This example shows a horizontal bar chart of population data for the ten most populous countries, drawn as SVG rectangles scaled by population and ordered by country name. It uses D3 v7’s `scaleLinear` for the x-axis, `scaleBand` for the y-axis categories, and `axisLeft` and `axisBottom` to render ticks. The chart loads data from `data.csv` via `d3.csv`, converts population values to numbers, and appends the rectangles with a fixed steelblue fill.

Sstephanie0215
90% match
Loading thumbnail…

Making a bar chart

This bar chart displays population estimates for the ten most populous countries, using data from the United Nations World Population Prospects 2017. The visualization employs D3 v5’s `scaleLinear` for the x-axis, `scaleBand` for the categorical y-axis, and `axisLeft`/`axisBottom` to render tick marks. Population values are multiplied by 1,000 and drawn as steel-blue SVG rectangles, with margins and a translated group element positioning the chart within the 960×500 viewport.

Wwsupko
90% match
Loading thumbnail…

Making a bar chart

A horizontal bar chart displays population estimates for ten countries from a CSV file, with each bar’s length proportional to population. The visualization uses d3.csv to load data, d3.scaleLinear for the x-axis, d3.scaleBand for the y-axis, and d3.axisLeft and d3.axisBottom for ticks. Bars are appended as SVG rectangles with steelblue fill, positioned using the scales’ output ranges.

KKaleb LaBarrie
90% match