Fork of The Margin Convention Outtake

100%

Fork of The Margin Convention Outtake

✓ Published0🌍 Public

Last edited Feb 28, 2021

Created on Feb 28, 2021

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

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

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

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

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

92% match

Loading thumbnail…

The Margin Convention

This example presents the top 10 most populous countries as a bar chart, deliberately omitting axes and labels to highlight the importance of margins in visualization layout. Built with React and D3 v5, it uses `scaleBand` for the y-axis positioning and `scaleLinear` for bar widths, with data from the United Nations World Population Prospects 2019. The SVG rendering applies a 20-pixel margin on all sides via a translated `<g>` element, demonstrating how padding frames the chart area. The visualization intentionally looks incomplete to emphasize that proper margins are a foundational convention for readable charts.

Ccoltonjcox92

91% match

Loading thumbnail…

The Margin Convention

The visualization displays the ten most populous countries as horizontal bars, lacking any axes, labels, or scales. The chart appears "pathetic" by design, emphasizing only the raw lengths of bars against a blank canvas. Data comes from a CSV file containing UN population figures for 2020. The code uses React with D3’s `scaleBand` and `scaleLinear` to map countries and population values, rendering SVG `<rect>` elements inside a translated group based on a fixed margin.

BBenoit Mouly

90% match

Loading thumbnail…

The Margin Convention

A pathetic bar chart displays the top 10 most populous countries from United Nations World Population Prospects 2019 data. The visualization implements the margin convention by using a single group translation via `d3.scaleBand` and `d3.scaleLinear` for axes, with fixed margin values. React controls state and rendering, converting CSV data with `d3.csv`, while SVG rectangles are positioned within the transformed coordinate system. The chart emphasizes the visual impact of incorrect margins, showing bars tightly packed with minimal spacing.

WWolfgang

90% match

Loading thumbnail…

The Margin Convention

This example shows the top 10 most populous countries as a simple bar chart, with each country’s population represented by the width of a rectangle. The chart deliberately omits axes, ticks, and labels to highlight the importance of margins in visualization layout. Built with React and D3 v5, it uses `scaleBand`, `scaleLinear`, and `max` to map data to screen coordinates, while a fixed margin object reserves space around the SVG. Data comes from the United Nations World Population Prospects 2019, rendered entirely as SVG elements.

XXingming Xu

89% match