Skip to main content
SimilarExport ZIP
100%

ICE-7

✓ Published0🌍 Public
Vvydeeshm@gmail.com
Last edited Oct 25, 2025
Created on Oct 25, 2025
Forked from HTML Starter

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.

AI-generated description
MIT Licensed

Similar vizzes

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
92% 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
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
89% match
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
88% match
Loading thumbnail…

ICE 7

This visualization displays a scatter plot of automobile data from the UCI Auto MPG dataset, mapping miles per gallon against horsepower. Points are colored by origin, with point size encoding vehicle weight, and hovering reveals the car name via tooltip. Built with the vega-lite-api and D3’s csv loader, it renders using vega-lite’s markCircle, with axes customized to remove domain lines and configure tick and label styling.

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

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

ice7 part1

This interactive scatter plot visualizes the relationship between horsepower and MPG for a sample of cars from the Cars dataset, encoding each vehicle’s weight through circle radius and origin through color (USA, Japan, Europe). Using D3.js v7, the code builds SVG axes and circles, mapping quantitative scales for horsepower, MPG, and weight, while color categories are hardcoded. Hovering a circle reveals a tooltip with the car’s specific measurements, implemented via D3’s event handling and the `d3.select` API.

Jjammigumpula.priyanka193@gmail.com
87% match