Skip to main content
SimilarExport ZIP
100%

D3 PROJECT

✓ Published1🌍 Public
SShabani Muswamba
Last edited Apr 18, 2020
Created on Apr 17, 2020
Forked from HTML Starter

This bar chart displays the population of ten countries, from China at over 1.4 billion down to Mexico at 130 million. Built with React and D3 v5, it renders as an SVG using `scaleLinear` for the x-axis and `scaleBand` for the y-axis, with axes added via `axisBottom` and `axisLeft`. Population data is loaded from a CSV file and converted to numbers before rendering, with bars colored green and a styled path for the axes.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 Bar Chart - Axes

This bar chart displays the populations of the world’s ten most populous countries, from China down to Mexico, with horizontal bars sized by population. The visualization uses D3 v5’s `scaleLinear` and `scaleBand` to map data values to positions, and `axisLeft` and `axisBottom` for the country and population axes. It loads data from a CSV file, converts population figures, and animates bar growth via `transition`. The chart is rendered as SVG within a React project, with styling controlled by an external stylesheet.

Ssathishkottravel
90% match
Loading thumbnail…

Making Bar Chart!

This bar chart displays population counts for the ten most populous countries, using horizontal bars ranked from China down to Mexico. The visualization is built with React and rendered as SVG, using d3.scaleLinear for the x-axis population scale and d3.scaleBand for the y-axis country categories. Data is loaded asynchronously via d3.csv from data.csv, with population values multiplied by 1000. The chart appends rectangles to the SVG, with each bar’s width proportional to its population and height set by the band scale’s bandwidth.

JJean
90% match
Loading thumbnail…

Bar chart

A bar chart displays the populations of ten countries, from China at the top down to Mexico, with each bar’s length proportional to its value in thousands. The visualization uses D3 v5’s `scaleLinear` and `scaleBand` to map population and country names, respectively, while rendering SVG rectangles via manual selection and `append`. Axes are generated with `axisLeft` and `axisBottom`, and the data is loaded asynchronously from a CSV file using `csv`. The chart is embedded in a React-compatible HTML page with D3’s minimal API.

DDarpan313
89% match
Loading thumbnail…

Untitled

This example shows a horizontal bar chart of population by country, with ten nations ranked from China’s largest population down to Mexico. The chart uses D3 v6 modules including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to map population values to bar widths and country names to vertical positions. The SVG renders with a steel-blue fill for each bar, and the data is loaded from a local CSV file where population values are multiplied by 1000. Margins are applied on all sides to position the axes and bars within the 960 by 500 pixel viewport.

RReekMajumder
88% match
Loading thumbnail…

Untitled

This example shows a horizontal bar chart of population by country, with ten nations ranked from China’s largest population down to Mexico. The chart uses D3 v6 modules including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to map population values to bar widths and country names to vertical positions. The SVG renders with a steel-blue fill for each bar, and the data is loaded from a local CSV file where population values are multiplied by 1000. Margins are applied on all sides to position the axes and bars within the 960 by 500 pixel viewport.

RReekMajumder
88% match
Loading thumbnail…

D3.js

This visualization displays a bar chart of the top 10 most populous countries, with population values scaled linearly along the x-axis and country names ordered along a band scale on the y-axis. The code uses d3.csv to load population data, d3.scaleLinear and d3.scaleBand for scaling, and d3.axisLeft and d3.axisBottom to render axes with custom tick formatting. The chart is rendered as SVG within a React framework, with bars colored green and a title labeling the dataset.

WWholebitmedia
88% match
Loading thumbnail…

Barchart with D3.js

This bar chart displays the populations of ten countries, from China’s 1.4 billion to Mexico’s 131 million. The data, loaded from a CSV file, is rendered as horizontal bars using D3.js v5. The visualization uses `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis, and `d3.axisLeft` and `d3.axisBottom` to draw the axes. Each bar’s width is proportional to its population value, with steel-blue rectangles drawn in an SVG container.

Wwieswies
88% match
Loading thumbnail…

Making a Bar Chart

This horizontal bar chart displays the population of ten countries, ranging from China at the top with over 1.4 billion people to Mexico at the bottom with approximately 130 million. It uses D3's `scaleLinear` and `scaleBand` to map population values and country names to the SVG canvas, with `axisLeft` and `axisBottom` generating the axes. The code loads data from a CSV file via `csv` and renders steelblue rectangles, with an explicit `+d.population * 1000` conversion to reflect full population figures.

CChangbeom Shim
88% match