Making a bar chart

100%

Making a bar chart

✓ Published1🌍 Public

Last edited Sep 30, 2020

Created on Sep 29, 2020

This example shows the population of ten countries in 2018, ordered by rank in a horizontal bar chart using SVG. The chart loads data from a CSV file and scales the bars with d3.scaleLinear and d3.scaleBand, while rendering axes via d3.axisLeft and d3.axisBottom. Population values are multiplied by 1,000 in the data-loading step, and the bars are styled with steelblue fill. Data originates from the United Nations.

AI-generated description

This shows population 2018,

united nations (include link)

MIT Licensed

Similar vizzes

Loading thumbnail…

Making a Bar Chart

This example displays the population of the ten most populous countries, based on 2018 United Nations estimates from World Population Prospects 2017, as horizontal bars. The chart uses D3 v5 with `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis, and `d3.axisLeft` and `d3.axisBottom` for tick rendering. Data is loaded from a CSV via `d3.csv`, and each bar’s width is scaled proportionally to population values, multiplied by 1000. The SVG output is styled with steelblue rectangles.

RReshma R

93% match

Loading thumbnail…

Making a Bar Chart

This example presents a horizontal bar chart of the population of the ten most populous countries, using 2018 estimates from the United Nations World Population Prospects. The visualization encodes population with bar length and country names along the y-axis, rendered as SVG rectangles. Built with d3.v5, it loads data from a CSV file and uses d3.scaleLinear and d3.scaleBand for axes, with d3.axisLeft and d3.axisBottom for labels. The code applies a steelblue fill to the bars via CSS.

Jjacobs-splunk

92% match

Loading thumbnail…

Making a Bar Chart

This example presents a horizontal bar chart showing the population of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects 2017. It uses D3 v5's `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` APIs to map population values and country names to SVG rectangles. Data is loaded from a CSV file and processed by multiplying the population values by 1000. The chart renders entirely as SVG, with bars styled in steelblue, and the code illustrates a basic data-join and margin setup for reusable visualization.

Vvoiletymr

92% match

Loading thumbnail…

Making a Bar Chart

This example shows the population of the ten most populous countries in 2018, based on United Nations estimates. It uses d3.csv to load the data, d3.scaleLinear for the horizontal axis, and d3.scaleBand for vertical country categories. The bars are rendered as SVG rectangles, with d3.axisLeft and d3.axisBottom creating the axes. Population values are multiplied by 1,000 before being drawn, and the chart is laid out with fixed margins inside a 960-by-500 SVG.

Jjcmleon22

92% match

Loading thumbnail…

Making a Bar Chart

This example shows the populations of the ten most populous countries in 2018, based on United Nations data, as horizontal bars ordered by rank. It demonstrates custom D3 axes with a linear x-scale for population and a band y-scale for country names. The code uses d3.csv to load the data, d3.scaleLinear and d3.scaleBand for scaling, and d3.axisLeft and d3.axisBottom to render the axes within an SVG container.

LLukas Schießer

92% match

Loading thumbnail…

Making a Bar Chart

This example shows a horizontal bar chart of the population for the ten most populous countries, using 2018 estimates from the World Population Prospects 2017. The chart is rendered as an SVG, with bars ordered by country name and scaled linearly by population. The code uses D3 v5 modules including `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to load data, compute scales, and draw axes. Population values are multiplied by 1000 to reflect actual counts, and bars are styled with a steelblue fill.

CCaleb Miller

92% match

Loading thumbnail…

Making a Bar Chart

This example visualizes the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects 2017. A static SVG bar chart displays countries along the vertical axis and population values along the horizontal axis, with steelblue bars sized by `d3.scaleLinear` and `d3.scaleBand`. The code loads data from a CSV file via `d3.csv`, converts population figures, and renders axes with `d3.axisLeft` and `d3.axisBottom`.

Jjmarcrum3

92% match

Loading thumbnail…

Making a Bar Chart

This example displays a horizontal bar chart of the populations of the ten most populous countries, based on 2018 United Nations estimates. The chart uses D3 v7 with SVG rendering, relying on `scaleLinear` for the x-axis and `scaleBand` for the categorical y-axis. Data is loaded from a CSV file with `csv()`, and axes are drawn via `axisBottom` and `axisLeft`. Bars appear in steelblue, with dimensions mapped from population values and country names.

Mmrdeevid

92% match