ICE7-3

100%

✓ Published0🌍 Public

Last edited Oct 28, 2025

Created on Oct 28, 2025

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE7-2b

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.

SSainathreddypotu@gmail.com

91% 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

86% 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

86% match

Loading thumbnail…

ICE 7 Area Chart (Sai Kaushik Ganji)

An area chart maps vehicle horsepower against fuel efficiency, using a filled line plot to reveal a general downward trend where higher-power vehicles tend to be less efficient, with a notable exception for electric models. The D3.js v7 visualization loads data from a CSV file, sorts it, and uses SVG rendering with `d3.scaleLinear` for axes, `d3.axisBottom` and `d3.axisLeft` for gridlines, and custom tooltip logic for interactivity. The chart includes labeled axes, a responsive layout, and hover effects to display precise data points.

SSai Kaushik Ganji

86% match

Loading thumbnail…

Fork of Area Chart ice-7

This area chart displays the relationship between horsepower and miles per gallon for a set of cars, with a filled green region showing how MPG decreases as horsepower increases. The visualization loads a CSV file from GitHub using `d3.csv`, converts the numeric fields, and sorts the data by horsepower. It uses `d3.scaleLinear` for both axes, `d3.area` to generate the filled path, and `d3.axisBottom` and `d3.axisLeft` to render the coordinate axes. The SVG output is styled with CSS for a clean presentation.

Ssowjanya

85% 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

85% 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

85% 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

84% match