Skip to main content
SimilarExport ZIP
100%

ICE--7

✓ Published0🌍 Public
Aashishkommanaveni05@gmail.com
Last edited Mar 30, 2026
Created on Mar 30, 2026
Forked from Fork of D3 Starter

This scatter plot visualizes the relationship between engine size and fuel mileage for 30 cars from a dataset, with points colored by fuel type. The visualization uses D3 v7 with an SVG rendering approach, implementing a reusable scatter plot function that reads the CSV data manually. It uses `d3.scaleLinear` for both axes, `d3.scaleOrdinal` with `d3.schemeTableau10` for color encoding, and `d3.axisBottom` and `d3.axisLeft` for tick marks, with a legend showing fuel type categories.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ICE 7 Scatter Plot

This scatter plot visualizes the relationship between car engine size and fuel efficiency for 15 car models, using a color-coded circle for each model. D3.v7 loads and parses the CSV, then uses `d3.scaleLinear` for both axes and `d3.scaleOrdinal` to assign vivid colors per car model. The SVG rendering includes labeled axes, axis labels generated via `d3.axisBottom` and `d3.axisLeft`, and hover tooltips that display model details.

Ssaisathwikaguntupalli@gmail.com
90% match
Loading thumbnail…

ICE 7 Scatter Plot

This D3.js scatter plot shows the relationship between car engine size and fuel efficiency, with each circle representing a car model and positioned by engine displacement (liters) and miles per gallon. A categorical color scale maps each car model to a unique vivid color, and the visualization includes hover tooltips for detailed values. The code uses d3.csv to load data, d3.scaleLinear for axes, d3.axisBottom and d3.axisLeft for rendering, and D3 selections with enter/append for creating SVG circles, set against a gradient background within a styled card layout.

Ssaisathwikaguntupalli@gmail.com
90% match
Loading thumbnail…

ICE 7 Resuable scatter plot Ar

A scatter plot visualizes the relationship between engine size and fuel efficiency for 15 car models, revealing a general trend toward lower MPG as engine displacement increases. Each model is represented by a colored circle with a distinct categorical color, and interactive tooltips display details on hover. The visualization uses D3 v7 with SVG rendering, employing `d3.csv` for data loading, `d3.scaleOrdinal` for color assignment, and `d3.axisBottom` and `d3.axisLeft` for axes. Data is sourced from an inline CSV file.

Ccharchana0527@gmail.com
89% match
Loading thumbnail…

ICE--7

This visualization displays the distribution of fuel types among 30 cars, using a pie chart generated from a CSV dataset. The chart shows the proportional share of each category, such as Gas, Electric, Hybrid, and Diesel, with a legend providing counts. It is built with D3 v7, using `d3.csvParseRows` to load and parse the data, `d3.rollups` to count occurrences, and `d3.pie` and `d3.arc` to construct the slices and labels. The SVG is rendered with a Tableau10 color scheme, and the chart is positioned on an 850x500 pixel canvas.

Aashishkommanaveni05@gmail.com
88% match
Loading thumbnail…

ICE6 Q2 scatter plot

This scatter plot displays the relationship between engine size (in liters) and fuel efficiency (in miles per gallon) for 100 cars across ten brands, with each point colored by manufacturer. The D3.js v7 visualization uses `d3.csv` to load the data, `d3.scaleLinear` for both axes, and `d3.scaleOrdinal` with `d3.schemeCategory10` to color-code the brands, rendering as an SVG with axes, labels, and a legend.

Aakshayamsgrad@gmail.com
88% match
Loading thumbnail…

ICE-7 Q1 for car data

This scatter plot visualizes the relationship between engine size (liters) and fuel efficiency (mpg) for car models across ten brands, using color to distinguish each manufacturer. It shows the expected tradeoff: larger engines generally achieve lower fuel efficiency. The visualization is built with D3.js, using reusable chart components with `d3.scaleLinear` for the x and y axes, `d3.scaleOrdinal` with `d3.schemeTableau10` for color encoding, and `d3.axisBottom`/`d3.axisLeft` for ticks. The data comes from a local CSV file, rendered as an SVG with circles and a stacked legend.

Aakshayamsgrad@gmail.com
88% match
Loading thumbnail…

Fork of ICE 7 Resuable scatter plot Ar

This scatter plot visualizes the relationship between engine size and fuel efficiency for 15 car models, showing a general trend of lower MPG as engine displacement increases. Each data point is a filled circle colored uniquely per car model from a custom palette. The D3.js v7 code loads data from a CSV file, maps engine size (x-axis) and MPG (y-axis) to linear scales, and renders axes, labels, and hover tooltips via `d3.axisBottom`, `d3.axisLeft`, and `.on('mouseover')`. The chart is drawn in SVG within a styled HTML container.

Ssaisathwikaguntupalli@gmail.com
87% match
Loading thumbnail…

ICE7

A scatter plot of 40 cars from a small CSV dataset maps horsepower on the x-axis against miles per gallon on the y-axis. Each circle is colored by cylinder count (4, 6, or 8) using a Tableau10 ordinal scale, with a legend in the top-right corner. The visualization uses D3 v6's `scaleLinear`, `axisBottom`, `axisLeft`, and `selectAll().join()` pattern within a reusable chart module. Axis labels identify both variables, and the title font is set via the Share Tech Google Font.

Vvarshitreddy02@gmail.com
87% match