ENCODAT

100%

✓ Published0🌍 Public

Last edited Feb 18, 2026

Created on Feb 18, 2026

This visualization shows a horizontal bar chart of categorical data, where bar lengths are proportional to numeric values. Built with React and D3 v5, it uses `scaleBand` for the y-axis categories and `scaleLinear` for the x-axis values, rendering bars as SVG rectangles. The chart includes formatted tick labels (converting large numbers to abbreviations like “B” for billions), axis labels, and tooltips showing exact values on hover. Data is loaded from an external CSV source via D3’s `csv` function, with the first ten rows displayed.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Data Visualization with D3

This example displays a bar chart of categorical data from a CSV file, comparing numeric values across named categories. The visualization uses an SVG canvas with axes, mapping the data's numeric values to horizontal bar lengths and category names to vertical positions. The implementation relies on D3 v5 utilities for data loading via `d3.csv`, linear scaling with `scaleLinear`, and axis generation with `axisLeft` and `axisBottom`, while the chart is rendered as SVG rectangles within a React-based HTML page.

Ssvensonneveld

80% 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

79% match

Loading thumbnail…

Untitled

This example shows a horizontal bar chart of country populations, with each bar’s length proportional to population size and bars stacked vertically by country name. The visualization uses D3.js’s `csv` loader to parse `data.csv`, then applies `scaleLinear` for the x-axis and `scaleBand` for the y-axis to position rectangles appended to an SVG. The code selects the SVG element, sets bar heights via `yScale.bandwidth()`, and renders the chart in React with a minimal HTML page.

BBlackercake

77% match

Loading thumbnail…

Rendering BAR data with React

This example shows a horizontal bar chart built with React and D3 v6, displaying the first three rows of a CSV dataset. The chart maps each data point’s `Origin` category to the y-axis band scale and its `Cylinders` value to the x-axis linear scale, rendering `<rect>` SVG elements. Data is loaded asynchronously via `d3.csv` into React state using the `useEffect` and `useState` hooks, with the final SVG output managed by ReactDOM. The visualization relies on `scaleBand`, `scaleLinear`, and `max` from D3.

Ppsabela

76% match

Loading thumbnail…

Untitled

A bar chart displays monthly incident counts, with values ordered from January to December despite the CSV’s shuffled rows. The visualization uses a linear x-scale and band y-scale, with bars styled in steelblue. D3’s `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` handle scaling and axes, while `axisBottom`’s tick format converts numbers to “Mila” units. The React framework is not used; instead, D3 selects the SVG directly. Data comes from `data.csv`, and a title and axis labels are added via SVG groups and text elements.

PPaolaAntonicoli

76% match

Loading thumbnail…

let's make a bar chart.js

This example displays a horizontal bar chart mapping categorical country labels to numeric values from a CSV file. The visualization uses D3.js v5 APIs including `scaleLinear` for the value axis and `scaleBand` for the country axis, with SVG rectangles rendered inside a 960×500 canvas. The data is loaded asynchronously via `csv`, and the chart is generated entirely from the provided data.csv dataset, showing one bar per country with widths proportional to the parsed value field.

HHaifan Li

76% match

Loading thumbnail…

Que 1.1

This example shows a horizontal bar chart of population data for ten countries in the year 2000, using a React component that renders SVG via D3 v5. The visualization uses `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis, with axis components built from D3’s tick and scale methods. Data is loaded asynchronously as CSV from a GitHub repository via `d3.csv`, and each bar’s value is displayed as a tooltip using SVG `<title>` elements. The chart includes formatted tick labels using `d3.format` to abbreviate large numbers.

Ppraneeth.d555@gmail.com

76% match

Loading thumbnail…

Enzo

A bar chart displays the percentage values of two variables, perc1 and perc2, for 14 named categories loaded from CSV files. The visualization initially renders perc1 as pink bars, with a small blue circle in the corner serving as an interactive control. Hovering over the circle temporarily recolors all bars blue, while clicking triggers an elastic transition that smoothly animates each bar to its perc2 value, with staggered delays. The code uses d3.csv for data loading, d3.scaleLinear and d3.scaleBand for axes, and transition.attr with d3.easeElastic for the animated updates.

Aalansmithy

76% match