Skip to main content
SimilarExport ZIP
100%

First Bar Chart

✓ Published2🌍 Public
Bbukbukbukka
Last edited Nov 30, 2019
Created on Nov 29, 2019

This example displays a horizontal bar chart of food sales, using D3.js (v5) with SVG rendering. The chart maps food types to a band scale and sales numbers to a linear scale, with axes generated via `axisLeft` and `axisBottom`. Population data for the top 10 countries is sourced from the 2017 World Population Prospects, though the code loads `moreData.csv` with food sales figures. Bars are drawn as SVG rectangles with steelblue fill, and the layout includes explicit margins and padding.

AI-generated description

This bar chart shows population of the top 10 most populous countries. The data comes from the year 2018 estimate in World Population Prospects 2017.

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

Making a Bar Chart

This example shows a horizontal bar chart for the top 10 most populous countries, using population estimates from the 2018 United Nations World Population Prospects. It renders as an SVG, with bars drawn as rectangles whose lengths encode population values. The code uses D3 v3 APIs such as `d3.csv` to load the data, `d3.scale.linear()` and `d3.scale.ordinal()` for the axes, and `d3.svg.axis()` to draw them. A dropdown menu lets users select a cereal brand, triggering an animated transition that updates the bar heights and rescales the y-axis domain.

Vvasukipriyam
82% match
Loading thumbnail…

Making a Bar Chart

This example shows a horizontal bar chart for the top 10 most populous countries, using population estimates from the 2018 United Nations World Population Prospects. It renders as an SVG, with bars drawn as rectangles whose lengths encode population values. The code uses D3 v3 APIs such as `d3.csv` to load the data, `d3.scale.linear()` and `d3.scale.ordinal()` for the axes, and `d3.svg.axis()` to draw them. A dropdown menu lets users select a cereal brand, triggering an animated transition that updates the bar heights and rescales the y-axis domain.

Vvasukipriyam
82% match
Loading thumbnail…

First

A bar chart displays population figures for ten countries, with countries listed vertically and population encoded by horizontal bar length. The visualization uses D3 v5’s `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to load data, map values, and render axes. Orange rectangles are drawn in an SVG container with margins, positioned via the band scale’s y-coordinates and width from the linear scale.

Bburakbaskaya
82% match
Loading thumbnail…

Bar Display

This bar chart displays the top 10 most consumed foods by population, using horizontal bars sorted by value. The data comes from a CSV file with population estimates. The visualization uses d3.scaleLinear and d3.scaleBand to map values and categories, with customized axes via d3.axisBottom and d3.axisLeft. SVG rendering is handled through D3 selections, and tick labels are formatted using d3.format with a custom suffix replacement.

Ppengli1760
82% match
Loading thumbnail…

Making a Bar Chart

This example demonstrates how to build a simple, horizontal bar chart using D3 v5 and SVG. It displays population data for ten countries, with bars sized proportionally to each nation’s population in thousands. The code uses `d3.csv` to load the data, then applies `scaleLinear` for the x-axis and `scaleBand` for the y-axis to position and size the rectangles. The chart is rendered entirely with SVG `<rect>` elements, with the population values converted to numbers before scaling.

Jjerz-0788
82% match
Loading thumbnail…

d3 Bar Chart

This example renders a horizontal bar chart of population data for the ten most populous countries, sourced from a CSV file. Built with D3.js v5.7.0, it uses `scaleLinear` for the numeric x-axis and `scaleBand` for the categorical y-axis, drawing steel-blue `rect` elements within an SVG canvas. The chart displays axes via `axisLeft` and `axisBottom`, and populates bars by joining data to SVG groups.

JJohnPaulPagelerJr
82% match