Skip to main content
SimilarExport ZIP
100%

reusable scatter plot

✓ Published1🌍 Public
119h61a05c9@cvsr.ac.in
Last edited Oct 26, 2025
Created on Oct 26, 2025
Forked from D3 Starter

This reusable scatter plot displays the relationship between horsepower and miles per gallon for a small car dataset, with each point representing a vehicle. The D3.js v6 code defines a configurable `scatterPlot()` function with getter-setters for dimensions and data mappings. It loads the comma-separated values file using `d3.csv()`, converts numeric fields, and renders an SVG chart with `d3.scaleLinear` extents, `d3.axisBottom`, `d3.axisLeft`, and labeled axes. Circle elements include interactive tooltips via SVG `title` elements, with styling for opacity and color.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Reusable Scatter Plot with d3.js

This example creates a reusable scatter plot of sample car data, showing each vehicle’s horsepower against its miles per gallon via colored SVG circles. The visualization uses d3.scaleLinear for both axes, d3.axisBottom and d3.axisLeft for gridlines, and d3.selectAll with data binding to append circles. A color map assigns distinct hues per car make, and each circle includes a title element for hover tooltips. The chart is generated by a configurable createScatterPlot function that accepts container, dimensions, and data keys as options.

VVinay Vemuri
90% match
Loading thumbnail…

Reusable Scatter plot

A reusable scatter plot displays the relationship between horsepower and miles per gallon for the Auto MPG dataset, filtering out records with missing values. The D3 v7 component uses a configurable factory pattern with getter-setter methods for width, height, margins, radius, and fill color, applied via selection.call(). Linear scales map the data extent to the SVG canvas, with circles rendered through a data join and axes drawn using axisLeft and axisBottom. The chart includes textual labels for both axes and a title.

SSreedevi Itta
89% 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
89% match
Loading thumbnail…

Scatter Plot

This scatter plot displays the relationship between miles per gallon and horsepower for various car models, with each point representing a vehicle. The visualization uses D3.js v6 within a React framework to scale and position circles on an SVG canvas. The code employs `scaleLinear`, `axisLeft`, and `axisBottom` to construct axes and plot the data, which is loaded from a CSV file. The visualization also includes axis labels, a title, and a semi-transparent steelblue fill for the circles.

Nnsadath
88% match
Loading thumbnail…

reasuable saatter plot

This reusable scatter plot, built with D3 v7, displays the relationship between car horsepower and fuel efficiency (MPG) for a small dataset. It is implemented as a configurable JavaScript function that accepts data, value mappings, and visual properties via a fluent API. The visualization uses D3's `scaleLinear` for axes, `symbol` shapes for data points, and `axisBottom`/`axisLeft` for tick marks. The example also demonstrates a second implementation using D3 v6 that loads the classic Iris dataset from a CSV file and maps species to different point symbols.

Aadithiarikatla@gmail.com
88% match
Loading thumbnail…

Scatter Plot Ex

This scatter plot displays the relationship between miles per gallon and horsepower for a dataset of automobiles, with each vehicle represented as a translucent steelblue circle. The visualization uses D3.js version 5 with SVG rendering, employing `d3.scaleLinear` with `d3.extent` for domain scaling and `d3.axisLeft`/`d3.axisBottom` to generate axes with gridlines. Data is loaded asynchronously from a CSV file via `d3.csv` and coerced to numeric values before rendering. The chart includes formatted tick labels and custom axis and title text, though placeholder labels ("XXXXX") remain in the current implementation.

LLex
88% match
Loading thumbnail…

Cars scatter plot

A scatter plot displays the relationship between horsepower and miles per gallon for a dataset of cars, with each point representing an individual vehicle. The visualization uses D3 v5’s `scaleLinear`, `axisLeft`, and `axisBottom` to map values and render gridlines, while circles are appended to an SVG element. Data is loaded asynchronously from a CSV file via `d3.csv` and parsed into numeric fields before being plotted.

AAnthony-coding
87% match
Loading thumbnail…

Cars scatter plot

A scatter plot displays the relationship between horsepower and miles per gallon for a dataset of cars, with each point representing an individual vehicle. The visualization uses D3 v5’s `scaleLinear`, `axisLeft`, and `axisBottom` to map values and render gridlines, while circles are appended to an SVG element. Data is loaded asynchronously from a CSV file via `d3.csv` and parsed into numeric fields before being plotted.

AAnthony-coding
87% match