Skip to main content
SimilarExport ZIP
100%

sainath potu ice7

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

This interactive scatter plot visualizes a sample of 50 cars, plotting horsepower against miles per gallon (MPG). Built with D3 v7, the chart uses a reusable scatter plot factory pattern and renders points as SVG symbols with smooth transitions. Users can hover over any point to see a tooltip displaying the car’s name, origin, and exact x/y values. The visualization loads data from a remote CSV file, with axes, labels, and point styling all configured through chainable JavaScript functions.

AI-generated description
MIT Licensed

Similar vizzes

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

scatter plot 7

This scatter plot visualizes the relationship between horsepower and fuel efficiency (MPG) for a small sample of cars, with each point representing a vehicle and a tooltip revealing its name. Built with D3.v7, the reusable `scatterPlot` function from `scatterPlot.js` uses `scaleLinear` and `axisBottom`/`axisLeft` to map the data to SVG coordinates. The `index.html` file demonstrates the chart with a static dataset, rendering circles via a D3 selection join, though the primary focus is on the configurable chart generator.

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

Q6

This scatter plot visualizes car performance by plotting horsepower against highway MPG for various makes, with points colored by category (Economy, Standard, Luxury, Sports). The visualization uses D3 v7 to create SVG elements, including axes, labels, and a legend, with data initially defined as a sample array. The example demonstrates basic D3 data binding, scales, and SVG rendering, but does not load the provided CSV dataset or use the separate canvas-based bar chart code in index.js.

GGOPI MUPPURI
83% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This scatter plot visualizes 50 rows of real car data, mapping horsepower on the x-axis and miles per gallon on the y-axis, with points colored and shaped by the car’s origin using `d3.scaleOrdinal` with `d3.schemeTableau10` and `d3.symbol` types. Built with D3 v7, it renders an SVG with axes, labels, and a legend, loading data via `d3.csv` from a GitHub gist. The reusable chart pattern exposes setter methods for configurable dimensions and accessor functions.

SSainathreddypotu@gmail.com
83% 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
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