Making a Bar Chart (Outtake)

100%

Making a Bar Chart (Outtake)

✓ Published0🌍 Public

Last edited Dec 26, 2019

Created on Dec 26, 2019

Forked from 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.

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 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.

LLinkous

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

90% 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

88% 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

87% match

Loading thumbnail…

Making a barchart

This example shows a static bar chart of world population by continent for 2018, with values in absolute numbers and percentages of the world total. The chart renders as an SVG using D3 v5, reading inline CSV data parsed with `d3.csvParse`. The code maps each row, stripping commas from population figures and converting them to numbers, then logs the parsed array to the console. The visualization relies on D3 selections to access the SVG dimensions, though no axes or bars are explicitly drawn in the provided code.

SShane Carey

86% match

Loading thumbnail…

Making a Bar Chart

This example shows a horizontal bar chart of country populations using SVG rendering. The visualization maps population values to bar widths and country names to vertical bands, with axes labeled via `d3.axisLeft` and `d3.axisBottom`. The code loads data from a CSV file using `d3.csv`, scales the population figures, and appends rectangular elements with `d3.selectAll` and `.enter()`. The chart uses `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the y-axis, with the bars styled in steel blue via CSS.

Nnilimi

86% match

Loading thumbnail…

Making a Bar Chart

This example shows a horizontal bar chart of country populations, using a bar’s length to encode each country’s population value and a band scale for country names along the y-axis. The chart is rendered as SVG with D3 v5, loading data from a CSV file via `d3.csv` and scaling the population values by 1000. Axes are created with `d3.axisLeft` and `d3.axisBottom`, while linear and band scales (`d3.scaleLinear`, `d3.scaleBand`) position the bars. The bars use a fixed steelblue fill, with margins applied to the plotting area.

DDan Henri

85% match