Skip to main content
SimilarExport ZIP
100%

Fork of area

✓ Published0🌍 Public
Ssahaspragna6@gmail.com
Last edited Apr 18, 2024
Created on Apr 18, 2024
Forked from Hello VizHub

This interactive D3.js visualization displays the classic Iris dataset as an animated scatter plot. It cycles through different pairings of sepal and petal measurements on the x-axis, while the y-axis remains fixed on sepal length. The plot uses SVG circles colored by species (setosa, versicolor, virginica) and updates every few seconds to reveal different data projections. It leverages D3's scaleLinear, extent, axisLeft, and axisBottom APIs, alongside a custom scatterPlot builder that redraws the axes and points with each iteration.

AI-generated description

A demonstration of reusable scatter plot.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot

This interactive scatter plot explores the Iris dataset, visualizing relationships between petal and sepal measurements across three flower species. The visualization cycles through different variable pairings every two seconds, updating the axes and point positions accordingly. Built with reusable D3 components, it leverages `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, and `extent` from D3 6.7.0, using SVG rendering with animated transitions and a color-coded legend for species identification.

MMar-99
90% match
Loading thumbnail…

Fork of Activity

This visualization displays a subset of the Iris dataset in an animated scatter plot, cycling through different pairs of sepal and petal measurements over time. It uses d3-scaleLinear, d3-axisLeft, and d3-axisBottom from D3 v6 to map the data, rendering circles with custom colors for each species and a legend. The animation is driven by setInterval, updating the x-value accessor to rotate through four measurement columns, while labels and titles are appended to the SVG.

SSreeKohaliPatel@my.unt.edu
90% match
Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot- ICE7

This visualization presents the classic Iris dataset as an animated scatter plot, cycling through different pairings of sepal and petal measurements on the x-axis while keeping petal width on the y-axis. Each species—setosa, versicolor, and virginica—is color-coded in red, cyan, and grey respectively, with data points rendered as SVG circles and a legend showing the color mapping. The animation updates the x-axis scale and labels via `setInterval`, and the plot is built using D3 v6 APIs including `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`. The data is loaded from a CSV URL, and the plot re-renders its axes and circles on each interval tick.

RRupeshGandham
90% match
Loading thumbnail…

Fork of Iris Scatter Plot

This interactive scatter plot visualizes the classic Iris dataset, allowing users to explore relationships between sepal and petal measurements across three flower species. Two dropdown menus let viewers select which measurement appears on the x- and y-axes. The visualization uses D3 v5's `scaleLinear`, `axisBottom`, and `axisLeft` to render axes and gridlines, while data points are drawn as SVG circles with color-coded species and an accompanying legend. When the axes change, the circles smoothly transition to their new positions using D3's `transition()`.

HHaowenWeiJohn
89% match
Loading thumbnail…

Fork of 0

This interactive D3.js scatter plot visualizes the classic Iris dataset, showing measurements of sepal and petal dimensions for three species. Users can change the X and Y axes using dropdown menus, instantly re-projecting the data. The visualization uses `d3.scaleLinear` for axis scaling and `d3.axisBottom` and `d3.axisLeft` for tick marks and grid lines. Points animate from the plot’s center using D3’s `.transition().duration(1500).delay((d, i) => i * 10)` and are colored by species via the `.style('fill', (d) => color(d.class))` mapping, creating a dynamic, reconfigurable view of multidimensional plant data.

Eeyxxr1260@gmail.com
89% match
Loading thumbnail…

Fork of Animated Reusable D3 Scatter Plot

This animated scatter plot visualizes the Iris dataset, cycling through different pairings of sepal and petal measurements every three seconds. The chart uses D3 v6 with a reusable module pattern, employing `scaleLinear`, `axisLeft`, `axisBottom`, and `selection.join` to handle enter, update, and exit states. As the axes change, circles transition smoothly via `transition().duration(1000)`, with new points growing from radius zero and existing points repositioned with staggered delays. Rendered as an SVG filling the viewport, it demonstrates dynamic data binding and responsive chart updates.

Ssirenajbpearl@gmail.com
89% match
Loading thumbnail…

Fork of Iris Scatter Plot

This interactive scatter plot visualizes the Iris flower dataset, displaying the relationship between two user-selected measurements (sepal length/width or petal length/width) on the x- and y-axes. Colored circles represent the three Iris species (setosa, versicolor, virginica) using a categorical color scale. The D3.js code builds the chart with `scaleLinear` and `scaleOrdinal` for scaling, `axisLeft` and `axisBottom` for axes, and dropdown menus trigger redraws via event listeners. Data is loaded from a CSV file, and points are rendered as SVG circles.

Aaddword527
89% 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
89% match