Fork of ICE-BONUS_SCATTERPLOT_IRIS

100%

Fork of ICE-BONUS_SCATTERPLOT_IRIS

✓ Published2🌍 Public

Last edited Mar 12, 2022

Created on Mar 12, 2022

This interactive scatterplot displays the classic Iris dataset as a 3D point cloud, projected onto an SVG canvas using the d3-3d library for D3 v4. The visualization renders the dataset's sepal and petal measurements as colored spheres within a rotating 3D grid, with axis labels indicating the variables. Users can drag the view to rotate the plot in both the X and Y dimensions, dynamically recalculating the projection. The implementation uses d3._3d() for 3D-to-2D projection, d3.drag() for interaction, and includes a separate AFRAME-based component for a WebGL/VR alternative view.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of ICE-BONUS_SCATTERPLOT_IRIS

This interactive 3D scatterplot visualizes the Iris dataset, mapping sepal length, petal width, and petal length along three axes with points colored by species. The visualization renders as an SVG scene using D3 v4 with the d3-3d plugin, which projects 3D data onto a 2D plane, and includes a rotatable grid and y-axis scale. Users can drag to rotate the plot, with the rotation handled via D3's drag behavior and the d3-3d rotation methods, while points are drawn as circles updated through D3 transitions. The underlying data is loaded from a CSV file containing 150 iris flower measurements.

AAnanyaSamala

94% match

Loading thumbnail…

Fork of Fork of ICE-BONUS_SCATTERPLOT_IRIS

AAnanyaSamala

94% match

Loading thumbnail…

Fork of Fork of Fork of ICE-BONUS_SCATTERPLOT_IRIS

This example presents the classic Iris dataset as an interactive 3D scatterplot, where each flower is colored by species. The visualization uses D3.js v4 with the d3-3d plugin to project points onto a 2D SVG canvas, allowing users to drag and rotate the plot. The scene also includes a grid floor and labeled axes, and the code loads data from the included `iris.csv` file.

AAnanyaSamala

92% match

Loading thumbnail…

ICE-BONUS_SCATTERPLOT_IRIS

This interactive 3D scatterplot visualizes the classic Iris dataset, encoding sepal length, petal length, and sepal width along three axes. Each point is colored by species, with a wireframe grid providing spatial reference. The visualization supports drag-based rotation to explore the data from any angle. Built with D3.js v4 and the d3-3d plugin, it projects 3D coordinates to SVG paths and circles, leveraging a drag behavior to update rotations and animate transitions. The Iris data is imported from an external CSV file.

PPY09052021

92% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot- ICE7

This interactive scatter plot visualizes the Iris dataset, cycling through four different floral measurements on the x-axis over time while plotting petal width against sepal length. It uses D3 v6 to render animated SVG circles colored by species, with the y-axis fixed and the x-axis rotating automatically via `setInterval`. A legend identifies the three species, and axis labels update dynamically to reflect the current dimension. The code relies on D3’s `csv` import, `scaleLinear` scaling, and custom `scatterPlot` API.

AArefa Patwary

86% match

Loading thumbnail…

Fork of Iris Scatter Plot

This interactive scatter plot visualizes the Iris flower dataset, displaying three species as colored circles across user-selectable axes. Using D3.js, it renders an SVG with animated transitions between axis combinations via dropdown menus. The visualization employs D3’s scaleLinear, axis functions, and transition methods to smoothly update data points based on the selected sepal and petal measurements.

JJacky

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

86% match

Loading thumbnail…

Fork of Iris Data Scatter Plot

This scatter plot visualizes the classic Iris dataset, showing measurements of sepal and petal dimensions. Users can dynamically select which attributes to plot on the X and Y axes via dropdown menus. The visualization is built with D3 version 7, which draws an interactive SVG scatter plot. Data points are embedded directly in the JavaScript code, and the plot is redrawn from scratch whenever the user changes the selected axes.

Ccpsu00

86% match