Skip to main content
100%

Firefly Scatter Plot

✓ Published2🌍 Public
CCurran Kelleher
Last edited Oct 9, 2025
Created on Sep 20, 2019

This example shows the classic Iris dataset as a slowly rotating 3D scatter plot, with each flower species colored distinctly. The code maps three measured attributes (petal length, width, and sepal width) to the x, y, and z axes, rendering points as soft, glowing sprites using Three.js and its WebGL renderer. D3 handles data loading and scaling, while a custom radial gradient creates the firefly-like visual effect. The plot auto-rotates and also responds to mouse panning to adjust the viewing angle, all on a black, high-DPI canvas.

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.

Colors and gradient sprite idea inspired by Firefly Cartography.

MIT Licensed

Similar vizzes