Skip to main content
SimilarExport ZIP
100%

ICE7

✓ Published0🌍 Public
Ssrinathkarumuru@my.unt.edu
Last edited Oct 27, 2025
Created on Oct 27, 2025

This scatter plot maps car engine size against price using the d3.csv loader and a linear scale for each axis. The SVG rendering includes axes formatted with currency ticks and labeled plot areas, with data points drawn as steel-blue circles. The chart filters out rows with invalid or zero values before plotting, and the dataset is loaded from a remote CSV file.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ICE7

This interactive scatter plot visualizes relationships between numeric attributes of cars from a CSV dataset. Users can select different x- and y-axis columns from dropdown menus to explore correlations. The visualization is built with D3 v7 using SVG rendering, featuring smooth 400ms transitions when data points move between positions. Tooltips display car names and axis values on hover, while the reusable `scatterPlot()` function demonstrates configurable chart design with adjustable scales, margins, labels, and point symbols.

SSainathreddypotu@gmail.com
87% match
Loading thumbnail…

ICE-7

This interactive scatter plot displays 120 car records from a CSV file, plotting attributes like horsepower, MPG, weight, and displacement against each other. Users can dynamically select which numeric column drives the x-axis, y-axis, point size, and categorical color (cylinders, origin, or year) via dropdown menus. The visualization, rendered as an SVG using D3 version 7, updates axes, gridlines, and legends in real time. Point radius is scaled with `d3.scaleSqrt` to encode area proportionally, while a hover tooltip shows details about individual cars.

Vvydeeshm@gmail.com
87% 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
87% match
Loading thumbnail…

ICE 7 Scatter Plot

This scatter plot visualizes the relationship between car engine size and fuel efficiency for 15 car models, using a color-coded circle for each model. D3.v7 loads and parses the CSV, then uses `d3.scaleLinear` for both axes and `d3.scaleOrdinal` to assign vivid colors per car model. The SVG rendering includes labeled axes, axis labels generated via `d3.axisBottom` and `d3.axisLeft`, and hover tooltips that display model details.

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

ICE_7 Scatter Plot

This animated scatter plot uses D3.js to visualize relationships among numeric car attributes, cycling through pairs of columns like horsepower, price, curb weight, city mpg, engine size, and highway mpg every 3.5 seconds. Circles are colored by drive wheel type via a categorical scale, with axes, labels, and a title updating smoothly through D3 transitions. The data comes from a remote CSV file, and the visualization fills the browser window, using D3 scales, axes, and ordinal color encoding to render the SVG animation.

AAbhiramPudi@my.unt.edu
85% match
Loading thumbnail…

ICE-7

This interactive scatter plot compares car models by horsepower, MPG, weight, and origin, using drop-down menus to switch the x- and y-axis variables and toggle point size encoding. D3 v7 builds the SVG visualization, applying scaleLinear, scaleSqrt, and scaleOrdinal with a Tableau10 color scheme to map data attributes. Points animate in via transition, and hover tooltips, powered by mouseover events, reveal car details. The legend groups points by origin, while drop-down selections trigger chart redraws through reusable configuration accessors.

Vvydeeshm@gmail.com
84% match