Making a barchart

100%

Making a barchart

✓ Published0🌍 Public

Last edited Aug 30, 2018

Created on Aug 30, 2018

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.

AI-generated description

MIT Licensed

Similar vizzes

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

93% match

Loading thumbnail…

Making a Barchart

This example shows the population of the world’s most populous countries as horizontal bars, sorted by country name. Using D3 v5, it loads a CSV dataset and renders an SVG bar chart with linear and band scales. The code imports specific D3 modules—`select`, `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`—to create axes and position rectangles. Population values are converted from thousands to absolute numbers before being mapped to bar widths.

CCarloGato

89% match

Loading thumbnail…

Making a barchart

This example shows a horizontal bar chart of population figures for the world’s most populous countries, using a CSV data source loaded with d3.csv. The visualization maps each country’s population to bar width via a d3.scaleLinear domain and a d3.scaleBand for categorical country labels, with axes generated by d3.axisLeft and d3.axisBottom. The chart renders as SVG inside a React application, with bars styled steelBlue and formatted using D3 v5.

Bbertieip

88% match

Loading thumbnail…

Making a bar chart

A D3.js bar chart displays population figures for the world’s most populous countries, loading values from a CSV file and preparing them for rendering inside an SVG canvas. The code uses the `select` API to target the SVG element and the `csv` function to asynchronously fetch and parse the data, converting the population strings to numbers. The SVG viewport is set to 960 by 500 pixels, though the example currently logs the parsed data to the console without yet drawing bars or axes.

EEllen Cubbin

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

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

86% match

Loading thumbnail…

Making a Bar Chart

This horizontal bar chart displays the population of the world's most populous countries, using a data.csv file with country names and raw population figures. The chart renders as SVG elements, with each country represented by a rectangular bar scaled by a linear population axis. The visualization employs D3's `scaleLinear` and `scaleBand` for scaling, `axisLeft` and `axisBottom` to draw the axes, and a custom tick formatter that abbreviates large numbers. The code reads the CSV asynchronously, multiplies the population values by 1000, and appends the bars to the SVG group.

Eegrebing

86% match

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

86% match