Skip to main content
SimilarExport ZIP
100%

Making a Bar Chart

✓ Published1🌍 Public
JJaohar Kehinde Oseni
Last edited Apr 29, 2020
Created on Apr 29, 2020
Forked from Making a Bar Chart

This example displays the top 10 most populous countries as horizontal bars, comparing 2018 population estimates from the United Nations. The code uses D3 v5 with SVG rendering, relying on `d3.csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to build the chart. Axes are customized by removing domain lines and formatting tick labels (e.g., converting “G” to “B” for billions), with a labeled x-axis and title. Population values are multiplied by 1000 to reflect the original UN data scale.

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 bar chart displays the top 10 most populous countries using 2018 population estimates from the United Nations World Population Prospects. The D3 v5 code loads CSV data, converts population values to absolute numbers, and renders an SVG with linear and band scales. It customizes axes by removing domain lines, applying a tick format that abbreviates large numbers (e.g., ’G’ to ’B’), and adding an axis label. The visualization uses `d3.csv`, `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, and `format`.

JJaohar Kehinde Oseni
96% match
Loading thumbnail…

Making a Bar Chart

This bar chart displays the populations of the top 10 most populous countries from a 2018 United Nations estimate. It uses D3 v5 to load CSV data, scale to a linear x-axis and banded y-axis, and render SVG rectangles for bars. The code specifically leverages `d3.csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`, with population values multiplied by 1000 for display.

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

Making a Bar Chart

This example shows a horizontal bar chart of the top 10 most populous countries, using 2018 population estimates from the United Nations World Population Prospects. The chart uses an SVG rendered with D3 v5, importing `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` from the `d3` module. Population values from the CSV are converted to numbers and multiplied by 1000 before being mapped to bar widths. The y-axis positions country names, while the x-axis scales population linearly, with steelblue bars and labeled axes.

YYanxiangZhu
95% match
Loading thumbnail…

Making a Bar Chart

This example displays the top 10 most populous countries from 2018 United Nations estimates as a horizontal bar chart. It customizes both axes, removing the y-axis domain and tick lines and formatting x-axis labels with d3.format to abbreviate population values, replacing “G” with “B” for billions. The chart uses d3.scaleLinear and d3.scaleBand to map populations and country names, with data loaded from a CSV file via d3.csv. The SVG is rendered using D3 v5, with steelblue bars and a titled, labeled layout.

Ffarmanali0303
95% match
Loading thumbnail…

Making a Bar Chart

This bar chart displays the top 10 most populous countries based on United Nations 2017 population estimates, converted from thousands to absolute counts. It uses D3 v5 with SVG rendering, employing `scaleLinear` for population values and `scaleBand` for country categories. The axes are customized via `axisLeft` and `axisBottom`, with tick labels formatted using `format('.3s')` to show billions (e.g., "1.42B"). The chart includes a title, x-axis label, and light green bars, with data loaded from a CSV file using `d3.csv`.

Ccode-with-garvit
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
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
95% match