Skip to main content
SimilarExport ZIP
100%

Making a bar chart

✓ Published2🌍 Public
Cchrisdreece
Last edited Jan 14, 2021
Created on Jan 8, 2021
Forked from Make a Face

This example shows a horizontal bar chart comparing the populations of ten countries, sorted by the country name. It uses D3 v6 to load a CSV file and render SVG rectangles. The code defines linear and band scales with `scaleLinear` and `scaleBand`, and draws the y-axis using `axisLeft`. Rectangles are appended via the enter selection, with widths mapped to population values and heights set by the band's bandwidth.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Making a bar chart

This example shows a horizontal bar chart ranking the populations of ten countries, using a linear scale for population values and a band scale for country names. It visualizes data loaded from a CSV file with `d3.csv`, and scales using `scaleLinear` and `scaleBand`. The chart renders SVG rectangles with axes generated by `axisLeft` and `axisBottom`, plus margins and padding for clear layout.

Ttheaddies
94% match
Loading thumbnail…

Making a Bar Chart

This example shows a horizontal bar chart comparing the populations of ten countries, with bars sized proportionally to each country’s population value. The visualization uses D3 v5’s `scaleLinear` for the x-axis, `scaleBand` for the y-axis categories, and renders bars as SVG `rect` elements. Data is loaded from a CSV file via `d3.csv` and parsed from strings to numbers. The chart emphasizes a clean, straightforward layout without axes or labels, focusing solely on the relative bar lengths.

Ookleinlux
93% match
Loading thumbnail…

Making a bar chart

This example shows a horizontal bar chart of population data for ten countries, with each bar’s length proportional to the population value. The chart uses D3 v5’s `scaleLinear` for the x-axis, `scaleBand` for the categorical y-axis, and `axisLeft` and `axisBottom` for tick marks. Data is loaded from a CSV file via `d3.csv`, with population values converted from thousands. Bars are rendered as SVG `rect` elements, styled with steelblue fill, within an SVG canvas.

BbeauMarko
93% match
Loading thumbnail…

Making a Bar Chart

This example demonstrates a horizontal bar chart comparing the populations of ten countries, using a CSV data source. It renders as an SVG using D3 v5, loading data with `d3.csv` and scaling with `d3.scaleLinear` and `d3.scaleBand`. The chart draws axes via `d3.axisLeft` and `d3.axisBottom`, and creates steel-blue bars with an applied `d3.selection` and `.append('rect')`. The code sets the chart’s dimensions from the SVG attributes and applies margins for clear presentation.

BBarryC7
93% match
Loading thumbnail…

Making a bar chart

This example shows a horizontal bar chart ranking the populations of ten countries, scaled by thousands. The visualization uses D3 v5 with SVG rendering, reading data from a CSV file and mapping population values to bar widths via `d3.scaleLinear` and country names to `d3.scaleBand`. The code demonstrates data loading with `d3.csv`, appending rectangles to the SVG, and applying margins to position the chart. No axes or labels are drawn, focusing purely on the bar geometry.

Ggavriel-binshtok
93% match
Loading thumbnail…

Making a bar chart

This example shows a horizontal bar chart ranking the populations of ten countries, scaled by thousands. The visualization uses D3 v5 with SVG rendering, reading data from a CSV file and mapping population values to bar widths via `d3.scaleLinear` and country names to `d3.scaleBand`. The code demonstrates data loading with `d3.csv`, appending rectangles to the SVG, and applying margins to position the chart. No axes or labels are drawn, focusing purely on the bar geometry.

Ggavriel-binshtok
93% match
Loading thumbnail…

Making a Bar Chart

This bar chart displays the populations of ten countries, using horizontal bars sorted by population with a linear scale for the x-axis and a band scale for the y-axis. It loads data from a CSV file and renders SVG rectangles via D3 v5, using `select`, `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, and `max` to construct the chart with margins and axes.

Sshungshung
93% match
Loading thumbnail…

making a bar chart

This example shows horizontal bars representing the populations of the ten most populous countries using a bar chart. The D3 v6 code loads the data from a CSV file, scales the values, and renders the bars as SVG rectangles. It uses `scaleLinear` for the width axis and `scaleBand` for the categorical country names, with margins set via an SVG transform.

Nnexus1058
93% match