Sai Nikitha ICE 7-1 Reusable Scatter Plot

100%

Sai Nikitha ICE 7-1 Reusable Scatter Plot

✓ Published0🌍 Public

Last edited Mar 25, 2023

Created on Mar 25, 2023

Forked from ICE 7-1 Reusable Scatter Plot

This reusable scatter plot visualizes the Iris Dataset, encoding species (setosa, versicolor, virginica) with distinct colors and SVG symbol shapes. The chart dynamically cycles its x-axis through four quantitative attributes every ten seconds with animated transitions. Built with D3 v6, it uses `scaleLinear`, `scaleOrdinal`, `axisBottom`, `axisLeft`, and symbol generators, while a reusable `scatterPlot` factory pattern enables parameterized configuration of dimensions, margins, and data accessors.

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts.

Shows the Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Sai Nikitha ICE 7 Reusable Scatter Plot.

This interactive scatter plot visualizes the Iris dataset, displaying measurements of sepal and petal dimensions with each species color-coded and shape-coded. Built as a reusable chart using D3 v6, it implements a custom `scatterPlot` factory function with configurable accessors and scales. The visualization cycles through different feature pairs on the x-axis every few seconds using `setInterval`, animating transitions between four variable combinations. SVG circles are appended with distinct colors per species, while the reusable chart structure leverages `scaleLinear`, `axisBottom`, `axisLeft`, and `scaleOrdinal` to render axes and categorical encoding.

NNikitha123171

95% match

Loading thumbnail…

Fork of ICE 7-1 Reusable Scatter Plot

This reusable scatter plot visualizes the Iris dataset, mapping petal width against sepal length with points colored and shaped by species—setosa, versicolor, and virginica. Built with D3 v6, it uses scaleLinear, scaleOrdinal, axisLeft, axisBottom, and symbol generators to render SVG marks. The axes dynamically cycle through different measurement columns every ten seconds via setInterval, updating the chart through a reusable closure-based chart function that returns getter and setter accessors.

NNikitha123171

88% match

Loading thumbnail…

Fork of ICE 7-1 Reusable Scatter Plot

This reusable scatter plot visualizes the Iris dataset, encoding flower species through both color and symbol shapes. The visualization cycles through four numeric attributes every ten seconds, updating the x-axis scale to display different variable combinations. Built with D3 v6, it uses `scaleLinear` for axes, `scaleOrdinal` for color and shape mapping, and `axisBottom`/`axisLeft` for rendering. SVG paths represent data points with transitions between updates, while `setInterval` drives the automatic axis changes. The dataset includes sepal and petal measurements for three iris species.

NNeeharikaGali

87% match

Loading thumbnail…

ICE7 - Reusable Scatter Plot

This example presents a reusable scatter plot visualizing the Iris Dataset, with data points colored by species. Built with D3.js v6, the plot cycles through different attribute pairs on the x-axis, including petal width, sepal width, petal length, and sepal length, updating the axes and circles each second. It uses `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to construct the chart, along with SVG elements for rendering and a fixed legend for species identification. The implementation follows a reusable chart pattern, allowing dynamic configuration of dimensions, margins, and value accessors.

Ssuchitra2602

87% match

Loading thumbnail…

ICE 7 Reusable D3 Scatter Plot

This example demonstrates a reusable scatter plot that visualizes the Iris dataset, with points colored by species and rendered as different D3 symbols. The chart displays petal width on the x-axis and sepal length on the y-axis initially, then cycles through all four numeric columns every 15 seconds using `setInterval`. Built with D3 v3 APIs including `scaleLinear`, `axisLeft`, `axisBottom`, `scaleOrdinal`, and `symbol`, the SVG visualization updates dynamically by calling the chart function again with new accessor functions.

TTejaswi@3271

87% match

Loading thumbnail…

ICE 7 Reusable scatter plot

This reusable scatter plot visualizes the Iris Dataset, mapping petal width, sepal width, petal length, and sepal length onto the x-axis while keeping sepal length on the y-axis. It uses D3’s `scaleLinear`, `scaleOrdinal`, and `symbol` to encode species with distinct SVG path shapes. The plot cycles through the four x-axis variables every two seconds via `setInterval`, re-calling the chart with updated accessors. Rendering is fully SVG-based, with axes generated by `axisLeft` and `axisBottom`, and the viewport resizes to the full window dimensions.

SSai Kaushik

87% match

Loading thumbnail…

Fork of ICE - 7 Reusable Scatter Plot

This example shows an animated scatter plot of the Iris dataset, cycling through four measured features (petal width, sepal width, petal length, and sepal length) every two seconds. The visualization colors each data point by species—blue for setosa, red for versicolor, and yellow for virginica—using D3.js v6. It demonstrates a reusable scatter plot component built with `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom`, updating the x-axis domain and circle positions via `setInterval`. The SVG rendering includes styled axes and white-stroked circles on a black background.

SSaiSreya1

87% match

Loading thumbnail…

ScatterPlot_Jasvitha_ICE-7

This interactive scatter plot visualizes the Iris dataset, coloring points by species and using different symbols to represent each variety. Built with D3 v6, it renders SVG shapes using `d3.symbol` and `d3.scaleOrdinal`. The visualization cycles through four attribute pairings every two seconds via `setInterval`, updating the x-axis mapping and re-calling the reusable chart function. The plot includes labeled axes, a title, and applies a custom color scheme for setosa, versicolor, and virginica flowers.

JJasvitha Allamsetty

86% match