Skip to main content
SimilarExport ZIP
100%

Making a Bar graph

✓ Published1🌍 Public
PPraneeth Varma
Last edited May 8, 2020
Created on May 8, 2020
Forked from Making a Bar graph

This example visualizes the top ten most populous countries using a bar chart built with SVG circles and D3.js. It displays population data from the UN, with each circle’s position encoding country and population size. The code uses `d3.csv` to load data, `scaleLinear` and `scalePoint` for scales, and `axisLeft` and `axisBottom` for axes. Population values are formatted with `d3.format`, and circle radii are fixed at 15 pixels.

AI-generated description

It is the data of top ten populous countries in the world, according to the report by UN

MIT Licensed

Similar vizzes

Loading thumbnail…

Making a Bar graph

This example displays the top ten most populous countries as circles, using a bar-chart-like layout where circle position encodes population on a linear scale and country on a point scale. The chart uses D3 v5’s `scaleLinear`, `scalePoint`, `axisBottom`, and `axisLeft` to construct the axes and `selectAll`/`append` to render SVG circles. Data originates from a UN report, loaded from a CSV file.

PPraneeth Varma
96% match
Loading thumbnail…

Making a Bar graph

This example shows a horizontal bar chart of the ten most populous countries, with population values from a UN report. The code loads data from a CSV file, multiplies the raw population figures by 1000, and renders bars using SVG `rect` elements. It uses `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis, and `d3.axisLeft` and `d3.axisBottom` for the axes, with data loaded via `d3.csv`.

PPraneeth Varma
93% match
Loading thumbnail…

Making a Bar graph

This horizontal bar chart displays the ten most populous countries using data from a UN report. D3 version 5 loads the CSV and scales the population values by a thousand. The visualization uses `scaleLinear` for population, `scaleBand` for country names, and `axisBottom` with a custom tick formatter to convert units like G to B. SVG rectangles are positioned and sized according to the scales, with axis labels and a title styled via CSS.

PPraneeth Varma
92% match
Loading thumbnail…

Making a Bar graph

This horizontal bar chart displays the ten most populous countries using data from a UN report. D3 version 5 loads the CSV and scales the population values by a thousand. The visualization uses `scaleLinear` for population, `scaleBand` for country names, and `axisBottom` with a custom tick formatter to convert units like G to B. SVG rectangles are positioned and sized according to the scales, with axis labels and a title styled via CSS.

PPraneeth Varma
92% match
Loading thumbnail…

Making a Bar graph

This horizontal bar chart displays the ten most populous countries using data from a UN report. D3 version 5 loads the CSV and scales the population values by a thousand. The visualization uses `scaleLinear` for population, `scaleBand` for country names, and `axisBottom` with a custom tick formatter to convert units like G to B. SVG rectangles are positioned and sized according to the scales, with axis labels and a title styled via CSS.

PPraneeth Varma
92% match
Loading thumbnail…

Making a Bar graph

This bar chart displays the ten most populous countries in the world according to UN data, with horizontal bars ranked by population. The visualization uses D3 v5’s scaleLinear, scaleBand, axisBottom, and axisLeft to map population values to bar lengths and country names to rows. Population figures are formatted using the d3.format function with a custom replace for billions. The chart draws SVG rectangles with a steelblue fill, includes gridlines via tickSize, and labels the x-axis “Population.”

PPraneeth Varma
91% match
Loading thumbnail…

Making a Bar Chart

This example shows the populations of the top 10 most populous countries from a 2018 United Nations estimate, displayed as circles on an SVG bar chart with customized axes. The code uses D3 v5’s `csv` loader, `scaleLinear`, and `scalePoint` to map data values, while `axisBottom` and `axisLeft` apply tick formatting. Axis grid lines and labels are styled via CSS, and the chart includes a title. The accompanying video walks through building the visualization step by step.

AAditya-me
91% match
Loading thumbnail…

Making a Bar Chart

This bar chart displays the population of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. Built with D3 v5 and rendered as SVG, the example uses `d3.csv` to load the data, `scaleLinear` and `scaleBand` for scales, and `axisLeft` and `axisBottom` for customizable axes, with bars styled via CSS.

Aadvaitkulkarni08
91% match