Skip to main content
SimilarExport ZIP
100%

Fork of Auto MPG

✓ Published0🌍 Public
11joaorodrigues
Last edited May 25, 2021
Created on May 25, 2021
Forked from Hello VizHub

This example displays a horizontal bar chart of the 15 most populous countries in 2020, with population values on the x-axis. Built with React, it uses `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis to position the SVG rectangles. The chart reads from a CSV file and formats large population numbers for tooltips using `d3.format`. Styled with the Noto Sans JP font, the visualization includes custom axes and tick labels for clear data reading.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Fork of Activity 6

This interactive bar chart displays the 20 most populous countries in 2010, plotting population counts along a horizontal axis against country names on the vertical axis. Built with React and D3 v5, the visualization uses SVG rendering with custom components for axes and marks, pulling data from a remote CSV file. The chart formats population values in billions and includes hover tooltips, with the code demonstrating modular component reuse and D3’s scaleBand and scaleLinear APIs for layout.

KKritin Kesav
85% match
Loading thumbnail…

Fork of Stylized Bar Chart

This example shows the ten most populous countries in 2020 as a horizontal bar chart, with country names on the y-axis and population in billions on the x-axis. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` for positioning and `format('.2s')` to abbreviate tick labels. Data comes from the United Nations World Population Prospects 2019, loaded via `d3.csv`. Rects render as SVG marks, with axis components drawing tick lines and labels, and a tooltip showing the formatted population value on hover.

TTrashBoatDora
85% match
Loading thumbnail…

Fork of Simple Bar Chart000000

This example displays a horizontal bar chart of the ten most populous countries for 2019, loaded from a CSV file via d3.csv. It renders the bars as SVG rectangles, positioning them with d3.scaleBand for the categorical country axis and d3.scaleLinear for the population axis. Gridlines and axis ticks are generated manually using d3's scale methods, with values formatted directly from the data. The chart is built using React components that manage state and lifecycle hooks to fetch and process the data before rendering.

Cchilukuritagore1427@gmail.com
85% match
Loading thumbnail…

Fork of fork

This example displays a horizontal bar chart of the top 10 most populous countries, using population data from 2019 loaded via `d3.csv`. The visualization is built with React and rendered as SVG, with `d3.scaleBand` positioning the country labels and `d3.scaleLinear` mapping population values to bar widths. Grid lines and tick marks are generated manually using `xScale.ticks()`, and axes are drawn with custom SVG elements rather than D3’s axis components. The chart updates reactively when the CSV data finishes loading.

RRamyapriyaPutta
85% match
Loading thumbnail…

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
85% match
Loading thumbnail…

Fork of Rendering Data with React & D3

This example shows a horizontal bar chart of the ten most populous countries in 2020, using a bar width proportional to each country’s population. It loads CSV data from a GitHub gist via `d3.csv`, then maps each row’s population string to a number. The React component uses `useState` and `useEffect` to fetch and store the data, while `d3.scaleBand` and `d3.scaleLinear` position and size the rectangles. React renders the final SVG, with each country’s name on the y-axis and its population scaled along the x-axis.

Iisavedalex
85% match
Loading thumbnail…

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
85% match
Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Stylized Bar Chart

This example displays a horizontal bar chart of the ten most populous countries, with each bar’s length proportional to its 2020 population estimate. The visualization uses React to render SVG elements, with d3.scaleBand and d3.scaleLinear handling the axes and positioning. Data is loaded from a United Nations World Population Prospects 2019 CSV file, and formatted with d3.format to show values in billions.

HHaileabGH
85% match