Skip to main content
SimilarExport ZIP
100%

Fork of Reusable D3 Scatter Plot

✓ Published0🌍 Public
Mmaddineni2112@gmail.com
Last edited Oct 27, 2025
Created on Oct 27, 2025

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example presents a reusable D3 scatter plot that visualizes tech product data, mapping price, rating, sales volume, and customer reviews. The plot automatically cycles through these attributes every two seconds, updating the x-axis and data points. It uses D3’s `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `scaleOrdinal` APIs for axes and color. Implemented as a configurable chart function, it demonstrates a reusable pattern with `.join()` for creating and updating SVG circles and legend items, with data loaded from a CSV file.

AAmrit Adhikari
88% match
Loading thumbnail…

Fork of reusable scatter plot

A reusable scatter plot cycles every two seconds between horsepower and miles-per-gallon axes for a 20-row car dataset. Built with D3 v6, it uses a reusable chart function with getter-setters for width, margin, and accessor functions. The SVG renders axes, labels, and steelblue circles with hover tooltips via appended title elements, while a setInterval reassigns xValue and yValue to flip the variables. The chart removes and recreates the SVG on each update, producing an animated axis-switching visualization.

119h61a05c9@cvsr.ac.in
88% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This scatter plot visualizes vintage car data, mapping engine size against horsepower with D3’s `scaleLinear`, `axisLeft`, and `axisBottom`. The visualization animates by cycling through four variables—car age, mileage, engine size, and horsepower—on the x-axis every two seconds using `setInterval`. Each point is rendered as an SVG circle with a fixed radius, and the chart updates the x-axis domain and circles accordingly. Data is loaded asynchronously from a CSV via `d3.csv` and parsed into numeric values.

MM
87% match
Loading thumbnail…

Q1. Reusable D3 Scatter Plot

This interactive scatter plot visualizes car sales data, showing the relationship between price and various numerical attributes. The visualization cycles through three different x-axis variables—Horsepower, Mileage, and Year—every two seconds, keeping price on the y-axis. Built with D3.js (v6.7.0), the reusable `scatterPlot` module creates an SVG chart with animated transitions, axes, and a grid. Data is loaded from a CSV file using `d3.csv` and displayed as circles with a consistent fill color, with detected numeric columns automatically selected for the axes.

Mmaddineni2112@gmail.com
87% match
Loading thumbnail…

Fork of Fork of Fork of Fork of reusable scatter plot

This example shows a reusable D3.js scatter plot of a small car dataset, comparing horsepower and miles per gallon. A controller module updates the chart every two seconds, automatically swapping which attribute appears on the x- and y-axes. The visualization uses a modular `scatterPlot()` component with getter-setters, building an SVG with `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`. Data loads from a local CSV via `d3.csv`, and each point is rendered as a circle with an opacity of 0.8.

119h61a05c9@cvsr.ac.in
87% match
Loading thumbnail…

Fork of Reusable Scatter Plot (ICE-7)

This animated scatter plot explores BMW car sales data by cycling through four quantitative variables—engine size, mileage, price, and sales volume—on the x-axis every three seconds. Using D3.js v6 modules such as `scaleLinear`, `scaleOrdinal`, and `axisBottom`, each vehicle is rendered as a symbol based on fuel type, colored via `schemeCategory10`. The code constructs a reusable `scatterPlot` component with getter-setter methods, and the animation is driven by `setInterval` calling the SVG selection’s `.call()` method.

Sskmriyaz0786@gmail.com
86% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This fork of a reusable D3 scatter plot visualizes car specifications from a CSV dataset, plotting engine size against horsepower with circle size encoding mileage and color encoding car age using `d3.scaleOrdinal` and `d3.schemeCategory10`. The chart is constructed with `d3.scaleLinear` for x and y axes, `d3.axisBottom` and `d3.axisLeft` for scales, and `d3.csv` for asynchronous data loading. A separate `scatterPlot.js` module defines a reusable chart factory with configurable accessors for dimensions, margins, and radius, following the "Towards Reusable Charts" pattern.

MM
86% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example shows a reusable scatter plot that maps categorical car models on the x-axis to their numeric prices on the y-axis using blue circular marks. Built with D3 v6, it employs `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` for tick rendering. The chart is rendered as SVG, with a title and rotated x-axis labels. Sample data is embedded in the code for demonstration.

Nnagalakshmibadineedi2@gmail.com
86% match