bar graph

100%

✓ Published1🌍 Public

Last edited Mar 8, 2026

Created on Mar 7, 2026

This bar graph shows the migration distance of birds categorized by their migration status, using a dataset from a CSV file. It uses D3.js v7 within a React 19 application to render an SVG chart with `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. The code loads data via `csv`, applies axes with `axisLeft` and `axisBottom`, and draws steelblue rectangles for each bar, with a title and axis labels.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Migrant Chart try3

This example displays migration to the United States from 14 countries as a bar chart, with each bar's height representing the number of migrants. The visualization is built using React and D3 v7, leveraging `d3.csvParse` to load data from a remote CSV file and `d3.scaleBand` and `d3.scaleLinear` to map country names and migrant counts to SVG rectangle coordinates. The chart renders bars as SVG `<rect>` elements, with axes implied by the scales but not explicitly drawn. Data loading is handled via a fetch promise, though the code currently logs parsed results instead of fully wiring them into the state.

Ssucotton9

80% match

Loading thumbnail…

Bar chart

This bar chart displays categorical data from a CSV file, mapping values to vertical bars within an SVG container. The example uses D3 v6’s `select` and `csv` methods to load and parse the external dataset, while the SVG’s width and height attributes are read to define the chart’s dimensions. Currently, the code logs the parsed data to the browser’s developer console but does not render any bars, serving as a minimal starting point for a React-based visualization.

SShirish Kandra

78% match

Loading thumbnail…

Fork of Empty D3 Starter-likitha

A bar chart displays the average migration distance for birds, grouped by region. The visualization uses a sample dataset loaded from a GitHub gist, with the computation of regional averages handled by `d3.rollups` and `d3.mean`. The SVG rendering employs `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the continuous y-axis, with axes generated via `d3.axisBottom` and `d3.axisLeft`. The bars are drawn as SVG rectangles in steel blue, and the chart updates with an animation on data load.

Aaddalalikitha15@gmail.com

77% match

Loading thumbnail…

Migration to US chart

This example attempts to visualize migration to the US using a bar chart built with Chart.js. It loads CSV data via a fetch request and parses it with `d3.csvParse`, though the data is not explicitly bound to the chart. The chart configuration includes placeholders for two datasets, axes for countries and migrant counts, and renders on a canvas element. The code references d3.v7 but relies primarily on Chart.js for the visualization.

Ssucotton9

76% match

Loading thumbnail…

Fork of Bar Chart

This bar chart visualizes the number of migrants per country, with bar heights encoding the values on a linear scale. The chart uses D3 v6 to load CSV data, create band and linear scales, and render SVG axes and rectangles. Interactive mouseover events change bar colors from steel blue to orange, with a smooth transition on mouseout. The data originates from a remote CSV file, and the visualization is built entirely with D3’s selection, scale, and axis APIs.

Ssucotton9

76% match

Loading thumbnail…

Bar chart

This bar chart displays population figures for imagined countries from a CSV file, with countries on the vertical axis and population on the horizontal axis. Built with React and D3 v6, it uses SVG rendering and the `select`, `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` APIs. The chart applies a custom tick formatter that converts G to B, removes axis domains and tick lines, and renders bars in steelblue.

MMatan

76% match

Loading thumbnail…

Bar Chart

A bar chart displays categorical data as vertical bars, with height encoding numeric values. The visualization is built with React and rendered as SVG, using D3 v7's `select` and `attr` methods to configure the chart's width and height directly from the SVG element. The data is loaded from an external CSV file, and the chart uses a fixed 960x500 pixel viewport for consistent presentation.

BBenjamin Gorman

76% match

Loading thumbnail…

Grouped Bar Chart with React & D3

This grouped bar chart visualizes the total number of dead and missing migrants over time, with each bar representing a monthly sum. The chart uses React for component-based rendering and D3 v7 for data loading, binning, and scales. Data is fetched via d3.csv and binned using d3.bin with time thresholds, then displayed as SVG rectangles. The x-axis uses d3.scaleLinear with d3.timeFormat labels, while the y-axis is also linear. Hovering a bar reveals its exact value via an SVG title tooltip.

MManon ROMAIN

76% match