Fork of React & D3 Starter

100%

Fork of React & D3 Starter

✓ Published0🌍 Public

Last edited Mar 7, 2026

Created on Mar 7, 2026

This example visualizes EV range and price trends across 2020–2023 as a combined bar chart and line chart. Steelblue bars encode driving range against a left axis, while a red line shows average price against a right axis. The visualization is built with React and D3 v7, using `d3.csv` to load the dataset, `scaleBand` and `scaleLinear` for axes, and `d3.line` to generate the price path. It renders as an SVG with `axisBottom`, `axisLeft`, and `axisRight` for multi-scale comparison.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of React & D3 Starter

This bar chart displays the average electric range for different car manufacturers, using a dataset of recorded ranges. Built with React and D3.js v7, it renders an SVG graphic with steel blue bars. The chart uses D3 scales, `d3.csv` for data loading, and `d3.axisBottom` and `d3.axisLeft` to create the axes from the provided CSV file containing Make and ElectricRange values.

SSadvik

87% match

Loading thumbnail…

Fork of React & D3 Vibecoding Starter

This visualization shows the average car price by brand using a bar chart, with data loaded from a CSV file containing car specifications. The chart uses D3 scales (scaleBand and scaleLinear) to map brands and prices, and renders bars with a gradient fill. Bars animate upward with a bounce ease on initial render, and the chart includes axes, labels, and a tooltip that appears on hover. The React app manages the visualization lifecycle through hooks, and D3 handles the SVG rendering and transitions.

Kkovuribalanagavinay@gmail.com

85% match

Loading thumbnail…

Fork of React & D3 Starter

This scatterplot shows the relationship between the base price and electric range of various electric vehicles, with each orange circle representing a model. The chart plots price on the x-axis and range on the y-axis, revealing clusters and outliers among Tesla, Lucid, Ford, and other brands. The visualization is built using React and D3 v7, loading data from a CSV file via `d3.csv`. It employs `d3.scaleLinear` for axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and appends circles to the SVG using `d3.select` and `.enter()`.

SSadvik

83% match

Loading thumbnail…

Fork of React & D3 Vibecoding Starter

This example shows a React and D3 bar chart of BMW sales volumes across different models, using data loaded from a CSV file and rendered as SVG. The chart displays the average sales volume for each car model, with interactive bars that highlight and dim upon selection. It uses D3 v7 APIs such as `scaleBand`, `scaleLinear`, `axisBottom`, and `axisLeft` within a React component structure. The implementation leverages a `ResizeObserver` for responsive dimensions and D3 joins for rendering the bars and axes.

Ssaiabhishekmunnangi@gmail.com

81% match

Loading thumbnail…

Fork of barchart

This example visualizes the relationship between vehicle type and average price, displaying aggregated price totals as horizontal bars. It shows a bar chart comparing price values across different vehicle categories. The visualization is built using React with D3 v5, specifically employing d3.csv for data loading, d3.scaleBand and d3.scaleLinear for axes scaling, and d3.axisBottom/axisLeft for axis rendering. The chart renders as an SVG with hover effects on bars, and data comes from a CSV file listing vehicle types and their corresponding prices.

Mmadipadiga.raviteja@gmail.com

80% match

Loading thumbnail…

Fork of E22 - axis with react and d3

This example shows a horizontal bar chart of trip volumes by region, rendered as an SVG with React components managing the visualization’s state and layout. The code loads CSV data via `d3.csv`, scales the bars with `d3.scaleBand` and `d3.scaleLinear`, and manually generates axis ticks and gridlines using `d3.axis`-style logic. React’s `useState` and `useEffect` hooks handle asynchronous data fetching, while D3 utilities compute the maximum value and tick positions for the chart.

VVanessa

80% match

Loading thumbnail…

Fork of React & D3 Starter

A multi-line chart displays coffee shop performance over 150 days, tracking sales, profit, and customer counts as three colored paths (red, blue, green) against shared day and value axes. The example loads data from a CSV file using d3.csv, converts values to numbers, and renders the lines with d3.line, scaling positions with d3.scaleLinear and adding d3.axisBottom and d3.axisLeft. The visualization is built within a React component using refs and the d3-selection library, outputting to SVG.

Rrevanthdasari10@gmail.com

80% match

Loading thumbnail…

Fork of React & D3 Starter

This example combines a bar chart and line chart to compare solar and wind energy production from 2000 to 2182, sampling every tenth year for clarity. It uses React for the DOM structure and D3 v7 for SVG rendering, with `d3.scaleBand` positioning the bars, `d3.scaleLinear` mapping the y-axis, and `d3.line` drawing the wind energy trend overlaid with circular points. The data comes from a CSV file, and the chart includes gridlines, axis labels, and a legend to distinguish the two series.

Ppvvaishnavi93@gmail.com

80% match