Fork of making a bar chart with React & D3

100%

Fork of making a bar chart with React & D3

✓ Published0🌍 Public

Last edited Apr 19, 2021

Created on Apr 7, 2021

Forked from Rendering Data with React & D3

This example shows a horizontal bar chart of the ten most populous countries in 2020, using United Nations population data loaded via `d3.csv`. React renders SVG bars, axes, and labels, while D3 scales (`scaleBand`, `scaleLinear`) compute positions and the `format` API converts tick values to abbreviated strings like "1.4B". The code separates concerns into reusable components for axes and marks, with a custom `useData` hook managing asynchronous data fetching.

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…

Fork of Rendering Data with React & D3

This example shows a bar chart of the ten most populous countries for 2020, using data loaded from a CSV file of UN population estimates. The visualization renders as a series of horizontal rectangles whose lengths correspond to each country’s population. Built with React for component structure and D3 utilities for data loading (`d3.csv`) and scaling (`scaleBand`, `scaleLinear`), the chart is drawn as an SVG. The code uses React hooks (`useState`, `useEffect`) to fetch and store the data, then maps it directly to `<rect>` elements.

Aalexanderjpark

94% match

Loading thumbnail…

Fork of Rendering Data with React & D3

This example shows a bar chart of the ten most populous countries in 2020, using a horizontal layout where bar length encodes population size. It loads data from a CSV file containing UN population estimates, parses the population column as a number, and filters to the first ten rows. React manages the component state, while D3’s `csv` loader, `scaleBand` for country categories, and `scaleLinear` for population values determine the SVG rectangle positions and dimensions.

FFulvio Vigilante

93% match

Loading thumbnail…

Fork of Rendering Data with React & D3

This example displays the ten most populous countries in 2020 as a horizontal bar chart, using United Nations population data loaded via D3’s `csv` utility. React manages component state and rendering, while D3’s `scaleBand` and `scaleLinear` compute bar positions and widths, and `max` and `ticks` generate the axis. The SVG output is created through React elements, with gridlines and country labels drawn from D3 scales.

AAnkit-Ian-53787

93% match

Loading thumbnail…

Fork of Making a bar chart

This example uses React to render a horizontal bar chart of the 12 most populous countries, based on 2020 UN population estimates loaded from a CSV file with D3’s `csv` function. The chart displays each country’s name on the vertical axis, scaled with `scaleBand`, and its population on the horizontal axis, scaled with `scaleLinear`. SVG `<rect>` elements are generated directly in JSX, with widths computed from the population values. The code also includes a simple loading state and uses React’s `useState` and `useEffect` hooks to manage asynchronous data fetching.

Nnexus1058

93% match

Loading thumbnail…

Fork of Rendering Data with React & D3 - barchart Axis

This example displays a horizontal bar chart of the top 10 most populous countries for 2020, using data from a UN population CSV. It demonstrates a hybrid approach where React (16.13.1) manages the component structure and state, while D3 (v7.1.1) provides the `scaleBand`, `scaleLinear`, and `max` functions for chart layout. The chart renders as SVG with axes: x-axis ticks and labels generated from `xScale.ticks()`, and y-axis country labels positioned using the band scale. The bars themselves are drawn as `rect` elements, with their widths and heights computed from the data and scales.

Kkeitheade

93% match

Loading thumbnail…

Fork of Rendering Data with React & D3

This example shows a horizontal bar chart of the ten most populous countries in 2020, using a bar width proportional to each country’s population. It loads CSV data from a GitHub gist via `d3.csv`, then maps each row’s population string to a number. The React component uses `useState` and `useEffect` to fetch and store the data, while `d3.scaleBand` and `d3.scaleLinear` position and size the rectangles. React renders the final SVG, with each country’s name on the y-axis and its population scaled along the x-axis.

Iisavedalex

93% match

Loading thumbnail…

Fork of Fork of Rendering Data with React

This example shows a horizontal bar chart of the top 10 most populous countries for 2020, using the UN Population 2019 dataset loaded via D3’s `csv` function. The bars are rendered as SVG `<rect>` elements inside a React component, with D3’s `scaleBand` for the categorical y-axis (country names) and `scaleLinear` for the quantitative x-axis (population). React hooks (`useState`, `useEffect`, and `useCallback`) manage asynchronous data loading and state updates. The visualization demonstrates a clean React-D3 integration where D3 handles data parsing and scaling while React owns the component lifecycle and DOM rendering.

Ttharuta

93% match

Loading thumbnail…

Fork of Rendering data with React

This example shows a horizontal bar chart of the top 10 most populous countries in 2020, using D3 utilities to load and scale the data and React to render the SVG bars. The code uses `d3.csv` to fetch population data from a gist, `d3.scaleBand` for the categorical y-axis, and `d3.scaleLinear` for the quantitative x-axis. Each country is drawn as a React `<rect>` component within an SVG, with bar widths proportional to population values.

Jjiro2017

92% match