Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Fork of Fork of ICE 7 Reusable D3 Scatter Plot

✓ Published0🌍 Public
PPujitha14challagulla
Last edited Jun 30, 2022
Created on Jun 30, 2022

This interactive scatter plot visualizes the Iris flower dataset, displaying petal width against sepal length using distinct D3 symbols for each species. The visualization, built with a reusable D3 v6 chart module, employs scales, axes, and ordinal symbol mapping via `d3.scaleOrdinal`. Every 15 seconds, the x-axis automatically cycles through different measurement columns, animating the data points to new positions while maintaining the species-based symbol encoding. The SVG rendering includes dynamic axis updates and custom typography from the Share Tech font.

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts.

Shows the Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Fork of ICE 7 Reusable D3 Scatter Plot

This visualization presents the classic Iris dataset as an animated scatter plot, mapping flower measurements (petal width, sepal length, etc.) to Cartesian coordinates. The SVG rendering is built with the d3 library, using a custom `scatterPlot()` function that leverages `scaleLinear`, `scaleOrdinal`, and `symbol()` to draw distinct species markers. Every 15 seconds, the plot cycles its x-axis through the dataset’s numeric columns, dynamically re-scaling the axes. This reusable chart demonstrates how to create a flexible D3 module with setters and getters, allowing for interactive data exploration.

PPujitha14challagulla
96% match
Loading thumbnail…

Fork of Fork of ICE 7 Reusable D3 Scatter Plot

This visualization presents the Iris Dataset as an animated scatter plot, cycling through different variable pairings on the x-axis every 15 seconds while the y-axis remains fixed on sepal length. It uses D3 v6 modules including `scaleLinear`, `scaleOrdinal`, `axisBottom`, and `axisLeft`, rendering SVG paths with custom symbols via the `symbol` generator to distinguish species. The chart is built as a reusable function following the Towards Reusable Charts pattern, with axes and marks updating dynamically through `selection.join` and interval-driven re-calls.

PPujitha14challagulla
95% match
Loading thumbnail…

Fork of ICE 7 Reusable D3 Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal width against sepal length, with each species represented by a distinct SVG symbol. Built as a reusable chart module using D3 v6, it employs `scaleLinear`, `axisLeft`, `axisBottom`, and `scaleOrdinal` for positioning and symbol encoding. The axes and points update dynamically every 15 seconds as the x-axis cycles through four measurement columns. The visualization uses an SVG rendering approach with animated transitions between attribute mappings.

Bbindhureddy98
95% match
Loading thumbnail…

Fork of ICE 7 Reusable D3 Scatter Plot

This interactive scatter plot displays the Iris dataset, mapping sepal length against petal width. Built with D3.js, it uses `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, and `symbols` to render SVG marks. The plot cycles its x-axis through four flower measurements every 15 seconds, creating an animated exploration of correlations. Data is loaded from a remote CSV, and the chart is constructed as a reusable function with configurable accessors for dimensions, data, and scales.

Ssaiteja0725
94% match
Loading thumbnail…

Fork of ICE 7 Reusable D3 Scatter Plot

This interactive scatter plot visualizes the Iris dataset, mapping petal width and sepal length on the axes while using different symbols to represent each flower species. The visualization automatically cycles through four data columns every 15 seconds, updating the x-axis to explore different variable relationships. Built with D3.js version 6.7.0, it leverages `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, `symbols`, and `symbol` APIs to create an SVG chart with animated transitions. The reusable chart component demonstrates a modular approach to data visualization.

Ttejasviprasad06@gmail.com
94% match
Loading thumbnail…

Fork of Fork of Fork of Fork of ICE 7 Reusable D3 Scatter Plot

This fork of a reusable scatter plot visualizes the Iris dataset, showing species as different symbols on axes that cycle through the dataset's four numeric columns every 15 seconds. Built with D3.js, it uses `scaleLinear` for axes, `scaleOrdinal` for symbol mapping, and `axisLeft`/`axisBottom` for ticks. The chart's reusable structure, defined via a `scatterPlot` function with configurable accessors, animates by repeatedly calling the plot with a new `xValue` inside `setInterval`.

PPujitha14challagulla
94% match
Loading thumbnail…

Fork of ICE 7 Reusable D3 Scatter Plot

This example presents an interactive scatter plot of the Iris dataset, where each flower species is represented by a distinct symbol from d3.symbol. The plot visualizes sepal length against petal width, with axes generated using d3.axisLeft and d3.axisBottom. A d3.scaleOrdinal maps species to symbol types, while d3.scaleLinear handles the x and y scales. Every 15 seconds, the x-axis dynamically switches between four numeric attributes—petal width, sepal width, petal length, and sepal length—using setInterval to re-render the chart with updated scales and positions.

Mmanvithareddykarra
94% match
Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot- ICE7

This scatter plot visualizes the Iris dataset, showing the relationship between petal width and sepal length, with points colored by species (setosa, versicolor, virginica). The visualization animates every two seconds, cycling the x-axis through petal_width, sepal_width, petal_length, and sepal_length using d3's scaleLinear and extent functions. Built with D3 v6, it renders SVG circles with elliptical dimensions derived from sepal measurements, and includes axes generated via axisLeft and axisBottom.

Sspandhanabadekol
94% match