Skip to main content
SimilarExport ZIP
100%

Axes With React and D3 UNPOP

✓ Published1🌍 Public
Rrayking99
Last edited Jun 10, 2021
Created on Jun 10, 2021
Forked from MarginConvUNPop

This visualization displays the population of ten countries in 2020 as horizontal bars, with a linear x-scale for population and a band scale for country names. Built with React and D3 v6, the code defines custom axis components (`AxisBottom`, `AxisLeft`) that render SVG ticks and labels, while `Marks` generates rectangles with tooltips. It fetches UN population data from a CSV file, formats axis ticks using D3’s `format` function (replacing 'G' with 'B' for billions), and applies custom CSS styling for fonts and color.

AI-generated description

A program that looks at the CSS colours from (https://gist.githubusercontent.com/rayking99/378256fd70d26e5bbbbf834037092eab/raw/13a0c07ceb1a099c4aba16f2d53220e25ff02144/csscoloursjp.csv)

MIT Licensed

Similar vizzes

Loading thumbnail…

Axes with React and D3

A horizontal bar chart displays population data for ten countries from a UN 2019 dataset. React components render SVG marks and axes, with D3 scales (scaleBand, scaleLinear) and tick generation driving the layout. AxisBottom and AxisLeft build tick marks and labels, while Marks draws rectangles sized by population values. The chart shows population rankings with labeled bars on a clean white background.

Ssxtnxy
94% match
Loading thumbnail…

Axes with React and D3

This example visualizes the top 10 countries by 2020 population as horizontal bars, displaying the data as text labels and bars using React components and D3 scales. The code builds SVG elements from scratch, using `scaleBand` for the y-axis country labels and `scaleLinear` for the x-axis population values, with axis ticks rendered manually. It loads UN population data from a CSV file via `d3.csv` and uses React hooks like `useState` and `useEffect` to fetch and render the data, with the final chart presented as an interactive SVG graphic.

Fforcox43
93% match
Loading thumbnail…

Axes with React & D3

This example shows a horizontal bar chart of population data for the top 10 countries in 2020, using React to render SVG elements and D3 to compute scales and ticks. It loads the UN Population 2019 dataset via `d3.csv`, then uses `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for the numeric x-axis, and `d3.max` to set the domain. Axis ticks are generated with `xScale.ticks()` and drawn as lines and text, while rectangles represent each country’s population. The chart is styled with a left margin for country labels, and axes are positioned using SVG transforms.

CChris Briggs
93% match
Loading thumbnail…

Axes With React & D3

This bar chart displays the top 10 countries by 2020 population, with horizontal bars ranked vertically. The visualization uses React for component structure and state management, while D3’s `csv` loads and parses the UN population data, and `scaleLinear` and `scaleBand` map values to pixel positions. SVG elements—including `rect` bars and axis ticks—are rendered directly by React, with D3’s `max` and `ticks` methods driving the axis generation. The chart adapts to the browser window size and includes labeled axes.

BbeauMarko
93% match
Loading thumbnail…

Axes with React & D3

A React and D3 bar chart displays the top 10 most populous countries using UN population data from 2019, with bars representing 2020 projections. The visualization includes custom axes built manually through React components, using `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the numeric x-axis. D3's `csv` loader fetches the dataset, while tick marks are generated via `xScale.ticks()`. The SVG rendering maps each country's population to bar widths, with axis labels positioned using React's JSX syntax.

TThiago Sawada
92% match
Loading thumbnail…

Axes with React & D3

This example shows a horizontal bar chart of population data for the top 10 countries in 2020, with axes drawn manually using React components. The code loads the UN Population dataset via `d3.csv`, then uses `scaleBand` and `scaleLinear` from D3 to position bars and ticks, while React state and `useEffect` manage data loading. SVG elements like `<rect>` and `<line>` render the bars and axis ticks, with text labels positioned via D3 scales, all inside a React component tree rendered to the DOM.

CCyc-Evelyn
92% match
Loading thumbnail…

Axes with React & D3

This example shows a horizontal bar chart of UN population data for 2020, with custom axes rendered using React and D3. The chart displays the top 10 countries by population, using D3’s `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Ticks for both axes are manually generated via `xScale.ticks()` and mapped to SVG `<line>` and `<text>` elements, with margins applied via a `<g>` transform. Data is loaded asynchronously from a CSV using `d3.csv`.

SSong Tao Chen
92% match
Loading thumbnail…

Axes With React & D3

This bar chart visualizes the top 10 countries by 2020 population using data from the UN Population dataset, rendered as SVG via React. The code combines React with D3’s `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, with `csv` loading the data. Gridlines and tick labels are generated from `xScale.ticks()`, while country names and proportional rectangles are mapped from the data.

Mmscoop16
92% match