Skip to main content
SimilarExport ZIP
100%

Fork of The Margin Convention Outtake

✓ Published1🌍 Public
XXizhiW
Last edited Jan 17, 2022
Created on Jan 17, 2022

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.

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

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

Margin convention

This example displays the top 10 most populous countries as a horizontal bar chart without axes, using a fixed margin convention to inset the plot area. The chart loads data from the United Nations World Population Prospects 2019 CSV, processes it with `d3.csv`, and renders SVG rectangles scaled by population. The code uses React hooks (`useState`, `useEffect`) to fetch and filter the data, then applies `d3.scaleBand` for the y-axis categories and `d3.scaleLinear` for the x-axis range, all within an SVG canvas of 960×500 pixels.

11tang
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
91% 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
91% match