Skip to main content
100%

Fork of Fork of Scatter Plot Reusable - ICE7

✓ Published0🌍 Public
118121a1545
Last edited Oct 24, 2025
Created on Oct 24, 2025

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Scatter Plot Reusable - ICE7

A reusable scatter plot shows the relationship between car weight and horsepower, using a dataset loaded from a CSV file. The chart is built with D3 v7 and rendered as SVG, with axes labeled accordingly. The code defines a `scatterPlot` function that configures accessor functions for the x and y data fields, and the chart is instantiated and applied to an SVG element using `d3.select` and the chart's `.data()` method.

118121a1545
96% match
Loading thumbnail…

Fork of reusable Fork of Scatter Plot - ICE7

This scatter plot visualizes the relationship between vehicle weight and horsepower using a synthetic dataset of 100 cars. The chart uses D3.js v7 with a reusable `scatterPlot()` function component, rendered as an SVG. The x-axis represents weight in pounds, while the y-axis shows horsepower, with each car plotted as a semi-transparent steel-blue circle. The code demonstrates D3's modular design by using method chaining with `.data()`, `.x()`, `.y()`, and label setters, along with `d3.scaleLinear()` for axis scaling and `d3.axisBottom()` and `d3.axisLeft()` for tick marks.

Jjanisha30gowda@gmail.com
92% match
Loading thumbnail…

reusable Fork of Scatter Plot - ICE7

This example shows a reusable scatter plot of the cars dataset, mapping Horsepower against Weight for 100 cars. It uses a custom `scatterPlot()` function built with D3 v7 that configures linear scales, axes, and circle elements via method chaining. The SVG chart is rendered with `d3.axisLeft`, `d3.axisBottom`, and `d3.extent` to compute domains, while `d3.select().call()` applies the chart to the selection. Data is loaded from an external CSV file and converted to numeric values before plotting.

Jjanisha30gowda@gmail.com
92% match
Loading thumbnail…

Scatter Plot Reusable - ICE7

This reusable scatter plot shows the relationship between car weight and horsepower across 100 vehicles from a synthetic cars.csv dataset. The chart renders SVG circles positioned by D3 linear scales, with axes labeled to clarify the correlation. The code uses a reusable chart function pattern with getter-setter methods, D3 v7’s data join for circles, and d3.axisBottom/d3.axisLeft for the axes. The tooltip-free visualization primarily demonstrates how to build a modular, configurable scatter plot component.

Jjanisha30gowda@gmail.com
89% 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
89% 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 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
86% match
Loading thumbnail…

Fork of Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars, with each red semi-transparent circle representing a vehicle. The code uses D3 v5’s `csv`, `scaleLinear`, `axisBottom`, and `axisLeft` to load data from the UCI Auto MPG dataset and render an SVG chart. Axes include tick marks and labels, while a title and rotated y-axis label are manually positioned. Filtering and data type conversion occur before rendering, matching the original example’s styling and layout.

AAlexandre Pinho
85% match