Skip to main content
SimilarExport ZIP
100%

Let's make a bar chart

✓ Published0🌍 Public
Yyukozome
Last edited Oct 16, 2019
Created on Oct 15, 2019

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.

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!

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

Let's make a bar chart

This example shows a basic bar chart of population data for ten countries, with each country represented by a rectangle. The visualization uses D3 v5 APIs including `select`, `csv`, `scaleLinear`, and `max` to load the data, parse the population values, and append SVG rectangles to the chart. The bars are styled with a steelblue fill via CSS, though the code currently sets a fixed width and height for all rectangles, so it does not yet scale the bars to reflect the data values.

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

Let's make a bar chart

This bar chart displays population figures for ten countries, using horizontal bars sorted alphabetically by country name. The chart loads data from a CSV file and renders as an SVG, with D3 v6 methods like `select`, `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` constructing the scales and axes. Population values are parsed and multiplied by 1000 before being mapped to bar widths, with steelblue rectangles and a left margin accommodating country labels.

OOleg
94% match
Loading thumbnail…

Let's make a bar chart

This example shows a static bar chart of population data for ten countries, using SVG rectangles colored in steel blue. The visualization initially draws each bar with a fixed width of 300 pixels and a fixed height of 400 pixels, meaning the bars do not yet encode the population values visually. The code loads data from a CSV file using d3.csv, converts population strings to numbers with a unary plus operator and a multiplication factor of 1000, and then appends rectangles via d3’s data join and selection APIs. It also defines a d3.scaleLinear for the x-axis, though the scale is not yet applied to the rect dimensions.

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

Making a bar chart

This example shows a horizontal bar chart of population data for ten countries, using a linear scale for population values and a band scale for country names. The bars are rendered as SVG rectangles with a blue fill, and the chart includes left and bottom axes for reference. The code loads data from a CSV file using `d3.csv`, converts the population column to numbers, and builds the visualization with `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `d3.axisBottom`. The SVG canvas is 960 by 500 pixels, with margins applied to position the plot area.

LLonwabo11
93% match