Skip to main content
SimilarExport ZIP
100%

Let's make a bar graph

✓ Published2🌍 Public
Ssyedkabir268
Last edited Dec 27, 2020
Created on Dec 26, 2020

This example shows a horizontal bar graph of population data for ten countries, with bar lengths scaled proportionally to each country’s population. The visualization is built with D3.js (version 5) using `d3.csv` to load the data, `scaleLinear` for the x-axis, and `scaleBand` for the y-axis categories. Rectangles are appended to an SVG canvas, with each bar’s width set by the linear scale and height by the band scale’s bandwidth. The data is loaded from a CSV file and multiplied by 1000 to convert values to actual population counts.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

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

Making a bar chart

This example shows a horizontal bar chart of population data for ten countries, using scaled bar widths to represent each country’s population in thousands. The visualization is built with D3 v5, using `d3.csv` to load the data, `d3.scaleLinear` for the x-axis, and `d3.scaleBand` for the y-axis categories. SVG rectangles are appended to a grouped `<g>` element with margins, and the population values are parsed and multiplied by 1000 before rendering. The chart displays the data directly without axes or labels, focusing on the bar lengths.

DDmytro Tyshchenko
92% match
Loading thumbnail…

Let's make a bar chart!

A horizontal bar chart displays population figures for ten countries, using bar length to represent population in thousands. Built with D3 v5, the visualization loads CSV data via `d3.csv` and applies `d3.scaleLinear` for the x-axis and `d3.scaleBand` for categorical y-axis spacing. SVG rectangles are appended and positioned through D3 data joins, with margins calculated from the SVG's width and height attributes. The code demonstrates fundamental scale and selection patterns for basic bar chart construction.

CChromosin13
92% match
Loading thumbnail…

Let's Make a Bar Chart

This example demonstrates a horizontal bar chart of population data for the ten most populous countries, using SVG rectangles scaled proportionally to each country’s population. The visualization imports `csv`, `scaleLinear`, and `scaleBand` from d3 to parse the data and map values to width and band positions. The code loads data.csv, converts population numbers by multiplying by 1000, and appends rectangles to the SVG canvas with widths driven by the linear scale.

BBlakeMcMurray
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…

Making a bar chart

This example demonstrates a horizontal bar chart visualizing population data for ten countries, with each bar’s length proportional to population size and country names listed on the y-axis. The visualization uses D3 v5’s `csv` loader to import data, `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisLeft`/`axisBottom` to render tick marks. The SVG-based rendering applies a steelblue fill to rectangles, with data values converted from thousands to absolute numbers.

Rrychenf1
90% match
Loading thumbnail…

making bar chart

This bar chart displays population data for ten countries, with bar lengths corresponding to each nation’s population in thousands. The visualization uses D3 v5 to load CSV data, scale linearly with d3.scaleLinear and d3.max, and bind rectangles to the SVG. Bars are positioned using d3.scaleBand, though axis creation is incomplete. The data source is a local CSV file, rendered as SVG elements.

Ttayyabanisar
90% match
Loading thumbnail…

making bar chart

This bar chart displays population data for ten countries, with bar lengths corresponding to each nation’s population in thousands. The visualization uses D3 v5 to load CSV data, scale linearly with d3.scaleLinear and d3.max, and bind rectangles to the SVG. Bars are positioned using d3.scaleBand, though axis creation is incomplete. The data source is a local CSV file, rendered as SVG elements.

Ttayyabanisar
90% match