Skip to main content
SimilarExport ZIP
100%

Let's make a bar chart

✓ Published0🌍 Public
Eecw99
Last edited Mar 22, 2020
Created on Mar 22, 2020

This example shows a horizontal bar chart of population estimates for eight countries, scaled from a CSV file. It uses D3 v5 with SVG rendering, employing `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis categories, and `d3.axisLeft`/`d3.axisBottom` to draw the ticks. The population values are multiplied by 1,000 in the data loading step, and bars are appended as SVG `<rect>` elements with a fixed steelblue fill.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a bar chart

This example shows a horizontal bar chart of population figures for eight countries, with the bars sorted alphabetically by country name. The chart is rendered as an SVG using D3 v5. The code loads population data from a CSV file via `d3.csv`, then scales values with `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the y-axis. Axes are drawn using `d3.axisLeft` and `d3.axisBottom`, and each bar is appended as a `rect` element.

Aalicjakot
93% match
Loading thumbnail…

Let's make a bar chart!

A bar chart displays population estimates for eight countries in 2017, using a vertical layout with country names on the y-axis and population values on the x-axis. The visualization reads population data from a CSV file and renders it as SVG rectangles using D3 v5’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` APIs. The chart applies a steelblue fill to the bars, with axes generated through D3’s axis components.

EEK Azubuike
92% match
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
92% match
Loading thumbnail…

Let's make a bar chart

This example displays a horizontal bar chart of population data for ten countries, using bar length to represent each value. The chart renders as SVG and is built with D3.js v5, employing `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to load data and generate axes. Rectangles are appended via data joins, with a pink fill defined in CSS. The population values are read from a CSV file and scaled by one thousand before rendering.

Yyukozome
92% match
Loading thumbnail…

Making a Bar Chart

This example presents a horizontal bar chart of population counts for eight countries, drawn as SVG rectangles. The chart uses D3 v7's `scaleLinear` and `scaleBand` to map population values and country names to positions, with axes formatted using `format` and custom tick labels. Data is loaded from a CSV file via `csv()`, and the bars are rendered by appending `rect` elements to an SVG group.

TTsen Hsieh
92% match
Loading thumbnail…

Making a Bar Chart

This bar chart displays population estimates for eight countries, loading data from a CSV file. Using D3 v5, the code applies `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis, and `d3.axisLeft` and `d3.axisBottom` to render the axes. Each country’s population, multiplied by 1000, sets the bar width, with tick labels formatted via `d3.format`. The visualization demonstrates SVG rectangle binding through `selectAll().data().enter().append()`, placing bars in a group element with specified margins.

Wwoznicak
91% 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
91% match
Loading thumbnail…

Let's make a bar chart

A bar chart displays population figures for ten countries, sorted from largest to smallest. The visualization uses D3 v5 with SVG rendering, loading data from a CSV file. The code employs `scaleLinear` for the x-axis, `scaleBand` for categorical y-axis placement, and `axisLeft`/`axisBottom` to draw tick marks. Population values are converted to numbers and multiplied by 1000. Rectangles are appended to a grouped `<g>` element, with widths scaled proportionally and fill color set via CSS to steelblue.

Ppaulboeck
90% match