Skip to main content
SimilarExport ZIP
100%

Alankruth

✓ Published0🌍 Public
AAlankruthSai
Last edited Mar 5, 2022
Created on Mar 5, 2022

This example displays a horizontal bar chart of units sold by country, using a dataset loaded from a CSV file. The chart renders as SVG within a React component, with D3.js handling data loading, scales, and axes. It uses `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and maps data to `<rect>` elements. Grid lines and axis tick labels are generated from the scales' tick values. The visualization is built with React hooks (`useState`, `useEffect`) and updates once the CSV data is fetched and parsed.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Santhosh Dachepally

This horizontal bar chart displays the top ten countries by sales from a CSV dataset loaded via D3’s `csv` function. The React app renders an SVG with D3’s `scaleBand` for country categories and `scaleLinear` for sales values, drawing green rectangles for each bar. Tick marks and labels are generated using D3’s scale methods, with the chart centered in the viewport. The code uses React hooks (`useState`, `useEffect`) to fetch and process the data, and ReactDOM to mount the visualization.

Ssanthoshdachepally333@gmail.com
78% match
Loading thumbnail…

Axes with react and d3

This example shows a horizontal bar chart of country populations in 2020, rendered as SVG with React. It loads CSV data via `d3.csv` and manages the asynchronous state with React hooks (`useState` and `useEffect`). The chart uses `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis, with manually drawn tick marks and labels. The data comes from a GitHub Gist, and the visualization updates once the data is fetched and stored in React state.

MmohitPassan
77% match
Loading thumbnail…

bar chart

This example shows a horizontal bar chart of sales figures per salesperson, with labeled x-axis ticks and y-axis categories. It loads CSV data from a remote gist using `d3.csv`, then renders the visualization as SVG with React components. The chart uses `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for the numeric x-axis, and `d3.max` to determine the domain. Grid lines are drawn for each tick value, and bars are positioned and sized using the scales’ range and bandwidth.

JJack Elsey
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
77% match
Loading thumbnail…

ACT-7_TASK-1

This example shows a horizontal bar chart of 2020 population figures by country, rendered as an SVG in React. It imports D3 v5 modules for data loading (`csv`), scales (`scaleBand`, `scaleLinear`), and formatting, while custom React components (`AxisBottom`, `AxisLeft`, `Marks`) handle the visualization. The chart uses a linear population axis and a banded country axis, with axis labels and tick formatting converting billions to a readable "B" suffix. Data is loaded asynchronously from a CSV source, and the visualization responds with a loading state until ready.

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

Untitled

This example shows a horizontal bar chart of population by country, using SVG rendered through React. The chart maps country names to the y-axis with a band scale and population values to the x-axis with a linear scale, displaying tick labels formatted in billions. It constructs axes manually with React components and the d3-scale API, while formatting tick values using d3.format. The data is loaded asynchronously with the d3.csv function.

Yyuridrcosta
77% match
Loading thumbnail…

Untitled

This example displays a horizontal bar chart of weapon exporter values by country for 2017. The React app fetches CSV data from a GitHub gist using D3’s `csv` loader, then renders the chart as an SVG. Bar lengths are scaled with `scaleLinear`, while the categorical country labels use `scaleBand` with padding. Axes are custom React components (`AxisBottom`, `AxisLeft`) that iterate over D3 scale ticks and domains to draw lines and text.

Ppjdhungana@gmail.com
76% match