Fork of The Margin Convention Outtake

100%

Fork of The Margin Convention Outtake

✓ Published0🌍 Public

Last edited Oct 26, 2022

Created on Oct 26, 2022

Forked from 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.

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

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

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

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

92% match

Loading thumbnail…

The Margin Convention Outtake

This interactive example uses React with D3 v5 to display the top 10 most populous countries from the UN World Population Prospects 2019 dataset as a minimal bar chart, lacking axes or labels. The SVG rendering maps each country’s population to a horizontal bar’s width using `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis, with the chart translated by a fixed margin. The visualization intentionally omits conventional chart furniture, highlighting the necessity of margins and axes in typical visualizations.

CCurran Kelleher

91% match

Loading thumbnail…

The Margin Convention

This example uses React and D3 v5 to render a bar chart of the top 10 most populous countries from the United Nations World Population Prospects 2019 dataset. The chart deliberately omits axes and scales, displaying only bars whose lengths encode population values, while the margin constraints define the plotting area. Using `d3.csv` to load data, `d3.scaleBand` for the categorical y-axis, and `d3.scaleLinear` for the numeric x-axis, the SVG output calculates bar widths against a fixed inner width. The code also renders tick lines and labels for the x-axis, but no axis lines or y-axis tick marks, highlighting the conventional margin structure without full annotation.

JJacob Potvin

90% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as a rudimentary bar chart with no axes, using a React component and SVG rendering. It loads United Nations World Population Prospects 2019 data from a CSV via `d3.csv`, slices the first ten rows, and maps populations for 2020 to rectangle widths using `d3.scaleLinear`, while `d3.scaleBand` positions each country vertically. The chart omits axis labels and titles, presenting only the bars against a blank canvas.

KKuladeep

90% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries in 2020 as a bare bar chart without any axes, labels, or scales shown. The data comes from the United Nations World Population Prospects 2019 dataset, loaded via `d3.csv`. The visualization uses React with `useState` and `useEffect` hooks to fetch and store the data, then renders SVG rectangles positioned with `d3.scaleBand` and sized by `d3.scaleLinear`. Red gridlines are drawn at each tick of the x-axis using D3’s `ticks()`, though no tick labels appear.

Eeleshaky

90% match