Fork of Ayush - Assignment 7

100%

Fork of Ayush - Assignment 7

✓ Published0🌍 Public

Last edited Apr 10, 2024

Created on Apr 10, 2024

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.

AI-generated description

The data visualized is from dataset "EV_Data" which was used in the 2nd assignment. [Source]: "https://www.kaggle.com/datasets/fatihilhan/electric-vehicle-specifications-and-prices"

The graph represents a scatter plot of electric vehicles, where the driving range is plotted against price. X-axis represents the driving range of the vehicle on a single charge in kilometers. Y-axis represents the price of the electric vehicle in Germany.

Each point on the scatter plot represents a different electric vehicle model, with distinct colors indicating different car brands. The visualization aims to provide insights into how the driving range of electric vehicles correlates with their price, offering potential buyers a visual comparison among various models. By hovering over any point on the plot, users can see additional details about each vehicle, such as the brand, exact driving range, and price, enhancing the interactivity and informational value of the graph.

Edit: Added an interactive legend of the 10 cars in the dataset in order of their occurance.

MIT Licensed

Similar vizzes

Loading thumbnail…

Ayush - Assignment 7

This animated scatter plot visualizes electric vehicle specifications from a Kaggle dataset, plotting driving range in kilometers against price in euros for models in Germany. Each circle represents a vehicle, colored by brand using a D3 ordinal scale with the Tableau10 scheme. Interactive tooltips display car name, range, and price on hover. A legend built with D3 selection methods allows clicking a brand to highlight its vehicles by adjusting circle opacity. The visualization uses D3 scales, axes, and transitions to present the correlation between range and price.

Sshindeayush76@gmail.com

87% match

Loading thumbnail…

Ayush - First Visual (EV Data)

This scatter plot shows the relationship between driving range and price for electric vehicles in Germany, using color saturation to encode efficiency and revealing a general trend where longer-range vehicles tend to cost more in euros. Built with D3.js, the visualization uses `scaleLinear` for both axes, `axisBottom` and `axisLeft` for ticks, and `circle` elements with `colorScale` mapping efficiency from teal to purple. The data comes from a Kaggle dataset on electric vehicle specifications and prices, with missing "NA" values appearing as points outside the main plot margins.

Sshindeayush76@gmail.com

83% match

Loading thumbnail…

EV

This interactive scatter plot visualizes the relationship between driving range and price for 35 electric vehicle models, with each point colored by brand. The chart maps driving range (km) on the x-axis against price (EUR) on the y-axis, using a clean, animated scatter layout that reveals price-range correlations across the EV market. Hovering over any point displays a tooltip with the car model, brand, exact range, and price, while an interactive legend highlights the 10 cars in order of appearance in the dataset. The animation adds a temporal reveal effect as points appear sequentially. The data comes from the EV_Data dataset (source: Kaggle), and the visualization is rendered as an interactive D3.js animation, with the code licensed under MIT.

NNita

81% match

Loading thumbnail…

Fork of Parallel Coordinates with Brushing EV Data (Ayush)

This example visualizes electric vehicle specifications across multiple quantitative axes, including Efficiency, Price, Range, Top Speed, and Acceleration. Users can brush along any axis to filter the displayed data, highlighting car models that fall within selected ranges while dimming others. The visualization uses D3.js with `scalePoint` and `scaleLinear` to map each dimension, and `transition` with eased opacity to animate filtered lines in and out. Categorical data, such as car brand, determines the color of each path via `scaleOrdinal` and `schemeCategory10`. The dataset appears to be from a custom EV data package, and the chart updates responsively using the `observeResize` helper.

Sshindeayush76@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

77% match

Loading thumbnail…

ACTIVITY6_Ques3

This scatter plot visualizes the range in kilometers for electric vehicles from five brands (Tesla, BMW, Nissan, Kia, Hyundai) using a categorical x-axis and linear y-axis. Each car is represented by a distinct symbol (circle, square, triangle, diamond, cross) and color per brand, showing the distribution of ranges across brands. The visualization is built with D3 v7, using d3.scalePoint for the categorical positioning, d3.scaleLinear for the range axis, and d3.symbol to generate the custom glyphs. Data comes from the uploaded ElectricCarData_Clean.csv file, rendered as SVG elements within a static HTML page.

Kkbhavithareddy06@gmail.com

77% match

Loading thumbnail…

Fork of Akhil -vizhub assignment bat-scatter

This visualization displays the total price of vehicles aggregated by vehicle type as a horizontal bar chart, showing how sales values compare across categories. The bars are rendered as SVG rectangles with a green fill, with the x-axis representing the summed price and the y-axis listing vehicle types. The code uses D3’s `scaleBand` and `scaleLinear` to map data, `axisBottom` and `axisLeft` for axes, and React’s `useState` and `useEffect` hooks to load and process the CSV data from the provided URL. The chart is rendered via ReactDOM, with axes and labels positioned manually.

Rrobertotienonyaranga@gmail.com

75% match

Loading thumbnail…

Fork of vehicles Scatter Plot

A jittered strip plot shows the distribution of vehicle prices for each drive type (FWD, RWD, AWD), with semi-transparent dots colored by category. Hovering reveals tooltips with year, make, model, price, and fuel type. The visualization uses d3.csv to load data from a GitHub gist and renders circles via SVG, with d3.scaleBand and d3.scaleLinear for axes and d3.axisLeft/axisBottom for grid lines and ticks.

Ssaisathwikaguntupalli@gmail.com

75% match