Fork of ICE-7 Resuable scatter plot

100%

Fork of ICE-7 Resuable scatter plot

✓ Published0🌍 Public

Last edited Jul 2, 2022

Created on Jul 2, 2022

This animated scatter plot uses the Iris flower dataset to explore relationships between petal and sepal measurements. The code draws colored circles representing three species—green for setosa, indigo for versicolor, and red for virginica—using d3.scaleLinear, d3.extent, d3.axisLeft, and d3.axisBottom. Every two seconds, a setInterval callback updates the x-axis mapping to cycle through petal_width, sepal_width, petal_length, and sepal_length, while the y-axis stays fixed on sepal_length. The visualization employs a reusable scatterPlot function that updates existing SVG circles and axes through data joins.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of ICE-7 Reusable Scatter Plot

This animated scatter plot visualizes the Iris dataset, mapping petal length and sepal length on the x- and y-axes while coloring each circle by species (setosa, versicolor, virginica). Using D3 v6 APIs such as `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`, it implements a reusable scatter plot function. Every two seconds, a `setInterval` cycles through different columns—petal_width, sepal_width, petal_length, sepal_length—switching the x-axis dimension and updating SVG circles via data joins.

Ssumitradevipolina

95% match

Loading thumbnail…

Fork of ICE-7 Resuable scatter plot

This visualization is an animated scatter plot of the Iris flower dataset, colored by species (setosa, versicolor, and virginica). It cycles through different combinations of sepal and petal measurements every two seconds, allowing viewers to see how the data clusters shift across various dimensions. Built with D3.js (version 6.7.0), the plot uses a reusable `scatterPlot` module that leverages `scaleLinear`, `axisLeft`, and `axisBottom` for scaling and axes. The SVG circles are rendered with inline styling, using a `setInterval` loop to update the x-axis mapping and redraw the plot.

SSravyaAnnadi

95% match

Loading thumbnail…

Fork of ICE-7 Resuable scatter plot

This interactive scatter plot visualizes the Iris dataset, displaying sepal and petal measurements with points colored by species (green for setosa, indigo for versicolor, red for virginica). The visualization cycles through different column pairings every two seconds, animating the axes and point positions across four variable combinations. Built with D3 v6, the example uses a reusable scatterPlot module that employs scaleLinear, extent, axisLeft, and axisBottom to render the SVG chart, with circles encoded with both x/y positions and rx/ry attributes for elliptical shapes.

SSravyaAnnadi

94% match

Loading thumbnail…

Fork of ICE-7 Reusable Scatter Plot

This animated scatter plot visualizes the Iris dataset, showing the relationship between petal width and sepal length, with each point colored by species (setosa, versicolor, or virginica). It cycles through four attribute combinations every two seconds using `setInterval`, updating the x-axis scale via D3's `scaleLinear` and `axisBottom`. The visualization is built with a reusable `scatterPlot` function, leveraging D3 v6 modules like `csv`, `select`, and `extent`, rendered as SVG circles with custom fill colors and axis labels.

SSharmilaChowdhari

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

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

93% match

Loading thumbnail…

Fork of ICE- 7 Reusable Scatter Plot

This visualization displays the Iris Dataset as a scatter plot of petal width against sepal length, with each species colored according to the d3.schemeCategory10 ordinal scale. The chart uses d3.scaleLinear for both axes and d3.axisLeft/axisBottom for gridlines. A setInterval updates the x-axis variable every 10 seconds, cycling through petal_width, sepal_width, petal_length, and sepal_length. Data points render as SVG paths with d3.symbol shapes differentiated by species, animated through D3’s data join and update pattern.

Bbhanuprasadk19

93% match

Loading thumbnail…

Fork of ICE 7-1 Reusable Scatter Plot

This interactive scatter plot visualizes the Iris dataset, plotting petal width against sepal length. It animates through all four numeric measurements by updating the x-axis every ten seconds, cycling through petal_width, sepal_width, petal_length, and sepal_length. The plot uses D3 v6's `scaleLinear`, `scaleOrdinal`, and `axisBottom` APIs to render SVG symbols, with distinct shapes and colors for each species. Data is loaded from a CSV file via `d3.csv`, and the visualization updates dynamically by re-calling the scatter plot function with new x-value mappings.

KKarnisrikanth

93% match