Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Fork of Fork of reusable scatter plot

✓ Published2🌍 Public
119h61a05c9@cvsr.ac.in
Last edited Oct 26, 2025
Created on Oct 26, 2025

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 description

Reusable 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 file
  • index.js - Application entry point
  • scatterPlot.js - Reusable scatter plot component
  • chartController.js - Chart rendering and rotation logic
  • dataProcessor.js - CSV data loading and processing
  • data.csv - Car dataset (horsepower and MPG)

Usage

Run a local server in the project directory:

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of reusable scatter plot

This example presents a reusable D3.js (v6) scatter plot for visualizing the relationship between horsepower and miles per gallon in a car dataset. The scatter plot dynamically alternates between the two axes every two seconds, flipping which variable appears on the x-axis versus the y-axis. Implemented with a modular controller and a configurable scatter plot function, the chart reads data from a CSV file and renders as an SVG. The animation effectively demonstrates how the same data points reveal different correlation patterns depending on axis assignments.

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

Fork of Fork of Fork of reusable scatter plot

This animated scatter plot displays the relationship between horsepower and miles per gallon across 20 car models from a CSV dataset, alternately swapping the x- and y-axes every two seconds. Built as a reusable D3.js v6 module, it uses `scaleLinear`, `axisBottom`, `axisLeft`, and `select` to render SVG circles with tooltips. A `setInterval` timer triggers re-rendering of the chart with swapped accessor functions, while axis labels update dynamically based on the current orientation.

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

Fork of Fork of reusable scatter plot

This reusable scatter plot visualizes the relationship between horsepower and miles per gallon for 20 cars, with a 2-second interval animation that swaps the axes. Built with D3 v6, the chart uses `d3.scaleLinear`, `d3.extent`, `d3.axisBottom`, and `d3.axisLeft` to render SVG circles with tooltips, while a reusable `scatterPlot()` factory function manages the configurable width, height, margin, and accessor functions. The animation is driven by `setInterval` reassigning the x and y value accessors and re-rendering via `.call(plot)`.

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

Fork of Reusable D3 Scatter Plot

This scatter plot visualizes relationships in automobile performance data, comparing miles per gallon against vehicle attributes including weight, horsepower, displacement, and acceleration. Each point is colored using a plasma interpolator based on horsepower, and the x-axis automatically cycles through different attribute comparisons every three seconds. The visualization uses the reusable chart pattern from D3 v6, combining scaleLinear, extent, axisBottom, axisLeft, and transition-based animation. Data comes from a CarPerformance CSV dataset hosted on raw GitHub.

Ssowjanya
89% 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
89% 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
88% match