Skip to main content
SimilarExport ZIP
100%

Making a Bar Chart (Outtake)

✓ Published0🌍 Public
LLinkous
Last edited Dec 26, 2019
Created on Dec 25, 2019

This example displays a bar chart of each continent's 2018 population, sourced from Wikipedia, with values rendered as horizontal bars. The visualization uses D3 v5’s `scaleLinear` and `scaleBand` to map population counts to bar widths and continent names to vertical positions, while `format` adds comma separators. The SVG output includes text labels for each continent and its population, with bars styled via the `select` and `append` API.

AI-generated description

This bar chart shows the population of each continent. The data comes from Wikipedia: List of continents by population.

MIT Licensed

Similar vizzes

Loading thumbnail…

Making a Bar Chart (Outtake)

This bar chart shows the population of each continent as horizontal bars, with text labels above each. The data is parsed from a CSV string containing population figures and world population percentages. The visualization uses d3.scaleLinear for the x-axis, d3.scaleBand for the y-axis, and d3.format for number formatting. It renders as SVG rectangles and text elements, with the chart drawn on a single SVG canvas using data from Wikipedia's list of continents by population.

CCurran Kelleher
95% match
Loading thumbnail…

Making a Bar Chart (Outtake)

This example shows a horizontal bar chart of continental populations in 2018, with each continent labeled with its total population. The chart renders as SVG rectangles sized by a `d3.scaleLinear` x-axis and positioned by a `d3.scaleBand` y-axis, with text labels added via SVG `<text>` elements. Data is parsed from an embedded CSV string using `d3.csvParse`, with population numbers cleaned via string replacement and numeric conversion. The data originates from Wikipedia’s list of continents by population.

Vvaynexie
94% match
Loading thumbnail…

Making a Bar Chart

The bar chart displays population figures for continents in 2018, with animated horizontal bars that grow to their final widths. The visualization uses `d3.scaleLinear` and `d3.scaleBand` to map population values to bar lengths and continent names to vertical positions, while `d3.transition` animates the bar growth. Numeric labels showing continent names and comma-formatted populations are positioned above each bar using `d3.format`. Data comes from a CSV string parsed with `d3.csvParse`, and the chart is rendered as SVG elements within a fixed 960×500 canvas.

NNita
89% match
Loading thumbnail…

Making a barchart

This example shows a horizontal bar chart comparing 2018 population figures across continents, with each bar labeled by continent name and formatted population value. The SVG visualization uses D3 v5 scales—`scaleLinear` for the x-axis population range and `scaleBand` for the y-axis continent categories—with padding to separate bars. Data is parsed from a CSV string in `data.js` using D3’s `csvParse`, and numeric values are cleaned of commas and percentage signs. Rects and text are bound to the data via `selectAll` and `.enter()`, with bar widths scaled against the maximum population.

SShane Carey
87% match
Loading thumbnail…

Bar charts time

This example shows the population of each continent in 2018 using horizontal bar charts, drawn as SVG rectangles with a blue fill and pink stroke. The bars are ordered by continent name and scaled linearly by population, with a total population axis label at the bottom. The code uses D3 v5 APIs including `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, and `format`, reading data from `data.csv`. The chart includes a large title text and gridlines generated by the axis tick marks.

Vvsalas20
86% match
Loading thumbnail…

Making a Bar Chart

This visualization displays the populations of thirteen countries from 2018 Wikipedia data, using horizontal bars ordered alphabetically by country name. Built with D3 v5, it loads a CSV file and renders an SVG bar chart. The chart employs `scaleLinear` for the population x-axis and `scaleBand` for the categorical y-axis, with `axisLeft` and `axisBottom` providing tick labels. Steelblue rectangles represent each country’s population, scaled by the linear axis.

AAsperge-Atomique
86% match
Loading thumbnail…

Making a Bar Chart

This example visualizes the 2018 population estimates of the ten most populous countries as horizontal bars. The chart uses D3 version 5.6, with an SVG canvas. The code employs D3's `scaleBand` and `scaleLinear` to map country names and population counts to y- and x-coordinates, respectively, while `axisLeft` renders the y-axis labels. Data is loaded asynchronously from a CSV file via `csv()` and parsed into numbers, with each bar’s length encoding the population value.

Cceltic660
85% match
Loading thumbnail…

Making a Bar Chart

This example shows a bar chart of the populations of the ten most populous countries in 2020, drawn as an SVG. The chart uses horizontally-oriented bars with a linear population scale on the x-axis and a band scale for country names on the y-axis. Built with D3 v5, it loads data from a CSV file and uses `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct and label the visualization. The bars are rendered as SVG rectangles with a steelblue fill.

GGeolffrey S Mena
85% match