Fork of The Margin Convention

100%

Fork of The Margin Convention

✓ Published0🌍 Public

Last edited Sep 28, 2022

Created on Sep 28, 2022

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.

AI-generated description

A program that shows the top 10 most populous countries as a pathetic bar chart with no axes.

Data: United Nations World Population Prospects 2019.

MIT Licensed

Similar vizzes

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

95% 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

93% match

Loading thumbnail…

Fork of The Margin Convention Outtake

This example displays a bar chart of the top 10 most populous countries in 2020, using data from the United Nations World Population Prospects 2019. The visualization omits both axes and value labels, resulting in an intentionally minimal and "pathetic" presentation. Built with React and D3 v5, the code uses `d3.csv` to load the data, `d3.scaleBand` for the categorical y-axis, and `d3.scaleLinear` for the quantitative x-axis, rendering the bars as SVG rectangles.

EEevikettu

93% match

Loading thumbnail…

Fork of 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.

TtrwMK

91% match

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

90% match

Loading thumbnail…

Fork of Margin Converntion

This example displays a horizontal bar chart of the top 10 countries by population for 2020, with labeled axes and tick marks. The visualization uses React state to asynchronously load CSV data via `d3.csv` and renders SVG elements. Margins are handled by transforming a group element, with `d3.scaleBand` positioning categories and `d3.scaleLinear` mapping population values to bar widths. The code constructs the bar chart with React components and d3 utilities, producing an interactive-ready visualization.

SSamirAhma

90% 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

90% match

Loading thumbnail…

Fork of United Nations Bar Chart (Margin Convention)

This example displays a horizontal bar chart of the top 10 most populous countries in 2020, using data from the United Nations population dataset. The chart applies the margin convention to create space for axes and labels, with bars sized proportionally to population values. Built with React and D3 v7, it loads the CSV data asynchronously using `d3.csv`, scales the bar lengths with `d3.scaleLinear`, and positions countries vertically using `d3.scaleBand`. The visualization renders as SVG, with each bar drawn as a `rect` element inside a translated group.

RRichardPearce60

90% match