Skip to main content
SimilarExport ZIP
100%

Fork of Scatter Plot Reusable - ICE7

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

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.

AI-generated description
MIT Licensed

Similar vizzes

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
96% 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
93% 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
93% 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
90% 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
88% 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
86% match
Loading thumbnail…

Fork of Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG data set. It uses D3 v5 with SVG rendering, employing `scaleLinear`, `axisBottom`, and `axisLeft` to construct axes. Circles represent individual car models, with a red fill and partial opacity, conveying density. The code loads data via `csv` and builds the chart using margins, a title, and axis labels.

Jjt23346059@gmail.com
85% 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
84% match