Skip to main content
SimilarExport ZIP
100%

3D Scatter Plot

✓ Published0🌍 Public
Wwaqastufail
Last edited Mar 26, 2020
Created on Mar 26, 2020
Forked from 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.

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 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
97% match
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
89% match
Loading thumbnail…

3D Scatter Plot

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`.

JJovenne Naldrey Sapuay
87% 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
Loading thumbnail…

3D Scatter Plot

A 3D scatter plot displays data points from a CSV dataset, mapping three quantitative dimensions to x, y, and z axes while using color to distinguish categorical groups. The visualization uses Three.js with WebGL rendering to create and animate sphere sprites, and D3.js for data loading, linear scaling, and ordinal color mapping. Points are continuously rotated through a slow animation, and users can pan with mouse interaction to change the viewing angle. The scene uses a perspective camera with sprite-based circle markers for each observation.

Wwaqastufail
85% 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
84% match
Loading thumbnail…

3D Scatter Plot with Species

This example visualizes Iris flower measurements as a 3D scatter plot, displaying two species traces in the same interactive scene. The plot shows sepal length, width, and an additional dimension for each sample, using color and marker style to distinguish between groups. The code loads a CSV dataset with D3 and renders the three-dimensional chart using Plotly’s `scatter3d` trace type, with markers sized at 12 and a custom gray line color. The `Plotly.newPlot` API draws the scene inside a designated HTML division.

RRupeshGandham
84% match
Loading thumbnail…

scattered plot 3d

This example displays the Iris dataset as an interactive 3D scatter plot using Highcharts. Each point represents a flower sample, plotted across petal length, sepal length, and petal width axes. The chart supports mouse and touch dragging to rotate the view, adjusting the alpha and beta angles of the 3D perspective. Data is loaded from a CSV file via D3.js, while the scatter points are rendered with Highcharts’ scatter3d chart type, featuring radial gradient colors and a visible frame.

Ddivyagunuguntla
84% match