Skip to main content
SimilarExport ZIP
100%

Fork of Aditya - bar chart with React & D3

✓ Published0🌍 Public
NNikhilchiguru-8
Last edited Mar 8, 2023
Created on Mar 8, 2023

This bar chart displays the top 10 most populous countries for 2020, using data from the United Nations World Population Prospects 2019. Built with React and D3 v5, the visualization renders as an SVG with horizontal bars, though it intentionally omits axes labels. The code uses React state and effects to load and filter CSV data, then applies D3’s `scaleBand` for the categorical y-axis and `scaleLinear` for the population x-axis, drawing grid lines, country names, and rectangles via `d3.csv` and React DOM elements.

AI-generated description

A program that shows the top 10 most populous countries as a pathetic bar chart with no axes.

Data: United Nations World Population Prospects 2019.

MIT Licensed

Similar vizzes

Loading thumbnail…

Aditya - bar chart with React & D3

This bar chart visualizes the top 10 most populous countries using data from the United Nations World Population Prospects 2019. The chart renders as SVG with horizontal bars, displaying country names on the y-axis and population values on the x-axis, but omits axes lines. The code combines React’s `useState` and `useEffect` hooks with D3’s `csv` loader, `scaleBand` for the categorical y-axis, and `scaleLinear` for the continuous x-axis.

AAditya Bhattacharya
93% match
Loading thumbnail…

Fork of Fork of Fork of Fork of Stylized Bar Chart

This interactive bar chart displays the top 10 most populous countries in 2020, using data from the United Nations World Population Prospects 2019. Built with React and D3 v5, it renders an SVG with horizontal bars, axes, and tooltips. The y-axis uses a band scale for categorical country names, while the x-axis applies a linear scale with SI-formatted tick labels (e.g., “1.4B”). The code splits visualization logic across separate components for axes and marks, loading CSV data via the `useData` hook and `d3.csv`.

HHaileabGH
90% match
Loading thumbnail…

Fork of Refactored Bar Chart

This visualization displays the top 10 most populous countries as a horizontal bar chart, using population data from the United Nations World Population Prospects 2019. Built with React and D3 v5, it renders SVG elements through reusable components. The chart uses `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis, with `AxisBottom` and `AxisLeft` components generating tick marks and labels. Data is loaded asynchronously via `d3.csv` from a GitHub gist, and bars are drawn as `<rect>` elements whose widths correspond to each country's 2020 population.

KKaushik Mishra
90% match
Loading thumbnail…

Fork of Refactored Bar Chart

This bar chart displays the top 10 most populous countries from the United Nations World Population Prospects 2019 dataset, using horizontal bars ranked by population. The visualization is built with React and D3.js v5, where the `d3.csv` loader fetches the data, `d3.scaleBand` positions country labels along the y-axis, and `d3.scaleLinear` maps population values to bar widths. Both axes are rendered as SVG elements through custom React components, with the left axis listing country names and the bottom axis showing population ticks. The chart updates reactively once the data loads, displaying all country names and population magnitudes without additional interactivity.

UUtsav Khatu
90% match
Loading thumbnail…

Fork of Stylized Bar Chart

This bar chart displays the top 10 most populous countries for 2020, ranked along the vertical axis with population counts on the horizontal axis. Built with React and D3 v5, it uses `d3.csv` to load United Nations World Population Prospects 2019 data, `d3.scaleBand` for the categorical country axis, and `d3.scaleLinear` for population values. SVG rectangles render the bars, with axis components custom-built as React functions and formatted tick labels using `d3.format`. Hovering shows a native tooltip with the population value.

DDINESH SAI BOPPANA
90% match
Loading thumbnail…

Fork of Axes with React & D3

This example displays a horizontal bar chart of the top 10 most populous countries in 2020, using United Nations World Population Prospects 2019 data. The visualization shows country names along the y-axis and population counts on the x-axis. Built with React and D3 v5, the code uses `scaleBand` and `scaleLinear` to compute scales, while React's `useState` and `useEffect` handle data loading. The SVG output includes grid lines and tick labels generated from `xScale.ticks()`, and the chart fills the available space with proper margins.

GGopal Khandelwal
90% match
Loading thumbnail…

Fork of Fork of Stylized Bar Chart

This interactive bar chart visualizes the top 10 most populous countries for 2020, using data from the United Nations World Population Prospects 2019. The visualization is implemented in React and uses d3’s `scaleBand` and `scaleLinear` to map country names and population values to SVG rectangles. A custom `useData` hook fetches the CSV data, and d3’s `format` function converts large numbers into abbreviated tick labels. The chart includes axes with styled ticks and a hover tooltip revealing the exact population via SVG `<title>` elements.

Iindushashi.g@gmail.com
90% match
Loading thumbnail…

Fork of Stylized Bar Chart

This visualization uses a horizontal bar chart to display the top 10 most populous countries, sourced from United Nations World Population Prospects 2019 data. The React-based implementation leverages d3.scaleBand, d3.scaleLinear, and d3.format to render SVG rectangles, with population values formatted in billions. Axis components are custom-built using d3 scale ticks, and hovering over a bar reveals its precise value via a native `<title>` tooltip. The chart includes labeled axes and uses a Poppins font styling throughout.

NNikithakatta30
90% match