Skip to main content
SimilarExport ZIP
100%

Making a Bar Chart

✓ Published2🌍 Public
LLukas Schießer
Last edited Mar 14, 2020
Created on Mar 14, 2020
Forked from 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.

AI-generated description

This bar chart shows population of the top 10 most populous countries. The data comes from the year 2018 estimate in United Nations: World Population Prospects 2017. It also demonstrates customization of D3 axes.

MIT Licensed

Similar vizzes

Loading thumbnail…

Making a Bar Chart

This example shows a bar chart of the ten most populous countries using 2018 estimates from the United Nations World Population Prospects. A linear scale positions the bars horizontally, while a band scale orders the country names vertically, with D3 axes customized to format population values and draw gridlines. The code uses `d3.csv`, `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` from D3 v5, rendering the chart as SVG elements.

Llycai05
95% 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
95% match
Loading thumbnail…

Making a Bar Chart

This example visualizes the 2018 populations of the top 10 most populous countries from United Nations data, presented as a horizontal bar chart. The chart ranks countries by population, with a steelblue fill for each bar and customized D3 axes that remove domain lines and use a tick format converting G to B (e.g., billions). Using d3.csv, d3.scaleLinear, and d3.scaleBand, the code maps population values to pixel widths and country names to vertical bands. The SVG rendering, with margins and axis labels, demonstrates how to structure axes in D3 v5.

Ssuyunlan
94% match
Loading thumbnail…

Making a Bar Chart

This example visualizes the 2018 populations of the top 10 most populous countries from United Nations data, presented as a horizontal bar chart. The chart ranks countries by population, with a steelblue fill for each bar and customized D3 axes that remove domain lines and use a tick format converting G to B (e.g., billions). Using d3.csv, d3.scaleLinear, and d3.scaleBand, the code maps population values to pixel widths and country names to vertical bands. The SVG rendering, with margins and axis labels, demonstrates how to structure axes in D3 v5.

Ssuyunlan
94% match
Loading thumbnail…

Making a Bar Chart

This bar chart displays the populations of the ten most populous countries based on 2018 United Nations estimates, with country names on the y-axis and population values on the x-axis. Built with D3 v5, it uses `d3.scaleLinear` and `d3.scaleBand` to map data, `d3.axisLeft` and `d3.axisBottom` for customized axes, and appends SVG rectangles for bars. The data is loaded from a CSV file and rendered as an SVG graphic.

Ccedriccaijo
94% match
Loading thumbnail…

Making a Bar Chart

This bar chart displays the top 10 most populous countries using 2018 United Nations population estimates. The visualization orders countries along a vertical band scale with horizontal bars representing population values, using a linear scale. Customized axes include abbreviated tick labels (e.g., “B” for billions) and grid lines. The code uses d3.csv, scaleLinear, scaleBand, axisBottom, and axisLeft within D3 v5, rendering as SVG with styling from an external stylesheet.

Zztawil
94% match
Loading thumbnail…

Making a Bar Chart

This bar chart visualizes the populations of the top 10 most populous countries using 2018 United Nations data. It uses d3.scaleLinear for the x-axis population scale, d3.scaleBand for the categorical y-axis, and renders as SVG. The code loads data from a CSV via d3.csv, converts population values to thousands, and appends axis components with d3.axisLeft and d3.axisBottom to a transformed group.

HHeschmat
94% match
Loading thumbnail…

Making a Bar Chart

This example displays the populations of the ten most populous countries in 2018, ordered along a vertical bar chart. It uses D3 v5’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to map population values to horizontal bar widths and country names to vertical bands. The data, sourced from the United Nations’ 2017 World Population Prospects, is loaded via `csv` and rendered as SVG rectangles. The code explicitly multiplies population figures by 1,000 to reflect actual counts.

MMounikaBeerelly
94% match