Skip to main content
SimilarExport ZIP
100%

reusable scatter plot ice 7

✓ Published0🌍 Public
Uuguggila@gitam.in
Last edited Oct 26, 2025
Created on Oct 26, 2025

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

reusable scatter plot by umesh

This reusable scatter plot visualizes the relationship between horsepower and top speed for 150 cars, with points colored by brand category (economy, luxury, or sports). Hovering over a point reveals a tooltip with the category and axis values. Built with D3 v7, the chart uses a custom `scatterPlot()` function that accepts configurable accessors for x, y, and color values, along with axis labels. The SVG output includes gridlines, ordinal color scaling, and data loaded from a CSV via `d3.csv`, demonstrating a modular visualization pattern.

Uuguggila@gitam.in
90% 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…

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
85% match
Loading thumbnail…

ICE 7 Reusable Scatter Plot (Sai Kaushik Ganji)

A reusable D3 scatter plot displays the relationship between Horsepower and Fuel Efficiency, with points colored and shaped by vehicle segment. The chart reads from the local `vehicles.csv` file using `d3.csv` and `d3.autoType`. It builds an SVG using `d3.select`, `d3.scaleLinear` for axes, and `d3.scaleOrdinal` to map categories to colors from `d3.schemeSet2` and symbol types from `d3.symbolCircle`, `d3.symbolSquare`, `d3.symbolTriangle`, and `d3.symbolDiamond`. Axes are drawn with `d3.axisBottom` and `d3.axisLeft`, and data points are rendered via `d3.symbol` with a size of 100, including a legend listing each segment.

SSai Kaushik Ganji
85% 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
85% match
Loading thumbnail…

Q1_Reusable D3 Scatter Plot

This reusable scatter plot visualizes car sales data, showing the relationship between horsepower and price, with color encoding car make and bubble size representing mileage. The chart includes interactive tooltips that display detailed values on hover. Built with D3 v7, it uses `d3.scaleLinear` for axes, `d3.scaleSqrt` for bubble size, and `d3.scaleOrdinal` with `schemeTableau10` for categorical colors. Data comes from a Kaggle CSV loaded via `d3.csv`, rendered as SVG elements within a reusable component function.

Mmaddineni2112@gmail.com
84% match
Loading thumbnail…

Reusable Scatter Plot with d3.js

This example creates a reusable scatter plot of sample car data, showing each vehicle’s horsepower against its miles per gallon via colored SVG circles. The visualization uses d3.scaleLinear for both axes, d3.axisBottom and d3.axisLeft for gridlines, and d3.selectAll with data binding to append circles. A color map assigns distinct hues per car make, and each circle includes a title element for hover tooltips. The chart is generated by a configurable createScatterPlot function that accepts container, dimensions, and data keys as options.

VVinay Vemuri
84% match
Loading thumbnail…

ICE-7 Reusable Scatterplot

This reusable scatter plot, built with D3.js, visualizes the cars dataset, plotting Mileage on the x-axis and Price on the y-axis, with each point colored by car brand (Honda, Mercedez, Ferrari). The chart includes labeled axes, a legend, and a title, all rendered as SVG. The visualization animates by cycling through the dataset's numeric columns (disp, Mileage, hp, Price) as the x-value every two seconds, demonstrating the chart's reusability through a configurable `scatterPlot` function that leverages D3's `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs.

Mmanojgne
84% match