Skip to main content
SimilarExport ZIP
100%

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

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

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.

AI-generated description
MIT Licensed

Similar vizzes

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
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
94% 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
93% 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 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
90% match
Loading thumbnail…

Fork of Fork of reusable scatter plot kumar danam

This reusable scatter plot visualizes the relationship between horsepower and miles per gallon using a dataset of cars. Written with d3.v6, the component maps the data to circular SVG elements, with axes and labels generated via d3.axisBottom and d3.axisLeft. The visualization alternately swaps the x and y axes every three seconds, animating how the data can be interpreted from different perspectives.

KKumar Danam
87% 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…

Fork of Fork of Scatter Plot Reusable - ICE7

This example presents a reusable scatter plot that visualizes the relationship between car weight and horsepower, using data from a CSV file. The plot displays each car as a point with labeled axes for both variables. The implementation uses D3 v7, demonstrating a modular approach with a scatterPlot function imported from a separate JavaScript module. The main script parses numeric values from the cars dataset and applies the reusable chart to an SVG element, with the chart configured to map weight to the x-axis and horsepower to the y-axis.

118121a1545
86% match