Skip to main content
SimilarExport ZIP
100%

ICE-7 Reusable Scatterplot

✓ Published1🌍 Public
Mmanojgne
Last edited Jul 2, 2022
Created on Jun 30, 2022

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.

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts.

Shows the Cars Dataset.

MIT Licensed

Similar vizzes

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
91% 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
90% 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
87% 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
85% 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
84% 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
82% match
Loading thumbnail…

Reusable Scatter plot

This reusable scatter plot visualizes car horsepower, miles per gallon, cylinder count, and displacement from a CSV dataset, animating through these columns every second. Built with D3 v6, it uses a custom `scatterPlot` function with `scaleLinear`, `scaleOrdinal`, `axisLeft`, and `axisBottom` to render SVG marks. Data points appear as distinct symbols and colors, with axes and labels updating dynamically via `setInterval` and the `svg.call(plot)` pattern.

NNanditha Reddy
82% match
Loading thumbnail…

ICE7

This example shows a reusable scatter plot that maps engine weight to horsepower for a small dataset of vehicles. The visualization uses D3.js v7 to render SVG circles and axes, with scales for the x and y dimensions. The code builds a configurable chart function that accepts setters for width, height, data, margins, and radius, demonstrating a modular pattern for reusable visualizations. The implementation relies on `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.extent` to handle the mapping and axis generation.

MM Hema
82% match