HiDPI 3D Scatter Plot

100%

HiDPI 3D Scatter Plot

✓ Published2🌍 Public

Last edited Oct 4, 2019

Created on Sep 30, 2019

This example visualizes mountain elevation data as a 3D scatter plot built with Three.js and D3. It uses a HiDPI canvas technique with a scale factor of 2 to render crisp points on high-pixel-density displays. The visualization loads CSV data via the d3.csv function and displays each data point as a cube, with multiple cubes stacked vertically to represent elevation values. The scene includes a textured ground plane and supports interactive rotation through Three.js OrbitControls, allowing viewers to explore the 3D data from different angles.

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…

HiDPI 3D Scatter Plot

A HiDPI 3D scatter plot renders ten thousand cubes on a checkerboard ground plane using Three.js. The visualization merges individual cube geometries into a single mesh via `THREE.BufferGeometryUtils.mergeBufferGeometries` and applies normal-based coloring. Data comes from a Medical Cost CSV loaded with D3's `csv` function. The camera orbits interactively through Three.js OrbitControls, while the canvas is scaled by a factor of two for high-pixel-density displays.

Mmeperezcuello

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

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

79% match

Loading thumbnail…

3D Scatter Plot

This 3D scatter plot visualizes a dataset of higher education providers using Three.js and D3 v5, mapping three columns to x, y, and z coordinates and coloring points by species. The code scales each dimension to a unit cube, renders circles as WebGL sprites with CanvasTexture, and animates continuous rotation via D3’s zoom interaction’s `translateBy` method. Users can pan to orbit the scene, with rotation limited to prevent pole inversion, using data from a CSV loaded with `d3.csv`.

Wwaqastufail

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

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

74% match

Loading thumbnail…

3D Bar Plot

This example displays two sets of three-dimensional scatter points from a CSV file, using colored markers to distinguish between datasets. The visualization leverages the Plotly JavaScript library through the `Plotly.newPlot` function to render an interactive 3D scene. The data is loaded remotely via `d3.csv`, and the visualization employs a scatter3d trace type with configurable marker size, opacity, and line properties. The scene is presented with zero margins to maximize the plotting area, and the renderable is provided through an SVG or web-based rendering approach.

Ssaijahnaviappineni

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

73% match