Skip to main content
SimilarExport ZIP
100%

Diagrame en barres D3

✓ Published0🌍 Public
Cclebas
Last edited Apr 6, 2021
Created on Apr 6, 2021

This example displays a horizontal bar chart of the ten most populous countries in 2020, using data from a UN population CSV loaded via `d3.csv`. The visualization is built with React and D3 v5, where `scaleBand` positions each country along the y-axis and `scaleLinear` maps population values to bar widths. Rendered as SVG rectangles, the chart updates asynchronously after the data fetch, with a loading message shown initially. The code explicitly imports utilities like `max` and `scaleBand` from the D3 library.

AI-generated description

React en couleurs.

MIT Licensed

Similar vizzes

Loading thumbnail…

Bar

This example renders a bar chart showing the populations of the ten most populous countries in 2020, based on UN population data loaded via `d3.csv`. The visualization uses React to manage state and render SVG `<rect>` elements, with `d3.scaleBand` mapping country names to vertical bands and `d3.scaleLinear` mapping population values to bar widths. The code specifically imports and uses `csv`, `scaleBand`, `scaleLinear`, and `max` from D3 v5, while React handles the declarative component structure and the `useState`/`useEffect` hooks for data fetching.

EEugenio2192
93% match
Loading thumbnail…

Bar Chart w/ D3 And React

This example displays a horizontal bar chart of the ten most populous countries for 2020, using data from a UN Population CSV loaded via `d3.csv`. The React component manages the data with `useState` and `useEffect`, while D3’s `scaleBand` and `scaleLinear` compute the bar positions and widths. Each bar is rendered as an SVG `rect` element, with the chart sized at 960 by 500 pixels.

AAndres de la Garza
92% match
Loading thumbnail…

Bar Chart with React & D3

This visualization displays the ten most populous countries in 2020 as a horizontal bar chart, where bar length encodes population size. The code uses React hooks (useState, useEffect, useCallback) to manage asynchronous data loading via d3.csv, which fetches UN population data from a GitHub gist. D3 scales (scaleBand for countries, scaleLinear for population totals) position the SVG rectangles rendered as React components. While the HTML loads React and D3 from CDNs, the visible chart omits axes, labels, and color, showing only raw bars against a white background.

SSarah Elkeurti
91% match
Loading thumbnail…

D3 Bar Chart

This example shows a horizontal bar chart of the ten most populous countries for 2020, based on UN population data loaded from a CSV file. Each bar's length represents the population value, with country names mapped along the vertical axis. The visualization is built with React and D3 v7, using `d3.csv` for data loading, `d3.scaleLinear` for the x-axis, and `d3.scaleBand` for the categorical y-axis. Bars are rendered as SVG `<rect>` elements within a React component, with dimensions computed from the scales.

SSiddharthMittal07
91% match
Loading thumbnail…

Bar Chart With D3

This example shows a horizontal bar chart of the top ten most populous countries in 2020, using UN population data loaded from a CSV file. React state manages the fetched data, while D3’s `scaleBand` and `scaleLinear` map country names and population values to SVG rectangles. The bars render from left to right, with no axes or labels. The code uses `d3.csv` for data loading and React functional components with the `useState` and `useEffect` hooks to trigger and store the asynchronous data fetch.

Ffjvoris
91% match
Loading thumbnail…

Horizontal Bar Graph

This horizontal bar graph displays the 10 most populous countries in 2020, ranked by population size. Built with React and D3 v5, the visualization uses `scaleBand` and `scaleLinear` to map country names and population values to SVG rectangles. The data comes from a CSV file of UN Population 2019 estimates, loaded via D3's `csv` function. Each bar includes a tooltip showing the formatted population value, with axes rendered through custom `AxisBottom` and `AxisLeft` components using D3 tick formatting.

KKevin J Crespin
91% match
Loading thumbnail…

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

Stylized bar chart

This example displays a horizontal bar chart ranking the ten most populous countries in 2020, with bars extending rightward from labeled country names. The visualization uses React to render SVG elements, with D3’s `scaleBand` and `scaleLinear` handling layout and the `format` function abbreviating population values on the x-axis. Data is loaded via D3’s `csv` utility from a UN population dataset, and each bar includes a native SVG `<title>` element for tooltips.

DDeborah Ong
90% match