🌍 Public
Fork of Fork of Fork of Fork of reusable scatter plot
119h61a05c9@cvsr.ac.in
Last edited Oct 26, 2025
Created on Oct 26, 2025
Forked from 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.
AI-generated descriptionReusable Scatter Plot - Car Dataset
This project demonstrates a reusable D3.js scatter plot visualization using modular JavaScript architecture.
Features
- Reusable Chart Component: Modular scatter plot function with configurable parameters
- Auto-Rotation: Automatically switches between different axis configurations every 2 seconds
- Clean Architecture: Separated concerns with dedicated modules for data processing, chart rendering, and control logic
File Structure
index.html- Main HTML fileindex.js- Application entry pointscatterPlot.js- Reusable scatter plot componentchartController.js- Chart rendering and rotation logicdataProcessor.js- CSV data loading and processingdata.csv- Car dataset (horsepower and MPG)
Usage
Run a local server in the project directory:
MIT Licensed
Comments
Sign in to join the discussion.