Making a Bar Chart

100%

Making a Bar Chart

✓ Published0🌍 Public

Last edited Apr 8, 2019

Created on Apr 8, 2019

This visualization animates a bar chart race showing the population of the world's top 10 most populous cities from 1500 to 2019. D3.js renders the bars with SVG, using a dynamic year label and animated transitions to reorder the bars as populations shift over time. The data is loaded from a CSV file. A halo effect highlights text by temporarily stroking cloned text elements. The code uses D3's `scaleLinear`, `scaleBand`, axis helpers, and `topojson` for an inset world map, although the primary chart is the animated bar chart.

AI-generated description

This bar chart shows population of the top 10 most populous cities in the world. The data comes from the year 1500 to 2019 estimate in World's Most Populous Cities From 1570 to 2019.

MIT Licensed

Similar vizzes

Loading thumbnail…

Making a Bar Chart

This bar chart visualizes the population of the top 10 most populous countries, using data from the 2018 United Nations World Population Prospects. Built with D3 v5, it demonstrates custom axes through `scaleLinear` and `scaleBand` for positioning. However, the working code renders a single animated rectangle that shifts horizontally every two seconds via `setInterval`, while the chart's data loading and population scaling are present in the CSV parsing. The SVG rendering and steelblue fill are styled through CSS.

Iinroadings

87% match

Loading thumbnail…

Making a Bar Chart with D3.js!

This bar chart displays the population of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. The horizontal bars are rendered as SVG rectangles, with country names on the y-axis and population values on the x-axis. The visualization uses D3.js v5, employing `scaleLinear` and `scaleBand` for scaling, `axisLeft` and `axisBottom` for axes, and custom tick formatting to abbreviate large numbers with 'B' for billions. The chart includes a title and axis label, with styling applied via CSS.

Llerik03

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

86% match

Loading thumbnail…

Making a Bar Chart

This bar chart displays the populations of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. The visualization uses D3 v5 to load data from a CSV file and render SVG bars, with a linear scale for population and a band scale for country names. Custom D3 axes are configured with a tick formatter that abbreviates values (e.g., using "B" for billions), while the chart includes a title and an x-axis label.

SStephen

86% 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. The visualization uses D3 v5’s `scaleLinear` and `scaleBand` to map populations and country names to the SVG canvas, with axes drawn via `axisLeft` and `axisBottom`. The chart’s bars are rendered as SVG rectangles, styled with CSS. Population values are loaded from a local CSV file and multiplied by 1,000 before rendering.

CCL

86% 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. The visualization uses D3.js v5 with SVG rendering, employing `scaleLinear` for the x-axis and `scaleBand` for the y-axis to position bars. The code implements axes with `axisLeft` and `axisBottom`, and loads data from a CSV file via `d3.csv`. Rectangles are appended to an SVG group using a margin convention, with populations converted from thousands to absolute numbers.

Mmargaretgoode

86% 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. The visualization uses D3.js v5 with SVG rendering, employing `scaleLinear` for the x-axis and `scaleBand` for the y-axis to position bars. The code implements axes with `axisLeft` and `axisBottom`, and loads data from a CSV file via `d3.csv`. Rectangles are appended to an SVG group using a margin convention, with populations converted from thousands to absolute numbers.

Mmargaretgoode

86% 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. The visualization uses D3 v5 with an SVG rendering, employing `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the y-axis, along with `d3.axisLeft` and `d3.axisBottom` for tick marks. Data is loaded from a CSV file and processed by multiplying population values by 1000. The chart includes an accompanying video tutorial linked in the README.

Jjuanandressr97

86% match