Skip to main content
SimilarExport ZIP
100%

barGraph

✓ Published0🌍 Public
MMayank Kumar
Last edited Sep 24, 2023
Created on Sep 24, 2023
Forked from PieChar

This visualization displays the 2020 populations of countries as horizontal bars, sorted by country name. Using React for rendering, it maps each country to a rectangle within an SVG canvas, with bar lengths proportional to population values. The code loads UN population data from a CSV file via `d3.csv`, and uses D3's `scaleBand` and `scaleLinear` to compute the y-axis positions and x-axis scaling, respectively. A loading state shows "Loading..." text until the data arrives.

AI-generated description

A program that loads in some data about CSS named colors using D3 utilities, and uses React to render the data as a radial burst!

MIT Licensed

Similar vizzes

Loading thumbnail…

BarChart

This bar chart displays the 2020 populations of the ten most populous countries, with country names on the y-axis and population values on the x-axis. Built with React and D3 v7, it uses `d3.csv` to load data from a GitHub-hosted UN Population dataset and `scaleBand` and `scaleLinear` for positioning. The SVG renders gridlines, tick labels, and rectangles, while a small message function reports the dataset’s file size, row count, and column count.

Mmbooch22
90% match
Loading thumbnail…

Refactored Bar Chart

This chart displays the 2020 populations of ten countries using horizontal bars, with country names on the y-axis and an x-axis for population values from the UN Population 2019 dataset. The D3 v5 scales `scaleBand` and `scaleLinear` compute the layout, while React components for axes and marks map the data to SVG `<rect>` elements. Population values are parsed from the CSV into numbers via `useData`, and the bars are rendered within an SVG canvas.

Yyejichun@naver.com
89% match
Loading thumbnail…

bar chart

This bar chart displays the top 10 countries by 2020 population, with horizontal bars encoded by length and ordered by country name. The visualization uses React to manage state and render SVG elements, while D3 v7 handles data loading via `csv()` and scales through `scaleBand` and `scaleLinear`. Population data comes from a UN gist CSV file. Loading text appears until data arrives, and the chart currently lacks axis labels or text annotations.

MMalcolm Mead
88% match
Loading thumbnail…

Stylised Bar Chart

This stylized bar chart displays the populations of the ten most populous countries for 2020, using horizontal bars sorted by country name. The visualization pairs D3 v7 utilities for data loading and scaling with React components for rendering SVG elements. D3’s `csv` fetches the UN population data, while `scaleBand` and `scaleLinear` position the bars on the y- and x-axes. React manages the loading state, displaying “Loading...” until the data arrives, then renders each bar as an SVG `<rect>`.

Bbsolomon103
88% match
Loading thumbnail…

Bar chart

This bar chart displays the populations of ten countries in 2020, sorted by country name. Using React and D3 v5, it renders SVG rectangles via a scaleBand for the categorical y-axis and a scaleLinear for the numerical x-axis. The data loads from a CSV via d3.csv. Axes are custom components, and hover tooltips use native SVG `<title>` elements with formatted population values.

TTakuya Kitazawa
88% match
Loading thumbnail…

Bar Chart

This bar chart displays the populations of ten countries as horizontal bars, ordered alphabetically by country name on the y-axis, with bar length proportional to population values from the UN Population 2019 dataset. The visualization uses React with D3 v5 utilities, including `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, rendering SVG rectangles. Data is loaded asynchronously via `d3.csv` and filtered to the top ten rows, with bars drawn without labels or gridlines.

MMATTE-blz
88% match
Loading thumbnail…

Horizontal Bar Graph

This horizontal bar graph displays the 10 most populous countries in 2020, ranked by population size. Built with React and D3 v5, the visualization uses `scaleBand` and `scaleLinear` to map country names and population values to SVG rectangles. The data comes from a CSV file of UN Population 2019 estimates, loaded via D3's `csv` function. Each bar includes a tooltip showing the formatted population value, with axes rendered through custom `AxisBottom` and `AxisLeft` components using D3 tick formatting.

KKevin J Crespin
88% match
Loading thumbnail…

Bar graphs

This bar chart displays the population of 20 countries for 2020, with countries on the y-axis and population on the x-axis. Built with React and D3 v5, the visualization uses `scaleBand` and `scaleLinear` to map data to SVG rectangles. The code loads CSV data from a gist, formats population values using D3's `format` function, and includes custom axis components that render red tick lines. The chart title reads “POPULATION-2020,” and hover tooltips show formatted population values.

Cchsaisriharsha@gmail.com
88% match