Funnel Points

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as a set of horizontal bars with no axes, using React hooks to manage state and load data. The visualization fetches a CSV file from a GitHub gist and renders SVG rectangles scaled by age values, which stand in for population. It implements scales with d3.scaleBand for the y-axis positioning and d3.scaleLinear for the x-axis widths. The chart updates asynchronously, showing a loading message before the bars appear once the data arrives via d3.csv.

Ccatalingdiaconu

Let's make a bar chart

This example shows a horizontal bar chart of the top 10 most populous countries, using population data from a CSV file. The chart displays the countries in descending order of population, with each bar’s length scaled linearly and the y-axis arranged as a band scale. The code uses d3.csv, d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom, rendering to SVG within a React app. It also formats tick labels with d3.format and uses a margin convention for layout.

Cckuchman

Fork of Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as a bar chart with no axes, using React hooks and D3 v5. It loads population data from a CSV file hosted on GitHub, sourced from the United Nations World Population Prospects 2019. The visualization uses `d3.csv` to fetch and parse data, `d3.scaleBand` for the y-axis positioning, and `d3.scaleLinear` for the x-axis scaling. Rendered as SVG, it includes gridlines and tick labels from `xScale.ticks()`, with bars drawn as `<rect>` elements and country names as `<text>` labels.

MMohammed Banani | MbDev

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as horizontal bars, using bar length to encode population without any axes or labels. The visualization is built with React and D3 v5, reading United Nations population data from a CSV file. It uses d3.csv for data loading, d3.scaleBand for the categorical y-axis positions, and d3.scaleLinear for the quantitative x-axis scaling. The bars are rendered as SVG rectangles within a red-background SVG canvas, positioned using D3’s transform utility.

SSimon Davis

Fork of Stylized Bar Chart

This example shows the population of the top 10 most populous countries as horizontal bars, sorted in descending order. The chart uses React to render SVG elements, with d3-scale for creating the linear x- and band y-scales, and d3-format to abbreviate tick labels (e.g., converting billions to “B”). Data is loaded asynchronously from a CSV file using d3.csv, and a tooltip appears on each bar via an SVG `<title>` element. The visualization demonstrates a clean, minimal styling with custom font and color choices.

MMatthew Talty Colvard

Fork of Stylized Bar Chart

This example displays the top 10 most populous countries as horizontal bars, with country names on the y-axis and population counts on the x-axis. It uses React components and d3.scaleBand and d3.scaleLinear to map data from the United Nations World Population Prospects 2019 dataset. The SVG rendering includes d3.csv for data loading, custom tick formatting with d3.format, and tooltips via SVG title elements.

MMercPai

Bar Chart

This example visualizes the top 10 most populous countries as horizontal bars using React and D3 v5. The chart lacks axes, displaying only labeled bars with lengths proportional to each country’s 2020 population estimate. Data comes from the United Nations World Population Prospects 2019 CSV file, loaded via `d3.csv`. The code uses `d3.scaleBand` for vertical positioning, `d3.scaleLinear` for bar widths, and renders SVG elements within a React component using hooks.

YYohR

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