3D Scatter Plot

100%

3D Scatter Plot

✓ Published1🌍 Public

Last edited Sep 4, 2019

Created on Sep 4, 2019

This 3D scatter plot visualizes the Iris dataset using Three.js for WebGL rendering and D3.js for data processing and scaling. Colored circles represent different Iris species, mapped to petal length, petal width, and sepal width coordinates. The scene automatically rotates via `requestAnimationFrame`, and users can pan to rotate the view using D3's `select` and `zoom` interaction. The code generates circle sprites from canvas textures with `CanvasTexture` and `SpriteMaterial`.

AI-generated description

A 3D scatter plot using Three.js and D3.

MIT Licensed

Similar vizzes

Loading thumbnail…

3D Scatter Plot

This example shows a rotating 3D scatter plot of the Iris dataset, visualizing petal length, petal width, and sepal width as the three spatial dimensions. Points are colored by species using a categorical color scale. The visualization uses Three.js for 3D rendering with WebGL, employing sprites with canvas-generated textures for circular markers. D3 provides data loading, scaling, and color mapping. Camera rotation is driven by a D3 selection and zoom interaction, with continuous animation incrementing the rotation angle.

CCurran Kelleher

92% match

Loading thumbnail…

HiDPI 3D Scatter Plot

A 3D scatter plot of the Iris dataset, rendered as colored sprites in a Three.js scene. The visualization maps petal length, petal width, and sepal width to x, y, and z axes, with species determining color via a d3.scaleOrdinal and schemeCategory10. The plot rotates automatically and supports pan-based rotation through d3.zoom. This variant uses an HiDPI canvas technique, rendering at double resolution with a scaleFactor of 2 and setting the canvas CSS size accordingly.

CCurran Kelleher

88% match

Loading thumbnail…

3D Scatter Plot

This example visualizes a 3D scatter plot of iris flower data, mapping female, male, and no-known-disability measurements to the x, y, and z axes while coloring points by species. Points render as circular sprites generated on a Canvas texture and composited with Three.js’s WebGLRenderer. D3’s `scaleLinear` maps data ranges to a unit cube, while `scaleOrdinal` assigns categorical colors from `schemeCategory10`. D3’s `zoom` behavior handles pan-based rotation, and `requestAnimationFrame` adds slow continuous rotation. Data loads via `d3.csv` from a remote GitHub gist.

Wwaqastufail

87% match

Loading thumbnail…

Untitled

This interactive 3D scatter plot visualizes the Iris flower dataset, mapping petal length, petal width, and sepal width along the three axes, with color encoding species. Built with Three.js and D3, it uses sprites rendered via WebGL for circular points and supports both user-controlled panning and an automatic slow rotation animation. The scene is constructed with Three.js `Scene`, `PerspectiveCamera`, and `WebGLRenderer`, while D3 utilities like `csv`, `scaleLinear`, and `scaleOrdinal` handle data loading and mapping.

Sshubhamsingh173

87% match

Loading thumbnail…

3D Scatter Plot

This example shows a 3D scatter plot of iris-like data, with each point colored by species using an ordinal color scale. The visualization maps female, male, and no-known-disability measurements to the x, y, and z axes, rendered as circular sprites in a Three.js scene. D3.js handles data loading via `csv`, scales with `scaleLinear` and `scaleOrdinal`, and provides zoom interaction for drag-based rotation, while a WebGL renderer animates continuous slow rotation.

Wwaqastufail

86% match

Loading thumbnail…

IRIS DATA IN 3D SCATTER PLOT GRAPH

This 3D scatter plot visualizes the classic Iris dataset, mapping sepal length, sepal width, and petal length onto the x, y, and z axes. Points are colored by species (setosa, versicolor, virginica) using a custom colorscale, with distinct marker colors and pink outlines highlighting cluster separation. The visualization is built with Plotly.js's `scatter3d` trace type, while D3.js loads the CSV data from a GitHub gist. Each axis includes a colored background and gridlines, rendered interactively in WebGL for smooth rotation and exploration.

Aadapavaishnavi12

86% match

Loading thumbnail…

3D Scatter Plot Iris Dataset AISHWARYA-M

This 3D scatter plot visualizes the classic Iris dataset, mapping petal length, petal width, and sepal width to the x, y, and z axes, with species determining point color. The visualization supports interactive rotation via panning and features continuous auto-rotation animation. It renders circular sprites using Three.js on a WebGL canvas with HiDPI scaling, while D3 handles data parsing, linear scales, and ordinal color mapping via `d3.csv`, `d3.scaleLinear`, and `d3.scaleOrdinal`. The zoom interaction is configured to constrain rotation within vertical limits.

AAishwarya Manjunath

86% match

Loading thumbnail…

3-D Scatter Plot

This example visualizes the classic Iris dataset as an interactive 3-D scatter plot, mapping sepal length, sepal width, and petal length onto the x, y, and z axes. Points are colored by species—setosa, versicolor, and virginica—using a custom Plotly colorscale. The visualization is built with Plotly’s `scatter3d` trace type, which renders via WebGL, and uses D3 to load and parse the CSV data. Each axis is labeled and given a distinct background color for clarity.

Aavinash021997

85% match