Fork of ICE-7 Reusable Scatterplot

100%

Fork of ICE-7 Reusable Scatterplot

✓ Published0🌍 Public

Last edited Jul 2, 2022

Created on Jul 2, 2022

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.

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts.

Shows the Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-7 Reusable Scatterplot

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.

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.

89% match

Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot- ICE7

This animated scatter plot explores relationships between four variables from the auto-mpg dataset, cycling which variable maps to the x-axis while the y-axis consistently tracks AvilaAdobe. Built with D3.js (v6.7.0), it renders circles in an SVG, with data points colored by year (pink for 2014, green for 2015, black for 2016). The chart updates via `setInterval`, using `scaleLinear`, `axisLeft`, and `axisBottom` for axes, and appends legend markers and axis labels dynamically.

Hharika-1929

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

85% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This scatter plot visualizes vintage car data, mapping engine size against horsepower with D3’s `scaleLinear`, `axisLeft`, and `axisBottom`. The visualization animates by cycling through four variables—car age, mileage, engine size, and horsepower—on the x-axis every two seconds using `setInterval`. Each point is rendered as an SVG circle with a fixed radius, and the chart updates the x-axis domain and circles accordingly. Data is loaded asynchronously from a CSV via `d3.csv` and parsed into numeric values.

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

83% 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

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