Electric Vehicle Data Reusable D3 Scatter Plot

Electric Vehicle Data Pie Chart

This pie chart illustrates the distribution of electric vehicles by type, with a sample dataset drawn from the Electric_Vehicle_Data.csv file. Two slices are displayed, likely showing the proportion of Battery Electric Vehicles (BEVs) versus Plug-in Hybrid Electric Vehicles (PHEVs) across the dataset. The visualization is built using the Vue.js framework and D3.js version 6.7.0, with the `pie` and `arc` generator functions from the D3 library to construct the chart's geometry. The SVG-based pie slices and percentage labels are rendered with a custom color scale, and the chart includes interactive hover effects that adjust slice opacity and stroke width. A legend, also built with the same dataset, accompanies the visualization to provide clarity on the categories. The chart is styled with the Share Tech font family and is displayed on a responsive canvas with a white background and subtle shadow.

87% match

Electric Vehicle Data Line Chart

This line chart visualizes the average electric range of electric vehicles aggregated by model year. Built with Vue and D3.js, it uses `d3.csv` to load the dataset, `d3.rollup` and `d3.mean` for aggregation, and `d3.scaleLinear`, `d3.line`, and `d3.axisBottom`/`d3.axisLeft` to render the SVG line and axes. The chart shows a general upward trend in range across model years, with data sourced from the Electric_Vehicle_Data.csv file.

84% match

Washington State Electric Vehicles

A scatter plot examines Washington State electric vehicles, plotting model year against electric range in miles. Each circle represents a vehicle, colored by battery electric versus plug-in hybrid type, with a color legend and hover tooltips. The visualization uses React with D3 v5, employing `scaleLinear`, `scaleOrdinal`, and the `csv` loader to parse local data and render SVG marks.

Reusable scatter plot

This reusable scatter plot shows the relationship between EV sales and charging station counts, with each point colored by year via a Tableau10 ordinal scale. The visualization is built with D3 v7, using `d3.csv` to load EV adoption data from a remote GitHub gist, then rendering SVG circles through a configurable `renderScatterPlot` function. The axes are generated with `d3.axisBottom` and `d3.axisLeft`, while the scales are defined using `d3.scaleLinear` with automatic domain extension and nicening. The reusable design accepts data accessor functions and label strings, making the chart adaptable to different datasets and variables.

AAparna Desi Reddy

Electric Vehicle Data Area Chart

The visualization displays the number of electric vehicles registered per model year using an area chart with an overlaid line. The chart aggregates Washington State EV registration data from a CSV file, counting vehicles by year using d3.rollup. Built with Vue and D3 6.7.0, it renders SVG elements via d3.area and d3.line generators, with axes created using d3.axisBottom and d3.axisLeft. The teal-colored area emphasizes the trend in EV adoption across model years.

Electric Vehicle Adoption Trends

This dashboard animates the adoption of electric vehicles across multiple countries, visualizing annual sales of Battery Electric Vehicles (BEV) versus Plug-in Hybrid Electric Vehicles (PHEV). It presents the data through three coordinated SVG charts: a bubble chart where bubble size encodes sales volume, a grouped bar chart comparing powertrains by year, and a heatmap showing the same data with color intensity. Interactive tooltips display precise year, powertrain, and sales figures on hover. The visualization uses D3 v7 APIs such as `d3.scaleLinear`, `d3.scaleBand`, `d3.scaleOrdinal`, `d3.scaleSqrt`, and `d3.groups` to process and render the CSV data.

Vvemulasai306@gmail.com

Reusable scatter plot

This reusable scatter plot visualizes the relationship between charging stations and EV sales across multiple years, with each dot colored by year using the Tableau10 color scheme. The code loads CSV data via `d3.csv` and renders an SVG chart with `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and `d3.scaleOrdinal` for categorical coloring. The reusable `renderScatterPlot` function accepts configurable accessors and labels, demonstrating a flexible pattern for embedding charts in different contexts.

AAparna Desi Reddy

78% match