Skip to main content
SimilarExport ZIP
100%

ICE-7

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

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.

AI-generated description
MIT Licensed

Similar vizzes

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
93% 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
92% 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
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
90% match
Loading thumbnail…

ICE7

A scatter plot of 40 cars from a small CSV dataset maps horsepower on the x-axis against miles per gallon on the y-axis. Each circle is colored by cylinder count (4, 6, or 8) using a Tableau10 ordinal scale, with a legend in the top-right corner. The visualization uses D3 v6's `scaleLinear`, `axisBottom`, `axisLeft`, and `selectAll().join()` pattern within a reusable chart module. Axis labels identify both variables, and the title font is set via the Share Tech Google Font.

Vvarshitreddy02@gmail.com
89% match
Loading thumbnail…

scatter plot ICE-7

A scatter plot of 120 cars from the classic fuel-economy dataset, with axes, color, and point size mapped to numeric and categorical columns via dropdown menus. The D3 v7 reusable component uses `d3.scaleLinear`, `d3.scaleSqrt`, and `d3.scaleOrdinal` with `d3.schemeTableau10`, rendering SVG circles with animated transitions. Grid lines, axes, tooltips, and legends update dynamically when the user selects different columns.

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

ICE-6 Scatter Plot

This interactive scatter plot explores relationships between numeric attributes of cars from the auto-mpg dataset, such as horsepower, weight, and acceleration. Users select which columns appear on the x- and y-axes via two dropdown menus built with a reusable `dropdownMenu` function. The plot is rendered as SVG using D3 v5 scales, axes, and a custom `scatterPlot` module, with circles sized at a radius of 10 pixels. The code demonstrates a modular pattern for combining menu-driven selection with d3’s `csv` data loading and linear scaling.

RRevanthGrreddy
87% match