Skip to main content
SimilarExport ZIP
100%

reusable scatter plot by umesh

✓ Published1🌍 Public
Uuguggila@gitam.in
Last edited Oct 26, 2025
Created on Oct 26, 2025

This reusable scatter plot visualizes the relationship between horsepower and top speed for 150 cars, with points colored by brand category (economy, luxury, or sports). Hovering over a point reveals a tooltip with the category and axis values. Built with D3 v7, the chart uses a custom `scatterPlot()` function that accepts configurable accessors for x, y, and color values, along with axis labels. The SVG output includes gridlines, ordinal color scaling, and data loaded from a CSV via `d3.csv`, demonstrating a modular visualization pattern.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

reusable scatter plot ice 7

This reusable scatter plot compares Horsepower against Top Speed for 150 car models, with color encoding distinguishing Economy, Luxury, and Sports brand categories. The visualization is built using D3 v7’s selection, scaleLinear, scaleOrdinal, and axis APIs, rendering SVG circles with tooltips and gridlines. Data is loaded as CSV from a GitHub gist and parsed with d3.csv. The chart is implemented as a configurable closure-based function, allowing callers to set accessors for x, y, color, and axis labels via method chaining.

Uuguggila@gitam.in
90% match
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
84% match
Loading thumbnail…

Q1_Reusable D3 Scatter Plot

This reusable scatter plot visualizes car sales data, showing the relationship between horsepower and price, with color encoding car make and bubble size representing mileage. The chart includes interactive tooltips that display detailed values on hover. Built with D3 v7, it uses `d3.scaleLinear` for axes, `d3.scaleSqrt` for bubble size, and `d3.scaleOrdinal` with `schemeTableau10` for categorical colors. Data comes from a Kaggle CSV loaded via `d3.csv`, rendered as SVG elements within a reusable component function.

Mmaddineni2112@gmail.com
84% 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
83% match
Loading thumbnail…

reusable scatter plot

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.

119h61a05c9@cvsr.ac.in
83% 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
83% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight using a dataset of car names loaded from a CSV file. The chart renders as an SVG with D3.js v7, mapping horsepower to the x-axis and weight to the y-axis using linear scales. Each data point is drawn as a circle with a fixed radius, and axis labels are appended to clarify the variables. The visualization employs D3's `scaleLinear`, `axisBottom`, and `axisLeft` APIs to construct the plot, with margins and dimensions set programmatically to produce a clean, reusable layout.

Rreddysushma994@gmail.com
83% match
Loading thumbnail…

Kumar-Reusable-Scatter

This reusable scatter plot displays the relationship between horsepower and miles per gallon for ten car models, using orange-red circles positioned by linear scales. Built with d3.v7 and the reusable chart pattern, the module encapsulates configurable accessor functions, axis labels, dimensions, and color through chainable setters. The visualization loads car_performance.csv via d3.csv with d3.autoType, filters for valid numeric values, and renders an SVG with d3.axisBottom and d3.axisLeft, updating circles through the join pattern.

KKumar Danam
82% match