Making a Bar Chart

100%

Making a Bar Chart

✓ Published1🌍 Public

Last edited Feb 11, 2021

Created on Feb 11, 2021

Forked from Shapes and Colors with SVG and CSS

This example shows a horizontal bar chart of country populations, ordered from largest (China) to smallest (Mexico). Using d3.csv to load data.csv, d3.scaleLinear and d3.scaleBand map population values and country names to SVG rectangles, with d3.axisLeft and d3.axisBottom rendering labeled axes. The chart demonstrates reusable margin conventions and data-join patterns for creating bar charts with SVG.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

Making a Bar Chart

This example shows a horizontal bar chart of population by country, using a CSV dataset ordered from China to Mexico. D3 v5 functions `csv`, `scaleLinear`, and `scaleBand` map population values to bar widths and country names to row heights, while `axisLeft` and `axisBottom` render the axes. The SVG renders steel-blue rectangles with D3’s `selectAll` and data joins, with a fixed 960×500 viewport and margins defining the inner plot area.

PPedro Ernesto Tramontina

93% match

Loading thumbnail…

Making a Bar Chart

This example shows a horizontal bar chart of country populations, with bars scaled to population size and country names on the y-axis. Using d3.csv to load data.csv, it parses population values as numbers, then applies d3.scaleLinear and d3.scaleBand for positioning. The chart renders in SVG, with d3.axisLeft and d3.axisBottom generating labeled axes and tick formatting via d3.format('.3s') for compact labels. Rect elements are appended and sized using the scales, with steelblue fill from CSS.

BBraja Gopal Das

92% match

Loading thumbnail…

Making a Bar Chart

A horizontal bar chart displays population data for ten countries, from China to Mexico, using a linear scale for population counts and a band scale for country names. The visualization includes axes generated with d3.axisLeft and d3.axisBottom, with margins applied to the SVG rendering. Data is loaded from a CSV file using d3.csv, and the population values are parsed and multiplied by 1,000 before being drawn as SVG rectangles with d3.scaleLinear and d3.scaleBand.

OOla Skoczylas

91% match

Loading thumbnail…

Making a bar chart

This example shows a horizontal bar chart of population by country, ranking the ten most populous nations from China to Mexico. It uses d3.csv to load the data, d3.scaleLinear for the x-axis population scale, and d3.scaleBand for the categorical y-axis. The chart renders as SVG rectangles with steelblue fill, with d3.axisLeft and d3.axisBottom providing labeled scales. Margins and a group transform position the plot, while the population values are multiplied by 1000 to reflect full counts.

Ffaquora

91% match

Loading thumbnail…

Making a bar Chart

This example shows a horizontal bar chart of country populations, ranking ten nations from China to Mexico using data loaded from a CSV file. The visualization uses D3 v5’s `scaleLinear` for the x-axis, `scaleBand` for the categorical y-axis, and `axisLeft` and `axisBottom` to render axes as SVG. Population values are read as strings and multiplied by 1000 before being mapped to bar widths. Bars are appended as `rect` elements within a translated group, styled with steelblue fills via external CSS.

Ppengpenghub

91% match

Loading thumbnail…

Making a Bar Chart

A horizontal bar chart displays population figures for ten countries, sorted in descending order from China to Mexico. The bars use a linear scale for population values and a band scale for country names, with axes labeled accordingly. Built with D3 v5, the visualization loads data from a CSV file, converts population strings to numbers, and renders the chart as SVG rectangles. The code employs d3.csv, d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom to construct the visualization.

Nnobuyamayoshi

91% match

Loading thumbnail…

Making a bar chart

This example shows a horizontal bar chart of population by country, using SVG rectangles to encode values. The chart arranges countries along a band scale (d3.scaleBand) and maps populations to a linear scale (d3.scaleLinear), with axes generated via d3.axisLeft and d3.axisBottom. Data is loaded from a CSV using d3.csv, and the code explicitly sets dimensions and margins. The visualization demonstrates reusable D3 v5 API patterns such as select, max, and scaleBand’s padding, with styling applied through CSS.

Kkatrinrodkina

91% match

Loading thumbnail…

Making a Bar Chart

This example shows a horizontal bar chart of population by country, with bars scaled linearly along the x-axis and sorted alphabetically along the y-axis. The code uses d3.csv to load the data, d3.scaleLinear and d3.scaleBand to compute positions, and d3.axisLeft and d3.axisBottom to render the axes via SVG. The bars are appended as SVG rect elements with a steelblue fill.

Bbattlescarredshogun

90% match