Skip to main content
SimilarExport ZIP
100%

Bar chart

✓ Published0🌍 Public
CCees Klap
Last edited Mar 2, 2021
Created on Mar 1, 2021

This bar chart displays the populations of ten countries in 2020, sourced from UN population data, using horizontal bars where length encodes magnitude and a title tooltip reveals exact values. Built with React and D3 v5, it uses `scaleBand` for categorical y-axis positioning and `scaleLinear` for quantitative x-axis scaling, with axes rendered as SVG elements and a `.replace('G', 'B')` format to show billions.

AI-generated description

making of a bar chart

MIT Licensed

Similar vizzes

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
94% match
Loading thumbnail…

Bar Chart v2

A vertical bar chart displays the populations of ten countries in 2020, sourced from a UN population CSV loaded with `d3.csv`. The x-axis labels are rotated 30 degrees to accommodate country names, and the y-axis uses a custom tick formatter that abbreviates billions as "B". Built with React and SVG, the chart uses `d3.scaleBand` for the categorical axis and `d3.scaleLinear` for the continuous population scale, with tooltips generated via SVG `<title>` elements.

RRajat Dangat
94% match
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
93% 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
93% match
Loading thumbnail…

Bar char

A bar chart displays the ten most populous countries in 2020, using data from the United Nations World Population Prospects 2019. Horizontal bars encode each country’s population on a linear scale, with formatted axis ticks and a labeled axis. Built with React and D3 v5, the visualization uses `scaleBand` for country positions and `scaleLinear` for population lengths, rendering rectangles as SVG marks with tooltips.

MMayank Kumar
93% match
Loading thumbnail…

Bar Chart

This bar chart displays the population of ten countries (from the UN Population 2019 dataset) using horizontal bars, with the x-axis representing population and the y-axis listing country names. Built with React and D3 v5, the visualization uses `scaleBand` and `scaleLinear` to map data to the SVG coordinate system. Custom `AxisBottom` and `AxisLeft` components render tick marks and labels, while `Marks` creates rectangular bars with a `<title>` element providing tooltip text. Axis tick values are formatted using D3's `format` function, converting large numbers into readable abbreviations like "1.2B".

Iiblub
92% 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
92% match
Loading thumbnail…

Bar chart

A horizontal bar chart displays the top ten countries by population for 2020, sourced from a UN population CSV file. The chart encodes each country's population as the width of a rectangle, using D3's `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. The visualization is built with React, rendering SVG elements directly into the DOM.

SShashwat Kumar
92% match