ice7_task1

100%

✓ Published0🌍 Public

Last edited Oct 26, 2025

Created on Oct 26, 2025

A reusable scatter plot displays car price versus miles per gallon, with each dot representing a vehicle and colored via a random Tableau10 palette entry. The chart is built as a configurable JavaScript function using D3 v7, employing `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to render axes and SVG circles for data points. Data loads from a remote CSV file via `d3.csv` with `d3.autoType`, and tooltips show car model and brand on hover. The visualization highlights the relationship between vehicle cost and fuel efficiency across the Cars dataset.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE_7_Nirupama_Scatterplot

This scatterplot displays the relationship between mileage (MPG) and price for a dataset of cars, with each point colored by brand using a Tableau10 ordinal scale. The reusable component pattern in `index.js` builds the SVG chart with D3 v7, using `d3.scaleLinear` for both axes and `d3.axisBottom`/`d3.axisLeft` for ticks. Hover tooltips appear via the SVG `title` element, showing the car model, mileage, price, and brand. Data loads from a raw GitHub Gist CSV file, processed with `d3.csv` and `d3.autoType`. The legend, positioned to the right, lists all brand categories with matching colors.

NNirupama Karanam

85% match

Loading thumbnail…

Scatter Plot by Mohith

This scatter plot displays the relationship between a car's fuel efficiency (MPG) and its price, with each point colored by brand according to a Tableau10 ordinal scale. The visualization uses D3.js v7's `d3.scaleLinear` for both axes and `d3.axisBottom`/`d3.axisLeft` for ticks, while gridlines are generated via a custom `tickSize` call. Data from the CSV file is loaded using `d3.csv` with `d3.autoType`, and interactive tooltips are added through SVG `circle` elements with appended `title` text. A legend and title are drawn directly onto the SVG.

Kkmohithkumar7@gmail.com

85% match

Loading thumbnail…

ice7_task3

An area chart displays the average car price per year, drawn as a smooth steel-blue filled region with an overlaid line and dots for readability. It uses D3 v7 with SVG rendering, grouping a CSV dataset of cars by `Year` and computing the mean `Price` via `d3.rollups`. Scales (`d3.scaleLinear`), axes (`d3.axisBottom`, `d3.axisLeft`), and generators (`d3.area` with `d3.curveMonotoneX`) structure the visualization, with axes labeled for year and average price in USD.

Kkmohithkumar7@gmail.com

84% match

Loading thumbnail…

Scatter Plot

This scatter plot visualizes a car dataset, showing fuel efficiency versus price with points colored by car type. Built as a reusable D3.js chart function, it uses `d3.scaleLinear` for both axes, `d3.scaleOrdinal` with `d3.schemeSet2` for categorical colors, and SVG circles with hover tooltips. The data is loaded from a CSV file via `d3.csv` with `d3.autoType`, and rendered in an SVG container with axes generated using `d3.axisLeft` and `d3.axisBottom`.

RRamdas Dheeraj

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

84% match

Loading thumbnail…

ice_7 , question 1

This scatter plot visualizes the relationship between car price and kilometers driven, with each circle representing a car model. The data is loaded from a CSV file using D3’s `d3.csv` method. Points are positioned using dynamic linear scales for the x- and y-axes, and hovering reveals a tooltip with the car’s model year and kilometers driven. The SVG uses a `viewBox` for responsive scaling, and the chart includes axis labels for the two dimensions. Styling is applied via CSS for clarity and accessibility, with the visualization powered by the D3 v7 library loaded from a CDN.

Sshailajat1998@gmail.com

83% match

Loading thumbnail…

Scatter plot

This interactive scatter plot displays the relationship between car mileage and price, with individual dots colored by fuel type. Built with D3.js (v7), it renders as an SVG chart with axes, labels, and a hover tooltip that reveals the car name, fuel, mileage, and price. The visualization loads a CSV dataset from a GitHub gist, uses `d3.scaleOrdinal` for color mapping, and applies CSS transitions to highlight dots on hover.

Ccharchana0527@gmail.com

83% match

Loading thumbnail…

ICE-7 Reusable Scatterplot

This reusable scatter plot, built with D3.js, visualizes the cars dataset, plotting Mileage on the x-axis and Price on the y-axis, with each point colored by car brand (Honda, Mercedez, Ferrari). The chart includes labeled axes, a legend, and a title, all rendered as SVG. The visualization animates by cycling through the dataset's numeric columns (disp, Mileage, hp, Price) as the x-value every two seconds, demonstrating the chart's reusability through a configurable `scatterPlot` function that leverages D3's `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs.

Mmanojgne

82% match