HiDPI 3D Scatter Plot

100%

HiDPI 3D Scatter Plot

✓ Published0🌍 Public

Last edited Oct 1, 2019

Created on Oct 1, 2019

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.

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

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.

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

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

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

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

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

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

71% match

Loading thumbnail…

Fork of Fork of 3D Scatter Plot

A 3D scatter plot visualizes economic indicators as colored spheres positioned by x, y, and z attributes from a CSV file. The visualization slowly rotates continuously, while users can pan to adjust the viewing angle. Built with Three.js for WebGL rendering and D3 for data loading and scaling, the example uses D3's `scaleLinear`, `extent`, `csv`, `schemeCategory10`, and `zoom` APIs. Points are rendered as canvas-generated sprites with distinct colors from D3's categorical color scheme.

RRahulSai05

70% match