Skip to main content
SimilarExport ZIP
100%

Fork of Pathetic Bar Chart

✓ Published1🌍 Public
SScott Kanning
Last edited Apr 25, 2024
Created on Apr 24, 2024
Forked from Pathetic Bar Chart

This example shows a horizontal bar chart of the top 10 most populous countries in 2020, with population values displayed along the x-axis using a D3 linear scale and country names on the y-axis. The visualization is rendered as an SVG using React, with axes and bars constructed from D3 scale objects and mapped to SVG elements. Data is loaded from a CSV file of the United Nations World Population Prospects via D3’s `csv` loader. The `AxisBottom`, `AxisLeft`, and `Marks` components format ticks and tooltips using D3’s `format` function.

AI-generated description

A program that shows the top 10 most populous countries.

Data: United Nations World Population Prospects 2019.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Pathetic Bar Chart

This example shows the top 10 most populous countries as a horizontal bar chart with labeled bars but no axes, using React to render SVG elements. The code loads United Nations World Population Prospects 2019 data via d3.csv, then applies d3.scaleLinear and d3.scaleBand to map population values and country names to pixel coordinates. It manually draws gridlines and tick labels using d3.scaleLinear ticks, while omitting axis components. Bars are rendered as SVG rectangles whose widths reflect each country’s 2020 population estimate, with country names positioned along the y-axis.

Nnikitaglt
96% match
Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as horizontal bars, with population values transformed from UN World Population Prospects 2019 data. The chart uses React to render SVG elements and D3’s `scaleBand` and `scaleLinear` to position bars and map population counts to widths. A bottom axis uses D3’s `format` to abbreviate values, while the left axis lists country names. The `Marks` component adds tooltips via SVG `<title>` elements, and the dataset is loaded asynchronously with `d3.csv`.

Ffaik.binaj@gis-dev.com
96% match
Loading thumbnail…

Fork of Pathetic Bar Chart 2

This example shows the top 10 most populous countries as a set of horizontal bars, with no axes, labels, or other chart furniture. Each bar’s length encodes the country’s 2020 population, drawn from the United Nations World Population Prospects 2019 dataset. The visualization is built with React, using D3 v5’s `scaleBand` for the y-axis positions and `scaleLinear` for the bar widths, and renders as an SVG. The data is fetched via D3’s `csv` loader and mapped to rectangles.

Iiffath.namira@csedge.org
96% match
Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as a static, axis-less bar chart, using React for the user interface and D3.js for data loading and scaling. It fetches population data from the United Nations World Population Prospects 2019 via D3’s `csv` function, then maps the values using `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. The SVG rendering omits the axes, leaving only the bars and tick labels, which are generated from `xScale.ticks()`.

AAliaksandr
96% match
Loading thumbnail…

Fork of Pathetic Bar Chart

This example visualizes the top 10 most populous countries as a bar chart using React for component structure and D3 v5 scales for data mapping. The application fetches UN World Population Prospects 2019 data via d3.csv, then renders SVG rectangles whose widths correspond to each nation’s 2020 population estimate. The chart deliberately omits axis labels or tick styling, presenting only raw red tick lines and country names through custom React components like AxisBottom, AxisLeft, and Marks, with y-axis positioning using scaleBand and x-values scaled via scaleLinear.

Pplusbeauxjours
96% match
Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as a set of horizontal bars without axes or labels, emphasizing raw bar lengths. The visualization uses React with hooks to fetch and parse United Nations World Population Prospects 2019 data via d3.csv, slicing the first 10 records. It renders SVG rectangles, positioning them with d3.scaleBand for the categorical country axis and sizing widths with d3.scaleLinear for population values. The code includes grid lines with tick marks from xScale.ticks(), though tick text is positioned incorrectly, and the chart shows only the bars and gridlines.

UUtsav Khatu
95% match
Loading thumbnail…

Fork of Pathetic Bar Chart

This example visualizes the top 10 most populous countries as a "pathetic" bar chart, using horizontal bars with no axes or labels. The visualization loads data from the United Nations World Population Prospects 2019 dataset, which is fetched via the `csv` function in d3. The bars are rendered as SVG rectangles, with each bar’s width proportional to the country’s 2020 population. The layout uses `scaleBand` for the y-axis positioning and `scaleLinear` for the x-axis scaling, with React managing the component state and rendering the final SVG output.

AAllOneeeee
95% match
Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as a set of horizontal bars, lacking any axes or labels. The bar lengths encode each country’s 2020 population estimate from the United Nations World Population Prospects 2019 dataset. React manages the component state and rendering, while d3.csv loads and parses the data, and d3.scaleBand and d3.scaleLinear map the country names and population values to SVG rectangle positions and widths. The visualization updates asynchronously after the CSV file is fetched.

TTrevor McReynolds
95% match