Skip to main content
SimilarExport ZIP
100%

ICE-7

✓ Published0🌍 Public
RRaajithaSabbineni
Last edited Jul 1, 2022
Created on Jul 1, 2022

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.

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts.

Shows the Iris Dataset.

MIT Licensed

Similar vizzes

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

ICE-7

This example presents a dynamic scatter plot of used Ford vehicle data, cycling through different numeric attributes (engine size, mileage, MPG, and price) on the x-axis every two seconds. The plot maps vehicle transmission type to point color, with blue for automatic and purple for manual transmissions. Built as a reusable chart component using D3.js, it employs `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` APIs, alongside the `select` and `csv` modules for data loading and DOM manipulation. The visualization renders in SVG with a custom "Share Tech" font and full-screen dimensions.

RRaajithaSabbineni
88% match
Loading thumbnail…

ICE-reusable scatter

This example demonstrates a reusable scatter plot implemented with D3.js, visualizing a used car dataset. It plots selling price against various attributes—max power, kilometers driven, mileage, or selling price—which rotate automatically every two seconds. Each point is color-coded by car status (sold in green, unsold in red) with a legend. The chart leverages D3’s `scaleLinear`, `axisLeft`, `axisBottom`, and `csv` APIs, and uses SVG rendering with animated transitions between attribute axes.

RRaajithaSabbineni
88% match
Loading thumbnail…

ICE7

This interactive scatter plot visualizes relationships between numeric attributes of cars from a CSV dataset. Users can select different x- and y-axis columns from dropdown menus to explore correlations. The visualization is built with D3 v7 using SVG rendering, featuring smooth 400ms transitions when data points move between positions. Tooltips display car names and axis values on hover, while the reusable `scatterPlot()` function demonstrates configurable chart design with adjustable scales, margins, labels, and point symbols.

SSainathreddypotu@gmail.com
87% 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
87% match
Loading thumbnail…

ICE 7 scatter plot

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.

Aadithiarikatla@gmail.com
86% 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
86% match