Skip to main content
SimilarExport ZIP
100%

Fork of React & D3 Starter

✓ Published0🌍 Public
SSadvik
Last edited Mar 7, 2026
Created on Mar 7, 2026
Forked from 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()`.

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

Fork of React & D3 Starter

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.

SSadvik
83% match
Loading thumbnail…

Fork of Ayush - Assignment 7

This scatter plot displays the correlation between driving range and price for electric vehicles, sourced from a Kaggle EV_Data dataset. Each point represents a vehicle model, with color encoding car brands from Germany. The chart is built with React and D3, using `d3.scaleLinear` for both axes and rendering as an SVG. Hovering reveals details like brand, exact range, and price. An interactive legend lists the ten car brands in order of occurrence.

Sshindeayush76@gmail.com
82% 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
79% match
Loading thumbnail…

Fork of ICE 7 1Q Sharanya

This scatter plot visualizes electric vehicle data, showing the relationship between average range in miles and average price in USD, with each point colored by vehicle segment. It displays a legend mapping the Tableau10 color scheme to vehicle categories. The visualization is built using D3 v7, loading data from a CSV file via `d3.csv` and rendering as an SVG. It uses `d3.scaleLinear` for both axes, `d3.scaleOrdinal` for color encoding, and `d3.axisBottom` and `d3.axisLeft` for the axes.

Cchengalvasharanya@gmail.com
78% match
Loading thumbnail…

Electric Vehicle Data Reusable D3 Scatter Plot

This reusable D3.js scatter plot visualizes electric vehicle data, mapping model year on the x-axis against electric range on the y-axis, with color distinguishing Battery Electric Vehicles (BEVs) from Plug-in Hybrid Electric Vehicles (PHEVs). Built with Vue and rendered as SVG, it uses `d3.csv` to load the dataset, `scaleOrdinal` for color encoding, and `scaleLinear` with `axisBottom` and `axisLeft` for axes. The implementation follows a reusable chart pattern via a `scatterPlot` function, with interactive hover effects that increase stroke width and opacity.

Mmeangreen0067@gmail.com
78% match
Loading thumbnail…

sketch with D3

This scatter plot visualizes the relationship between car price and mileage, with each circle representing a vehicle and its color indicating fuel type (Petrol, Diesel, Hybrid, or Electric). Using D3 v7, the code loads data from an external CSV file, converts numeric fields, and renders an SVG with linear scales for both axes. The visualization includes labeled axes, a title, and a custom legend built from the distinct fuel types. d3.csv fetches the data, while d3.scaleLinear and d3.scaleOrdinal handle the positional encoding and categorical color mapping respectively, with d3.axisBottom and d3.axisLeft generating the tick marks.

BBismark Kofi Owusu Sarfo
78% match
Loading thumbnail…

Fork of sketch with D3

A scatter plot visualizes the relationship between car mileage and price, with points colored by fuel type (Petrol, Diesel, Hybrid, Electric). Using D3 v7, the code loads data from a CSV file via `d3.csv`, maps values to numeric types, and renders an SVG with `d3.scaleLinear` axes, `d3.axisBottom` and `d3.axisLeft` labels, and a legend built from unique fuel types. The x-axis begins at zero, while the y-axis domain is padded by 10% to improve point visibility.

BBismark Kofi Owusu Sarfo
78% match