Scatter Plot Reusable - ICE7

100%

Scatter Plot Reusable - ICE7

✓ Published2🌍 Public

Last edited Oct 24, 2025

Created on Oct 23, 2025

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.

AI-generated description

MIT Licensed

Similar vizzes

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

91% match

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

90% 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

89% match

Loading thumbnail…

Scatter plot ICE-7

This is a reusable scatter plot built with D3 v7 that visualizes 120 car records from a CSV file, showing relationships between four numeric variables (horsepower, MPG, weight, displacement) with matching dropdown controls. Users can reassign each axis, the color encoding (by cylinders, origin, or year), and the point size (by weight, horsepower, or displacement) dynamically. The point areas are scaled via `d3.scaleSqrt`, colors use `d3.scaleOrdinal` with Tableau schemes, and SVG dots update with data joins, grid lines, axes, and an interactive tooltip.

Vvydeeshm@gmail.com

88% match

Loading thumbnail…

ICE7

This example shows a reusable scatter plot that maps engine weight to horsepower for a small dataset of vehicles. The visualization uses D3.js v7 to render SVG circles and axes, with scales for the x and y dimensions. The code builds a configurable chart function that accepts setters for width, height, data, margins, and radius, demonstrating a modular pattern for reusable visualizations. The implementation relies on `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.extent` to handle the mapping and axis generation.

MM Hema

87% 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

86% match

Loading thumbnail…

reusable scatter plot ice 7

This reusable scatter plot compares Horsepower against Top Speed for 150 car models, with color encoding distinguishing Economy, Luxury, and Sports brand categories. The visualization is built using D3 v7’s selection, scaleLinear, scaleOrdinal, and axis APIs, rendering SVG circles with tooltips and gridlines. Data is loaded as CSV from a GitHub gist and parsed with d3.csv. The chart is implemented as a configurable closure-based function, allowing callers to set accessors for x, y, color, and axis labels via method chaining.

Uuguggila@gitam.in

85% match