Fork of Axis World Population

100%

Fork of Axis World Population

✓ Published1🌍 Public

Last edited Sep 23, 2022

Created on Sep 23, 2022

This visualization displays the population of the top nine countries in 2020, sorted in descending order using horizontal bars. Built with React and D3 v7, it uses `scaleBand` for the y-axis country categories and `scaleLinear` for the x-axis population values, with data loaded from a CSV via `d3.csv` and rendered as SVG `<rect>` marks. The chart includes custom axis components for ticks and labels, with the population normalized to millions for readability.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter. css named colors

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Axes with React & D3

This bar chart displays the top 10 most populous countries by 2020 population, using horizontal bars sorted descending. The visualization is built with React components for rendering SVG marks and axes, while D3.js (v5) computes scales, ticks, and number formatting via `scaleBand`, `scaleLinear`, and `format`. Data comes from the UN World Population Prospects 2019 CSV. The chart features custom axis components, tick labels formatted with "B" for billions, and tooltips via SVG `<title>` elements.

Llatifiss

89% match

Loading thumbnail…

Fork of axis

This example displays the top 10 most populous countries as a bar chart with no axes, using React to render SVG elements. It loads United Nations World Population Prospects 2019 data via d3.csv, then uses d3.scaleBand for the y-axis categories and d3.scaleLinear for the x-axis values. The chart draws tick marks and labels for both scales using d3’s scale methods, while the bars themselves are plain SVG rectangles. The rendering relies on React’s useState and useEffect hooks to manage the asynchronous data fetching.

NNart Williamson

88% match

Loading thumbnail…

Axis World Population

This example displays the world’s most populous countries for 2020, ranking the top nine by population size. Using React to manage state and lifecycle, it loads a CSV file via `d3.csv`, then sorts and slices the data to isolate the largest nations. The visualization employs `d3.scaleBand` for the vertical country axis and `d3.scaleLinear` for the horizontal population axis, rendering the result as SVG rectangles and text labels within a fixed-width viewport. Gridlines and tick marks are generated from the linear scale’s ticks.

Ww.fukuyama@gmail.com

88% match

Loading thumbnail…

Fork of Axes with React & D3

This example shows the top 10 most populous countries as a horizontal bar chart, with country names on the y-axis and population values on the x-axis. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and manually renders axis ticks with SVG `<line>` and `<text>` elements. Data comes from the United Nations World Population Prospects 2019 CSV, loaded asynchronously via `d3.csv`, and bars are drawn as `<rect>` elements inside an SVG container.

Ssimrangajsinghani

88% match

Loading thumbnail…

Fork of Axes with React & D3

This example shows the top 10 most populous countries as a horizontal bar chart. The visualization uses React for component structure and D3 v5 for data loading and scales, with axis marks and tick labels rendered manually. Data comes from the United Nations World Population Prospects 2019, loaded via d3.csv. The chart displays country names on the y-axis and population values on the x-axis, using d3.scaleBand and d3.scaleLinear to position bars and ticks.

GGustavo

88% match

Loading thumbnail…

Fork of Axes with React & D3

This visualization displays the top 10 most populous countries in 2020 as a bar chart, using the United Nations World Population Prospects 2019 dataset loaded via `d3.csv`. It renders as an SVG with React managing the component state, while D3 provides `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and manual tick generation from `xScale.ticks()`. The chart includes grid lines and axis labels, but no axes components are used, showing a minimalist approach to chart construction.

EEdvard Ahlsén

88% match

Loading thumbnail…

Fork of Formatting axis

This bar chart displays the top 10 most populous countries, using horizontal bars ordered by population with formatted axis labels. The visualization loads data from a CSV file and renders it as SVG using React with D3 v7. It employs `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis, and `d3.axisBottom` with `d3.format(".3s")` to abbreviate population values. The chart includes a title and axis label, with bars styled in steelblue.

CCrystal Lee

88% match

Loading thumbnail…

Fork of Axes with React & D3

This example displays the top 10 most populous countries as horizontal bars, with a quantitative x-axis and a categorical y-axis. It uses React for the component structure and D3 v5’s `scaleBand` and `scaleLinear` to map country names and population values to pixel coordinates, while D3’s `csv` loads United Nations World Population Prospects 2019 data. The chart is rendered as SVG, with axis tick marks, labels, and rectangles generated from D3 scales and rendered via React elements.

FFernando Millan

88% match