Skip to main content
SimilarExport ZIP
100%

Reusable scatter plot

✓ Published0🌍 Public
AAparna Desi Reddy
Last edited Mar 25, 2026
Created on Mar 25, 2026
Forked from HTML Starter

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

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

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

reusable scatter plot likitha

This reusable scatter plot displays sales trends over time, rendering day and sales data from a CSV file as red circles on a steelblue line chart. Built with D3.js v6, the visualization uses `d3.csv` to load the dataset, `scaleLinear` for both axes, and `axisBottom`/`axisLeft` for tick marks. The line is generated with a `d3.line` path, while the scatterPlot function exposes setters for width, height, data, and radius, making the chart customizable. SVG output is styled with the Share Tech font.

Aaddalalikitha15@gmail.com
78% 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
78% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

A reusable D3 scatter plot cycles through four numeric car-sales variables—mileage, engine size, year of manufacture, and price—on the x-axis while price stays on the y-axis, updating every 2.5 seconds with an animated transition. Built using `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom`, it renders SVG circles from a Kaggle CSV and re-invokes the chart function to swap axes. The code demonstrates a modular `scatterPlot` factory pattern with setter methods for width, height, data, and accessors.

Mmaddineni2112@gmail.com
77% match
Loading thumbnail…

Reusable Scatter Plot

A reusable scatter plot visualizes the relationship between trading dataset attributes, cycling through variable pairs every three seconds. Built with D3 v6, it uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render axes and SVG circles. The chart animates by dynamically updating its `xValue` and `yValue` accessors, demonstrating the flexibility of a chainable scatter plot function. Data loads from a CSV via `d3.csv` with numeric parsing.

UUday Kiran
77% match