Skip to main content
SimilarExport ZIP
100%

ICE 7 Reusable Scatter Plot (Sai Kaushik Ganji)

✓ Published0🌍 Public
SSai Kaushik Ganji
Last edited Oct 24, 2025
Created on Oct 23, 2025

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ICE 7 Reusable scatter plot (Sai Kaushik Ganji)

This interactive scatter plot shows car sales data, displaying price in thousands of USD against horsepower for individual vehicles, with point size reflecting engine size and color/shape encoding vehicle type. The visualization uses D3.js v7’s `d3.csv` to load and parse the Car_sales dataset, and employs `d3.scaleLinear`, `d3.scaleSqrt`, and `d3.scaleOrdinal` to map numeric and categorical variables. Marks are generated using `d3.symbol()` with varying symbol shapes, including circles, crosses, and triangles, demonstrating a reusable charting function that separates configuration from rendering.

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

ICE-7 Harshith Mullapudi

This scatter plot shows the relationship between horsepower and miles per gallon for a small set of six cars, using a reusable chart function built with D3.js v7. The SVG rendering includes linear scales for both axes, axis labels, and semi-transparent steelblue circles. The code demonstrates a custom `scatterPlot()` function that returns a chart closure, handling margins, scales, and axes internally, then applies it via `selection.datum()` and direct function invocation. The dataset is embedded in the script, and the visualization explicitly labels its axes with “Horsepower” and “Miles per Gallon.”

HHarshithmullapudi@my.unt.edu
87% 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
Loading thumbnail…

ICE 7 Scatter Plot

This D3.js scatter plot shows the relationship between car engine size and fuel efficiency, with each circle representing a car model and positioned by engine displacement (liters) and miles per gallon. A categorical color scale maps each car model to a unique vivid color, and the visualization includes hover tooltips for detailed values. The code uses d3.csv to load data, d3.scaleLinear for axes, d3.axisBottom and d3.axisLeft for rendering, and D3 selections with enter/append for creating SVG circles, set against a gradient background within a styled card layout.

Ssaisathwikaguntupalli@gmail.com
85% match
Loading thumbnail…

Fork of ICE 6 Scatter Plot (Sai Kaushik Ganji)

This scatter plot visualizes the relationship between vehicle horsepower and price, using point size to encode sales volume and color to distinguish vehicle type. Built with D3.js v7, the visualization renders data from a bundled Car_sales.csv file as an SVG. The plot includes labeled axes, a hover tooltip for detailed inspection, and separate legends for the color-coded vehicle categories and size-scaled sales figures. The implementation uses D3's selection and scale APIs to map the dataset fields to visual encodings.

Kkhushburajan2015@gmail.com
85% 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
85% 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