Fork of ICE - 7 Reusable Scatter Plot

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

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

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

Fork of Fork of ICE 7-1 Reusable Scatter Plot

This example presents a reusable scatter plot of the Iris dataset, encoding species with distinct colors and shapes while mapping petal width and sepal length to the x and y axes. It cycles through four quantitative columns every ten seconds, updating the x-axis domain and point positions with animation. The visualization uses the D3 v6 module API, including `scaleLinear`, `scaleOrdinal`, `axisBottom`, `axisLeft`, and `symbol` for shape encoding, with SVG rendering driven by a `setInterval` loop that re-invokes the chart function.

KKarnisrikanth

Fork of ICE - 7 - Reusable Scatter Plot

This example presents a reusable scatter plot of the Iris dataset, visualizing relationships between sepal and petal dimensions. Each point is colored by species (setosa, versicolor, virginica) and uses a distinct symbol shape via d3.symbol and scaleOrdinal. The plot cycles through different X-axis variables every five seconds using setInterval, re-calling the scatterPlot function. Built with d3.scaleLinear, axisLeft, and axisBottom, the visualization renders as animated SVG paths and includes an on-page legend.

NNitheeshSama

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

Fork of ICE 7-1 Reusable Scatter Plot

This example presents an animated scatter plot of the classic Iris flower dataset, encoding sepal length and petal width measurements. It dynamically cycles through four different attribute pairs on the x-axis every ten seconds, with species distinguished by color (using `d3.scaleOrdinal` and `schemeCategory10`) and unique SVG symbol shapes. Built with D3 v6, the reusable chart leverages `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom` to update axes smoothly, while the enter-update-exit pattern animates the repositioning of data points.

SSANEEM MOHAMMAD

Fork of ICE 7-1 Reusable Scatter Plot

This reusable scatter plot visualizes the Iris dataset, with each flower's species distinguished by both color and point shape. The chart animates every 10 seconds, cycling through the four measured dimensions on the x-axis while keeping sepal length constant on the y-axis. Built with D3 v6, the visualization uses `scaleLinear` and `axisBottom` to configure scales and axes, while `scaleOrdinal` maps species to shape and color. The `join` operation efficiently updates SVG paths, enabling smooth transitions between data dimensions.

NNeeharikaGali