ICE_7_Nirupama_Scatterplot

100%

ICE_7_Nirupama_Scatterplot

✓ Published0🌍 Public

Last edited Oct 25, 2025

Created on Oct 24, 2025

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork_ICE_6_Nirupama

This interactive scatter plot visualizes the relationship between car mileage (MPG) and price, with each point colored by car color. The chart uses D3 v7 and loads data from a GitHub Gist, presenting an SVG rendered via a viewBox for responsiveness. Users can hover over points to see details. The visualization employs d3.scaleLinear for axes, d3.scaleOrdinal for categorical colors from ColorBrewer, and d3.csv for data loading, with a d3-legend for the color key.

NNirupama Karanam

88% match

Loading thumbnail…

ice7_task1

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.

Kkmohithkumar7@gmail.com

85% match

Loading thumbnail…

ICE_7_NIRUPAMA_PIECHART

This pie chart visualizes the distribution of cars by brand, where each slice's angle represents the count of cars for that brand. The chart is rendered as an SVG using D3 v7, with data aggregated from a CSV file via `d3.csv` and `d3.autoType`, then grouped using `d3.rollup`. Slices are drawn with `d3.arc`, colored using a Tableau10 categorical scale, and labeled with brand names. An interactive legend on the right lists each brand alongside its count, with color swatches matching the slices.

NNirupama Karanam

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

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

83% match

Loading thumbnail…

ICE_7_NIRUPAMA_AREACHART

This area chart displays the average car price per year, aggregated from a Cars.csv dataset. It uses D3 v7's `d3.csv` and `d3.rollup` to process the data, then renders an SVG area chart with `d3.area` and `d3.scaleLinear`. The chart includes axes, gridlines, and labeled axis titles, with interactive tooltips on data points showing the year, average price, and model count.

NNirupama Karanam

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

81% match

Loading thumbnail…

ICE_5_Nirupama

This example loads a cars dataset from a raw GitHub gist and presents an overview with summary statistics, a preview table of the first 10 rows, and a bar chart counting cars by color. It uses D3 v7 to parse the CSV, compute aggregated values with `d3.rollup`, and render the chart as an SVG with `d3.scaleBand` and `d3.scaleLinear`. Data is displayed in an HTML table, and the visualization includes styled axes and color-coded bar fills.

NNirupama Karanam

81% match