Skip to main content
SimilarExport ZIP
100%

ICE7-2b

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

This visualization shows the relationship between horsepower and fuel efficiency (MPG) for a subset of 50 cars from a CSV dataset. A tomato-colored line, generated with `d3.line()` and smoothed using `curveMonotoneX`, connects data points sorted by horsepower to reveal the overall trend. The chart renders as SVG using D3 v7, with linear scales for both axes and blue circles representing individual car data points. Interactive tooltips appear on mouseover, displaying each car's name, horsepower, and MPG values.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ICE7-3

This area chart visualizes the relationship between horsepower and fuel efficiency (MPG) for a sample of 50 cars from a CSV dataset. It uses D3.js v7 to render an SVG graphic, with a monotone cubic curve (`d3.curveMonotoneX`) forming the filled area and overlaid blue circles for individual data points. Tooltips on hover display the car name, horsepower, and MPG. Axes are labeled for 'Horsepower' and 'Miles per Gallon (MPG)', with the chart title indicating the dataset's scope.

SSainathreddypotu@gmail.com
91% match
Loading thumbnail…

ICE 7 Line Chart (Sai Kaushik Ganji)

This line chart visualizes the relationship between horsepower and fuel efficiency across 24 vehicle models, with fuel efficiency plotted on the y-axis and horsepower on the x-axis using linear scales. The visualization includes interactive hover tooltips that display details for individual data points. Built with D3 v7, the code uses d3.csv() with d3.autoType to parse the vehicles.csv data, d3.scaleLinear() for both axes, and d3.axisBottom()/d3.axisLeft() to render the grid lines and axis ticks. The SVG rendering approach includes a fixed-position tooltip element that responds to mouse events.

SSai Kaushik Ganji
84% match
Loading thumbnail…

ICE7-1-VarshaG

This interactive scatter plot explores the relationship between fuel efficiency (mpg) and horsepower across vehicles, with color mapped to origin and point size to weight. It renders the 398 cars from the UCI Auto MPG dataset using the vega-lite-api library, building a single circle mark with tooltips for names. The visualization adapts to the full viewport, and the accompanying vega-tooltip handler displays each vehicle's details on hover.

VVReddy913
84% 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
83% 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
83% 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
82% 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
82% 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
82% match