Skip to main content
SimilarExport ZIP
100%

Fork_ICE_6_Nirupama

✓ Published0🌍 Public
NNirupama Karanam
Last edited Oct 19, 2025
Created on Oct 19, 2025

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.

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

Fork of ICE 6 Scatter Plot (Sai Kaushik Ganji)

This scatter plot visualizes the relationship between vehicle horsepower and price, using point size to encode sales volume and color to distinguish vehicle type. Built with D3.js v7, the visualization renders data from a bundled Car_sales.csv file as an SVG. The plot includes labeled axes, a hover tooltip for detailed inspection, and separate legends for the color-coded vehicle categories and size-scaled sales figures. The implementation uses D3's selection and scale APIs to map the dataset fields to visual encodings.

Kkhushburajan2015@gmail.com
83% match
Loading thumbnail…

Fork of ICE 7 1Q Sharanya

This scatter plot visualizes electric vehicle data, showing the relationship between average range in miles and average price in USD, with each point colored by vehicle segment. It displays a legend mapping the Tableau10 color scheme to vehicle categories. The visualization is built using D3 v7, loading data from a CSV file via `d3.csv` and rendering as an SVG. It uses `d3.scaleLinear` for both axes, `d3.scaleOrdinal` for color encoding, and `d3.axisBottom` and `d3.axisLeft` for the axes.

Cchengalvasharanya@gmail.com
82% match
Loading thumbnail…

ICE_6 scatter plot_Nirupama

This scatter plot visualizes the relationship between Horsepower and Price_in_thousands for car models, with Sales_in_thousands encoded as circle size and Vehicle_type as color. The SVG visualization uses d3.v7 with a linear x-scale for horsepower, a linear y-scale for price, and a sqrt scale for the size encoding. Interactive hover tooltips reveal model-specific details. Data comes from Car_sales.csv, rendered with grid lines and axis labels. Color and size legends provide contextual mapping.

NNirupama Karanam
81% match
Loading thumbnail…

Fork of ICE-7 Reusable Scatterplot

This interactive scatterplot visualizes a car dataset, plotting various numerical attributes like mileage, price, horsepower, and displacement against each other in an animated loop. The visualization includes a legend with colored markers for car brands (Honda, Mercedes, Ferrari) and dynamically updates the x-axis every two seconds to cycle through data attributes. Built with D3.js, the code uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` for chart construction, and `setInterval` for animation. The data is loaded via `csv()` from a remote CSV file, with SVG rendering handling all graphical elements.

Mmanojgne
81% match
Loading thumbnail…

Fork of VarshaICE7

This visualization displays automobile data from the UCI Machine Learning Repository’s Auto MPG dataset as a scatter plot, mapping fuel efficiency (mpg) against horsepower, with point size encoding vehicle weight and color marking the country of origin. The chart is built using the vega-lite-api library, which wraps Vega-Lite and Vega, and renders interactively with tooltips showing car names. Data is loaded asynchronously via d3.csv from a remote Gist, while the visualization is configured with custom fonts and axes for improved readability. The layout fits the browser window, adjusting dynamically to viewport dimensions.

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

ICE-6_fork

This horizontal bar chart displays the top 10 car models by price, sorted from highest to lowest, with each bar assigned a distinct color from combined D3 color palettes. Built with React and D3 v5, the visualization renders as SVG and includes value labels at bar ends, gridlines, and an annotation for the highest-priced model. Hover interactions trigger a custom tooltip showing brand, price, and mileage. Data loads from a CSV file using d3.csv, with linear and band scales via scaleLinear and scaleBand.</s>

NNirupama Karanam
80% match