Reusable scatter plot

100%

Reusable scatter plot

✓ Published0🌍 Public

Last edited Mar 28, 2026

Created on Mar 25, 2026

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

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

95% 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

80% match

Loading thumbnail…

SG

A scatter plot shows the relationship between energy output and monthly users for EV charging stations. Each circle represents a station, with color encoding city and size encoding the number of charging ports. The visualization uses D3.js v7 with SVG rendering, loading data from a gist URL and parsing it with `d3.csvParse`. Axes are created with `d3.axisBottom` and `d3.axisLeft`, while point size uses `d3.scaleSqrt` and color uses `d3.scaleOrdinal` with `d3.schemeTableau10`. A tooltip displays station details on mouseover.

Sshreelasya.bezawada@gmail.com

79% match

Loading thumbnail…

pie chart

This pie chart visualizes the distribution of electric vehicle (EV) sales by year, with each slice labeled by year, sales volume in thousands, and its percentage of the total. The chart is rendered as an SVG using D3 v7, with slices generated via `d3.pie()` and `d3.arc()`. Color encoding uses `d3.scaleOrdinal` with the Tableau10 scheme. A legend and in-slice text labels are added manually. The data comes from a remote CSV file loaded via `d3.csv`.

AAparna Desi Reddy

79% match

Loading thumbnail…

line chart

This interactive line chart displays EV charging station metrics across stations, letting users toggle between charging ports, average charge time, daily users, and monthly energy consumption via a dropdown menu. The visualization uses D3 v7 to load CSV data from a GitHub gist, sort stations by ID, and render an orange line with red point markers. Smooth transitions animate point position updates when switching metrics, while hover tooltips reveal station details. The chart includes gridlines, axis labels, and a cleaned axis without domain lines.

Llohitsai62@gmail.com

78% match

Loading thumbnail…

Reusable Scatter plot

This reusable scatter plot visualizes car horsepower, miles per gallon, cylinder count, and displacement from a CSV dataset, animating through these columns every second. Built with D3 v6, it uses a custom `scatterPlot` function with `scaleLinear`, `scaleOrdinal`, `axisLeft`, and `axisBottom` to render SVG marks. Data points appear as distinct symbols and colors, with axes and labels updating dynamically via `setInterval` and the `svg.call(plot)` pattern.

NNanditha Reddy

77% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This scatter plot visualizes 50 rows of real car data, mapping horsepower on the x-axis and miles per gallon on the y-axis, with points colored and shaped by the car’s origin using `d3.scaleOrdinal` with `d3.schemeTableau10` and `d3.symbol` types. Built with D3 v7, it renders an SVG with axes, labels, and a legend, loading data via `d3.csv` from a GitHub gist. The reusable chart pattern exposes setter methods for configurable dimensions and accessor functions.

SSainathreddypotu@gmail.com

77% match

Loading thumbnail…

D3 reusable scatter plot

This interactive scatter plot visualizes car sales data loaded from a CSV file, letting users select which columns drive the x and y positions, point size, and color. The reusable chart component, built with D3 v7, exposes getter-setters for its scales, axes, and tooltip formatter. It applies d3.scaleLinear, d3.scaleSqrt, and either d3.scaleSequential or d3.scaleOrdinal for encoding, while cleaning numeric values to handle currency, percentages, and parentheses. Rendering is SVG-based, with interactive hover tooltips.

Mmaddineni2112@gmail.com

77% match