Skip to main content
SimilarExport ZIP
100%

HiDPI 3D Scatter Plot

✓ Published4🌍 Public
CCurran Kelleher
Last edited Sep 20, 2019
Created on Sep 20, 2019
Forked from 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.

AI-generated description

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

This variant uses the high pixel density Canvas technique described in Scaling HTML canvases for HiDPI screens.

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

Reusable D3 Scatter Plot.

This reusable D3 scatter plot visualizes the Iris dataset, mapping petal and sepal dimensions for three species (setosa, versicolor, virginica) with distinct colors. A setInterval animation cycles through different x-axis attributes (petal_width, sepal_width, petal_length, sepal_length) every few seconds, updating the axes and point positions. Built with d3.scaleLinear, d3.extent, d3.axisLeft, and d3.axisBottom, the plot renders as an SVG with circles and includes custom legends and axis labels. The data comes from a CSV loaded via d3.csv.

Eeravellisaimeghana
85% match
Loading thumbnail…

Reusable D3 Scatter Plot.

This reusable D3 scatter plot visualizes the Iris dataset, mapping petal and sepal dimensions for three species (setosa, versicolor, virginica) with distinct colors. A setInterval animation cycles through different x-axis attributes (petal_width, sepal_width, petal_length, sepal_length) every few seconds, updating the axes and point positions. Built with d3.scaleLinear, d3.extent, d3.axisLeft, and d3.axisBottom, the plot renders as an SVG with circles and includes custom legends and axis labels. The data comes from a CSV loaded via d3.csv.

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

Iris Dataset Scatter Plot for data visualization

This D3.js scatter plot visualizes the Iris dataset, mapping petal length and width for each sample while coloring points by species using a custom marker function. The chart displays axes labeled “PETAL LENGTH” and “SEPAL LENGTH” with rotated text, and uses d3.csv to load the data, d3.scaleLinear for scaling, and d3.axisLeft/axisBottom for tick marks. Rendered as SVG, the plot derives dimensions from window.innerWidth and window.innerHeight.

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

Iris Scatter Plot

This is a D3.js scatter plot that visualizes the Iris dataset, showing petal length against petal width for 150 flowers of three species. Each species is represented by a colored circle, with colors assigned using `d3.scaleOrdinal` (Iris-setosa in dark blue, Iris-versicolor in magenta, and Iris-virginica in light blue). The visualization uses `d3.scaleLinear` for both axes and renders the SVG elements with `axisBottom` and `axisLeft` for labeled tick marks. Data is loaded from a TSV file via `d3.tsv` and parsed before rendering.

JJepyagg
84% match