Fork of Fork of Rendering Data with React & D3

Fork of Rendering Data with React & D3

This example shows a horizontal bar chart of the top 10 countries by population, using React to render SVG elements and D3 for data processing and scales. The visualization uses the `UN_Population_2019` dataset, loaded via `d3.csv`, with a linear scale for population values and a band scale for country names. The code includes separate React components for the axes and marks, with D3’s `scaleBand` and `scaleLinear` functions, demonstrating a clean separation of data handling and UI rendering.

CCatalina Vajiac

Fork of Rendering Data with React & D3

This bar chart displays the top ten countries by projected 2020 population, with a linear scale mapping population to bar width and a band scale for country names. Built with React and D3 v5, the visualization uses a D3 CSV loader to fetch the UN population dataset and React components to render SVG axes and marks. Custom axis components generate tick lines and labels, while each bar includes a tooltip via an SVG `<title>` element that formats values in billions.

Nnonbots

Fork of Rendering data with React

This visualization displays the populations of ten countries in a horizontal bar chart using SVG rectangles rendered by React. The chart loads UN Population data for 2019 from a CSV file using D3’s `csv` utility, then uses React’s `useState` and `useEffect` hooks to fetch and store the top ten rows. The bar widths are scaled with D3’s `scaleLinear`, while the vertical positions use `scaleBand` on country names. The rendering maps over the data with React’s `map` function to create each `<rect>` element.

Kkragovic

Fork of Fork of Rendering Data With REACT

This visualization displays the top 10 countries by 2020 population as horizontal bars in an SVG. The code loads the data using D3’s `csv` utility, stores it in React state via `useState` and `useEffect`, and maps each country to a `rect` positioned with `scaleBand` and scaled by `scaleLinear`. The chart updates on load, showing population values from the UN_Population_2019 dataset. React renders the SVG elements, while D3 v7 handles the data processing and scales.

Nnkarinti

Fork of Rendering Data with React & D3

This bar chart displays the top 10 countries by population in 2020, using React for rendering SVG elements and D3 utilities for data loading and scales. The code fetches CSV data via `d3.csv`, transforms population values, and applies `scaleBand` for categorical positioning and `scaleLinear` for numeric values. Axes are custom React components that generate tick marks and labels. Hovering over a rect reveals a tooltip with the exact population value through the SVG `<title>` element.

Ppnlinyz

Fork of Rendering Data with React & D3

This visualization displays population data for ten countries using a horizontal bar chart rendered as SVG. The bars have random colors, and each bar’s width is scaled proportionally to the population value. The chart includes labeled axes for population (formatted in billions) and country names. The code uses React hooks with D3’s `scaleBand`, `scaleLinear`, and `csv` to load data from the UN Population 2019 dataset. Custom React components (`AxisBottom`, `AxisTop`, `BarRect`) handle the chart’s rendering.

VVipul-Wakodikar

Fork of Fork of Rendering Data with React and D3

This visualization uses React to render a bar chart of the top 10 countries by population in 2020, sourced from UN population data loaded via `d3.csv`. The `App` component fetches the data asynchronously and displays a loading message until ready. D3 utilities `scaleBand`, `scaleLinear`, and `max` compute the chart’s scales and domain, while React maps the data array to SVG `rect` elements, positioning and sizing each bar according to the country name and population value.

DDeborah Ong

Fork of Fork of Rendering data with react

This example renders a horizontal bar chart of the top 10 countries by 2020 population, loading data from a CSV file of UN population estimates. The visualization uses React with the `useState` and `useEffect` hooks to fetch and store the data via `d3.csv`, then maps over the dataset to generate SVG `<rect>` elements. Position and size are determined by `d3.scaleBand` for the categorical country axis and `d3.scaleLinear` for the population values, while `d3.max` computes the domain for the linear scale.

SSamirAhma