Fork of Pathetic Bar Chart

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as a horizontal bar chart with no axes, using React and D3.v5. Population values from the United Nations World Population Prospects 2019 dataset are loaded via `d3.csv` and rendered as SVG rectangles. The code uses `scaleBand` for the y-axis positioning of country names and `scaleLinear` for bar widths, with bars colored by the default fill. The chart updates asynchronously, showing a loading message until data arrives.

TToooooooT

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

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as ranked bars, with no axes or labels, using a minimal bar chart layout. It loads United Nations World Population Prospects 2019 data via `d3.csv`, then sorts and slices the first ten rows. React state management (`useState`, `useEffect`) handles the asynchronous data fetch, while `d3.scaleBand` and `d3.scaleLinear` map countries and population values to SVG rectangles. The visualization renders in SVG, with bar widths proportional to 2020 population estimates.

Aanindyamehta@gmail.com

Fork of Pathetic Bar Chart

This example presents the top 10 most populous countries as a series of unlabeled, axis-less bars rendered as SVG rectangles. The bars stretch horizontally across the viewport based on each country’s 2020 population estimate, with no tick marks, scales, or other chart furniture. The visualization uses React hooks (useState, useEffect) to fetch and parse United Nations World Population Prospects 2019 data via d3.csv, then applies d3.scaleBand for vertical country positioning and d3.scaleLinear for bar widths. While loading, a large “Loading...” message appears in place of the chart.

Kkl7g

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

Fork of Pathetic Bar Chart

This example renders the top 10 most populous countries as a pathetic bar chart with no axes, using React to manage state and SVG for drawing. The code loads UN World Population Prospects 2019 data via `d3.csv`, then maps it with `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis. Each country appears as a plain `<rect>` element, with its width proportional to population, and a loading indicator displays until the data arrives.

Ddiegobrivo

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as a set of horizontal bars, with no axes or labels, creating a starkly minimal "pathetic" chart. Using React and d3.v5, it loads population data from the United Nations World Population Prospects 2019, then applies `scaleBand` for the y-axis and `scaleLinear` for the x-axis to size each rectangle. The SVG rendering shows bar lengths proportional to 2020 population values, with React managing the state and rendering.

BBjørnar Dalsnes

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