Skip to main content
SimilarExport ZIP
100%

ICE 7 scatter plot

✓ Published0🌍 Public
Aadithiarikatla@gmail.com
Last edited Oct 25, 2025
Created on Oct 25, 2025

This animated scatter plot visualizes BMW car sales data, mapping four quantitative attributes—Engine Size, Mileage, Price, and Sales Volume—against each other on dynamic axes. The visualization cycles the x-axis variable every three seconds, using D3.js v6 modules including `scaleLinear`, `axisBottom`, `axisLeft`, and `scaleOrdinal` with `schemeCategory10` for coloring. Data points are rendered as SVG symbols (`symbolCircle`, `symbolDiamond`, `symbolTriangle`, `symbolSquare`) representing fuel types, which are also displayed in a separate legend. The chart updates smoothly via setInterval, re-calling the reusable scatter plot component with new mappings while preserving the y-axis and color encoding.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Reusable Scatter Plot (ICE-7)

This animated scatter plot explores BMW car sales data by cycling through four quantitative variables—engine size, mileage, price, and sales volume—on the x-axis every three seconds. Using D3.js v6 modules such as `scaleLinear`, `scaleOrdinal`, and `axisBottom`, each vehicle is rendered as a symbol based on fuel type, colored via `schemeCategory10`. The code constructs a reusable `scatterPlot` component with getter-setter methods, and the animation is driven by `setInterval` calling the SVG selection’s `.call()` method.

Sskmriyaz0786@gmail.com
88% match
Loading thumbnail…

ICE - 7 Scatter Plot

This animated scatter plot visualizes car sales data, cycling through three numeric variables—Units, TotalAmount, and HorsePower—on the x-axis every two seconds while HorsePower remains fixed on the y-axis. Using D3.js version 6.7.0, the visualization leverages `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` to map data points as black circles with white strokes. The `setInterval` function updates the x-axis scale and label, while the `scatterPlot` module handles the join pattern for smooth transitions. Data is loaded via D3’s `csv` from a GitHub raw URL, with axes and labels rendered in the Share Tech font.

66264kusuma@gmail.com
86% match
Loading thumbnail…

ICE-7

This animated scatter plot visualizes used car data, comparing selling price against various attributes including maximum power, mileage, and kilometers driven. The visualization cycles through different x-axis variables every two seconds, allowing viewers to explore correlations between car characteristics and market value. Built with D3.js, the chart uses a reusable scatter plot function with linear scales for both axes, implementing smooth transitions through a `setInterval` callback. The SVG rendering incorporates the Share Tech font and displays data points as circles, with axis labels updating dynamically to reflect the currently selected variable.

RRaajithaSabbineni
86% match
Loading thumbnail…

ICE_7 Scatter Plot

This animated scatter plot uses D3.js to visualize relationships among numeric car attributes, cycling through pairs of columns like horsepower, price, curb weight, city mpg, engine size, and highway mpg every 3.5 seconds. Circles are colored by drive wheel type via a categorical scale, with axes, labels, and a title updating smoothly through D3 transitions. The data comes from a remote CSV file, and the visualization fills the browser window, using D3 scales, axes, and ordinal color encoding to render the SVG animation.

AAbhiramPudi@my.unt.edu
86% match
Loading thumbnail…

ICE7 Reusable scatter plot

This interactive scatter plot visualizes automotive data, cycling through four variables—mileage, engine size, car age, and horsepower—on the x-axis every two seconds. Built with D3.js, the chart uses the `scaleLinear` and `extent` APIs to map data to coordinates, while `axisLeft` and `axisBottom` render axes. The SVG rendering is animated via `setInterval`, and the reusable `scatterPlot` component accepts configurable width, height, margins, and radius, demonstrating a modular chart design.

MM
85% match
Loading thumbnail…

ICE 7 Reusable scatter plot (Sai Kaushik Ganji)

This interactive scatter plot shows car sales data, displaying price in thousands of USD against horsepower for individual vehicles, with point size reflecting engine size and color/shape encoding vehicle type. The visualization uses D3.js v7’s `d3.csv` to load and parse the Car_sales dataset, and employs `d3.scaleLinear`, `d3.scaleSqrt`, and `d3.scaleOrdinal` to map numeric and categorical variables. Marks are generated using `d3.symbol()` with varying symbol shapes, including circles, crosses, and triangles, demonstrating a reusable charting function that separates configuration from rendering.

SSai Kaushik Ganji
85% match
Loading thumbnail…

ICE_7_NIRUPAMA_LINECHART

This interactive line chart visualizes BMW car sales volume by year using D3.js v7. The chart loads CSV data from a GitHub gist and aggregates sales figures per year using d3.rollup and d3.sum. It renders an SVG line path with d3.line, along with axes, dashed gridlines, and circular data points. Hovering over each point triggers tooltip interactions using d3.transition and event handlers, displaying the year and formatted sales value. The visualization uses linear scales for both x and y axes to plot the trends.

NNirupama Karanam
83% match
Loading thumbnail…

ICE 7_Reusable scatter plot

A reusable scatter plot built with D3 v6 visualizes car sales across three years (2019–2021). The SVG chart maps 2021 sales to the x-axis and 2019 sales to the y-axis, with each circle representing a car type. Every two seconds, the x-axis animates to a different year's sales data, cycling through 2019, 2020, and 2021, while the y-axis remains fixed. The visualization uses responsive sizing and smooth transitions, making it a clear example of an animated, reusable D3 chart component.

RRahulbelede97@gmail.com
83% match