Skip to main content
SimilarExport ZIP
100%

Refactoring of UN World Population 2020

✓ Published0🌍 Public
곽곽옥석
Last edited Jul 26, 2021
Created on Jul 26, 2021

This example shows the population of ten countries in 2020 as a horizontal bar chart. Each bar’s length encodes the population value, with country names on the left and a numeric axis at the bottom. Built with React and D3 v7, it uses `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and renders SVG rectangles. Data is loaded asynchronously from a CSV file via `d3.csv` and filtered to the first ten rows.

AI-generated description

A program that follows your mouse with a cicle.

MIT Licensed

Similar vizzes

Loading thumbnail…

Refactored Bar Chart

This example shows a horizontal bar chart of population data for ten countries, using the United Nations World Population Prospects 2019 dataset. The chart displays each country’s population for 2020 using SVG rectangles scaled by `d3.scaleLinear` and positioned with `d3.scaleBand`. The React components render the axes and marks, with `d3.csv` fetching the dataset and `d3.max` determining the x-axis domain. The visualization highlights a modular refactoring approach where axis and mark components are separated for clarity.

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

Refactored Bar Chart

This example displays a horizontal bar chart showing the 2020 population for ten countries listed in a UN dataset. The chart loads CSV data using the d3 `csv` utility and renders React SVG components for the plot. D3's `scaleBand` and `scaleLinear` are used for the y- and x-axes, respectively, while custom React components (`AxisBottom`, `AxisLeft`, `Marks`) generate the tick marks, labels, and rectangular bars. The visualization is drawn with SVG inside a React application, with the chart area offset by margins defined in the container.

11godfrey
91% match
Loading thumbnail…

Refactored React Bar Chart

This example shows the population of the ten most populous countries in 2020, using data from the United Nations World Population Prospects. A React component renders an SVG bar chart where each country’s bar length is proportional to its population. The code uses `d3.csv` to load the data, `d3.scaleLinear` and `d3.scaleBand` to position bars, and separate React components for the axes and marks. The bottom axis uses `xScale.ticks()`, while the left axis displays country names, with bars styled in steel blue.

AAnthony Ynami
91% match
Loading thumbnail…

Refactored Bar Chart

This example shows a horizontal bar chart of the top ten countries by 2020 population, sourced from a CSV file of UN population data. The chart uses React components to render the visualization as SVG, with d3-scale for the `scaleBand` y-axis and `scaleLinear` x-axis positioning. Population values drive bar widths, while country names label the left axis. The code is refactored into separate, reusable components for the axes and marks, with data loading handled by a custom `useData` hook that uses d3.csv.

RRajat Dangat
91% match
Loading thumbnail…

Refactored Bar Chart

This example presents a horizontal bar chart of the top ten countries by 2020 population, sourced from a UN population dataset. It demonstrates a modular code organization using React components for the bottom axis, left axis, and the rectangular marks, each rendered with SVG. The chart specifically uses D3's `scaleBand` and `scaleLinear` to map the data to pixel coordinates, while the React `useData` hook fetches and parses the CSV file. The bars are scaled proportionally to each country's population value.

Vvangenned
91% match
Loading thumbnail…

Refactored Bar Chart

This chart displays population data for the top 10 countries in 2020 using horizontal bars, with country names on the y-axis and population values on the x-axis. Built with React and D3 v6, the visualization uses D3's `scaleBand` and `scaleLinear` for axes, `format` for tick labels, and SVG elements for rendering. Data is loaded asynchronously via D3's `csv` function from a UN Population dataset. A tooltip reveals the exact population value for each bar.

Ddjfeld01
90% match
Loading thumbnail…

Refactored Bar Chart

This bar chart displays the population of ten countries in 2020, using horizontal bars with countries labeled on the y-axis and population values on the x-axis. It is built with React and D3 v5, using `scaleBand` and `scaleLinear` to map data to SVG rectangles, with axes rendered as React components. The data is loaded asynchronously from a CSV via `useData` and `csv`, and the chart updates after the data arrives.

AAndrea Picciau
90% match