Skip to main content
SimilarExport ZIP
100%

ICE-7_Priyanka

✓ Published0🌍 Public
Jjammigumpula.priyanka193@gmail.com
Last edited Mar 28, 2024
Created on Mar 28, 2024
Forked from ICE-7_Shanmukha

This animated scatter plot, built with D3 v6, visualizes the Iris dataset with a focus on age and fare, splitting the data into two subsets that alternate every five seconds. Points are colored by categorical species using an ordinal color scale, with axes and labels rendered via SVG. The visualization demonstrates a reusable chart pattern, dynamically updating between two halves of the dataset to highlight comparisons.

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts.

Shows the Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of ICE-7

This visualization presents a dynamic scatter plot of the Iris dataset, split into two subsets that alternate every five seconds. Each plot maps Age against Fare, with points colored by the Sex attribute using D3’s categorical color scheme. The reusable chart module, based on the Towards Reusable Charts pattern, handles SVG rendering, axes, and labels, while a setInterval toggle switches between the two data halves, creating a time-based comparison of the same variables.

Ssriram.official9@gmail.com
86% match
Loading thumbnail…

ICE7

This example visualizes the Iris dataset using a reusable scatter plot built with D3.js. It animates through different numeric attribute pairings on the x-axis every two seconds, while color-coded circles represent the three iris species—setosa, versicolor, and virginica—in yellow, purple, and green. The plot uses D3 scales, axes, and data joins to render SVG circles, with each mark’s size and position driven by sepal and petal measurements. The code includes a custom scatterPlot factory function to manage margins, scales, and axis updates.

Ssowmyanagula@my.unt.edu
84% match
Loading thumbnail…

ICE-7_Shanmukha

This example presents a reusable D3.js scatter plot that visualizes the classic Iris dataset through a dynamic slideshow-like animation. The visualization cycles between two subsets of the data every five seconds, displaying Age on the x-axis, Fare on the y-axis, and using color to encode the Sex attribute. Built with the reusable chart pattern, the code defines a configurable `scatterPlot` function supporting custom margins, radius, and accessor functions, and uses SVG rendering with smooth transitions. The plot alternates between two halves of the dataset, offering an animated comparison of the same variables across different data slices. Axes are labeled, and a categorical color scale distinguishes the two sexes, making the chart clear and engaging.

Sshanmukhadatta4040@gmail.com
84% match
Loading thumbnail…

ICE-7_Priyanka

This visualization presents a scatter plot of the Titanic dataset, depicting the relationship between passenger age and fare price. Built as a reusable D3.js component, the chart uses color to encode passenger sex, with circles positioned along the axes for Age (years) and Fare ($). The visualization dynamically splits the dataset into two halves and toggles between them every five seconds, offering an animated comparison of different passenger subsets. The plot includes labeled axes and a categorical color scale, and the animation alternates between the two data halves to highlight patterns in the data.

Jjammigumpula.priyanka193@gmail.com
84% match
Loading thumbnail…

ICE 7 Reuse Scatter Plot

This interactive scatter plot visualizes the Iris Dataset, with points colored by species—virginica in green, versicolor in orange, and setosa in blue. The chart cycles through different attribute pairs every 10 seconds, alternating between petal width, sepal width, petal length, and sepal length on the x-axis while keeping sepal length on the y-axis. Built with D3 v6, it uses scaleLinear, scaleOrdinal, axisLeft, axisBottom, and symbols to render distinct shapes for each species. The reusable chart pattern supports dynamic updates through setInterval.

Jjayanthamol99
84% match
Loading thumbnail…

ICE -7 Scatter Plot

This scatter plot visualizes the Iris Dataset across four numerical axes, cycling through them every second to reveal the relationships among sepal and petal measurements. It uses D3 v6 with a reusable chart pattern, mapping species to distinct colors and SVG symbols. The visualization demonstrates reusable chart architecture with d3.scaleLinear, d3.axisLeft, d3.axisBottom, d3.scaleOrdinal, and d3.symbol to render animated, multi-dimension comparisons.

GGogineni44
84% match
Loading thumbnail…

ICE 7- Scatter Plot

This animated scatter plot visualizes the Iris dataset, comparing sepal and petal measurements across three flower species. The chart cycles through different attribute pairs every two seconds, shifting which variables map to the x-axis while maintaining species-colored symbols. Built with D3 v6, it uses reusable chart functions with scaleLinear, scaleOrdinal, and symbol generators for rendering SVG paths. The visualization includes axis labels, a color legend for Iris species, and transitions driven by JavaScript’s setInterval, creating an interactive exploration of the dataset’s multivariate relationships.

SSharanya1307
83% match
Loading thumbnail…

ice - 7

This animated scatter plot visualizes the Iris Dataset, cycling through different pairings of sepal and petal measurements every two seconds. The visualization uses D3.js version 6.7.0, employing `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to build the chart, with species color-coded as red, blue, or grey. Rendered as an SVG, the plot updates dynamically by changing the x-axis variable through a `setInterval` loop, while the reusable `scatterPlot` chart component handles the layout and axis rendering.

SSaikiran2029
83% match