Skip to main content
SimilarExport ZIP
100%

Making a bar chart

✓ Published2🌍 Public
Kkhuton
Last edited Jan 18, 2021
Created on Jan 7, 2021
Forked from Lets make a face

This example shows a horizontal bar chart of the population of 20 countries, sorted from largest to smallest, using a bar for each nation. The chart is built with D3.js version 6, using `d3.select`, `d3.csv`, `d3.scaleLinear`, and `d3.scaleBand` to map population values to bar widths and country names to vertical positions. Rendered as an SVG, the chart displays axes generated by `d3.axisLeft` and `d3.axisBottom`, with bars styled via the `styles.css` file. Data comes from a local `data.csv` file.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Making a Bar Chart with D3

This example shows a horizontal bar chart of population figures for ten countries, ordered from largest to smallest. The visualization is built with D3 v5, using `d3.csv` to load the data, `scaleLinear` and `scaleBand` for the axes, and `axisLeft` and `axisBottom` to render tick marks. Population values are read as strings from the CSV and converted to numbers, then multiplied by 1000 before being mapped to bar widths. The SVG is styled with a steelblue fill for rectangles.

WWhatTheFork85
92% match
Loading thumbnail…

Making a Bar Chart

A horizontal bar chart displays population counts for ten countries, with bars sorted by value from largest to smallest. The visualization uses D3 v5’s `scaleLinear` for the x-axis, `scaleBand` for categorical y-axis spacing, and `axisLeft`/`axisBottom` for tick marks. Data loads from a CSV file via `d3.csv`, with population values multiplied by 1000. SVG rendering positions rectangles with attributes set from the scales.

NNicole Kan
92% 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
91% match
Loading thumbnail…

Making a Bar chart

This example shows a horizontal bar chart of population data for the ten most populous countries, with the bars ordered alphabetically by country name and scaled by population. It uses d3.csv to load the dataset, d3.scaleLinear for the x-axis, d3.scaleBand with padding for the y-axis, and d3.axisLeft and d3.axisBottom to render the axes. The SVG is 960 by 500 pixels, with margins applied and rectangles filled in steelblue, reflecting a static, data-driven visualization built with d3 v5.

Hhomerts95
91% match
Loading thumbnail…

Make a bar chart

A horizontal bar chart displays population figures for ten countries, ranked from largest to smallest. The chart uses D3 v5 with `csv` to load data and `scaleBand` for the categorical y-axis, while `scaleLinear` maps population values to bar widths. Axes are added with `axisLeft` and `axisBottom`, and bars are rendered as SVG `rect` elements. The data is read from `data.csv`, with population values multiplied by one thousand during preprocessing.

1123fischer
91% match
Loading thumbnail…

Make a bar chart

A horizontal bar chart displays population figures for ten countries, ranked from largest to smallest. The chart uses D3 v5 with `csv` to load data and `scaleBand` for the categorical y-axis, while `scaleLinear` maps population values to bar widths. Axes are added with `axisLeft` and `axisBottom`, and bars are rendered as SVG `rect` elements. The data is read from `data.csv`, with population values multiplied by one thousand during preprocessing.

1123fischer
91% match
Loading thumbnail…

Making a Bar Chart

This example shows a horizontal bar chart of population counts for twelve countries, with each bar’s length scaled linearly and country labels aligned on the vertical axis. The visualization uses D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, and `selectAll().data().enter().append()` to render SVG rectangles. Data is loaded from a CSV file via `d3.csv`, with population values converted from numeric strings to numbers by multiplying by 1000. The chart applies fixed margins and transforms to position axes and bars within an SVG container.

JJustin Gieselbach
91% match
Loading thumbnail…

making a bar chart

This example shows a horizontal bar chart ranking the populations of ten countries, from largest to smallest. The visualization uses a linear scale to map population values to bar widths and a band scale to position the categorical country labels, with axes rendered using d3.axisBottom and d3.axisLeft. The SVG is drawn using D3 v5, with data loaded from a CSV file via d3.csv and population values converted to numbers before rendering. Bars are appended as SVG rect elements with a steelblue fill.

Jjingwg3@163.com
91% match