Fork of Fork of The Margin convention

100%

Fork of Fork of The Margin convention

✓ Published1🌍 Public

Last edited Oct 14, 2022

Created on Oct 14, 2022

Forked from Fork of The Margin convention

A bar chart displays the populations of the top 20 countries for 2020, sourced from UN population data loaded via D3’s `csv` utility. React renders each country as a horizontal `rect` using `scaleBand` for the y-axis and `scaleLinear` for the x-axis, with widths proportional to population. The SVG is positioned within a 20-pixel margin, and the visualization updates once the asynchronous data fetch completes.

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 The Margin convention

This example shows a horizontal bar chart of the top 20 countries by 2020 population from the UN Population dataset, loaded via `d3.csv`. React renders SVG `rect` elements scaled with `d3.scaleLinear` for width and `d3.scaleBand` for vertical positioning, respecting a margin convention. The chart updates asynchronously after data loads, with a loading state shown before render.

TtrwMK

96% match

Loading thumbnail…

Fork of The Margin Convention

A fork of the Margin Convention displays the top 10 most populous countries as horizontal bars with no axes, using React for rendering and D3 v5 for data processing and scales. The code loads CSV data from the United Nations World Population Prospects 2019, slices the first 10 rows, and maps population values for 2020 to bar widths via `d3.scaleLinear`. Countries are positioned with `d3.scaleBand`, while an `axisLeft` is computed but never rendered. The visualization omits axes entirely, showing only plain rectangles in an SVG.

Ppinlin0816157

91% match

Loading thumbnail…

Fork of un population margin

This fork of the UN population margin example displays the ten most populous countries for 2020 as a horizontal bar chart. It loads CSV data from a GitHub gist using `d3.csv`, then maps each country’s population to the bar width via `scaleLinear` and the country name to vertical position using `scaleBand`. React manages the component state and renders SVG `rect` elements within a margin-translated group, with D3 v7 providing the scaling functions.

FFloweringDeathStar

91% match

Loading thumbnail…

Fork of Fork of react bar 2 margins

This bar chart displays the top 10 countries by 2020 population from a UN dataset, using a horizontal bar layout with yellow circular background elements. The React application fetches CSV data via d3.csv, scales the bars with d3.scaleLinear and d3.scaleBand, and renders the SVG inside a viewBox with margins. The visualization loads using React 17, D3 v7, and includes a background circle component that acts as a decorative frame.

MMalcolm Mead

89% match

Loading thumbnail…

Fork of The Margin Convention Outtake

This example displays the top 10 most populous countries as a horizontal bar chart using React and D3 v5. The bars render in SVG, with country names on the y-axis and population counts on the x-axis, including tick marks and labels. The code uses `d3.csv` to load UN World Population Prospects 2019 data, `scaleBand` for the categorical y-axis, and `scaleLinear` for the quantitative x-axis. The visualization omits axes through the margin convention, focusing only on the plotted rectangles and their corresponding tick labels.

XXizhiW

89% match

Loading thumbnail…

Fork of The Margin Convention Outtake

This visualization displays the top 10 most populous countries as a simple bar chart without axes or labels, using United Nations World Population Prospects 2019 data. It loads the CSV via d3.csv, then uses React hooks to manage state and render SVG rectangles positioned with d3.scaleBand and scaled with d3.scaleLinear. The chart highlights the margin convention by reserving a large right-side space, leaving the bars to occupy only the left portion of the canvas.

Bbillmccabeusa@hotmail.com

88% match

Loading thumbnail…

Fork of Bar chart with margin convention

This fork of a bar chart displays the top 10 countries by population for 2020, using horizontal bars ranked from largest to smallest. The visualization loads CSV data from a GitHub gist and renders it as SVG rectangles within a specified margin convention. Built with React and D3 v7, the code uses `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and `max` to determine the domain. The React `useState` and `useEffect` hooks manage asynchronous data loading, while SVG `<rect>` elements are mapped within a translated group to respect the margins.

SShashwat Kumar

88% match

Loading thumbnail…

Fork of The Margin Convention Outtake

This visualization displays the top 10 most populous countries as a minimal bar chart, with no axes or labels, leaving the bars to float in an empty SVG canvas. The chart uses React for rendering and D3 v5’s `scaleBand` and `scaleLinear` for positioning and scaling, with data sourced from the United Nations World Population Prospects 2019 via a CSV. A large right margin compresses the bars into the left portion of the view, emphasizing the absence of a conventional chart frame.

Vvram80

88% match