Elegans 3D ScatterPlot

100%

Elegans 3D ScatterPlot

✓ Published0🌍 Public

Last edited Aug 7, 2017

Created on Feb 11, 2017

This interactive 3D scatterplot visualizes four series of randomly generated data points across X, Y, and Z coordinates, each series distinguished by a unique shape and color and toggled via the legend. The WebGL rendering relies on Three.js, while the chart configuration uses the dex.js library, specifically the `dex.charts.elegans.ScatterPlot` component with custom series definitions for shape and coordinate mapping. The plot supports mouse-wheel zoom, pan, and rotation with dampened inertia, but lacks tooltips and drop lines.

AI-generated description

Elegans 3D/WegGL Scatterplot

I've been searching for a nice WebGL scatterplot implementation for awhile now. I never could seem to work the kinks out of the one I had built.

So, I borrow from Elegans which is found here on github, the product of a brilliant young lady named Naoki Nishida.

This is a quick and dirty proof of concept, but I hope to eventually extend it to look more like this amazing example.

If you're on an IOS device, then you're probably not seeing anything special. Sorry for that, I don't make the rules.

About The Chart

The chart supports zoom in/out via mouse-wheel. Pan, rotate in the typical WebGL fashion. Naoki seems to have also introduced friction or some sort of dampening effect to the often irritating tendency of WebGL scatterplots to rotate endlessly.

This example graphs 3 series of data across the 3D X, Y and Z coordinates.

Each series has full control of how it is represented and gets assigned a different color as it goes. You can also interact with the legend to toggle the display of it's data.

Notably lacking are tooltips and drop lines orthogonal to the planes. All which I hope to contribute back to her project...when I can...

References

dex.js The main site

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

74% match

Loading thumbnail…

dex.js : ECharts Line Chart

This interactive 3D visualization renders a line chart using the ECharts-GL library, displaying synthetic sales and revenue data generated with the Faker library. The chart plots five employees' monthly performance across x, y, and z axes within a browser via dex.js, which integrates the ECharts-GL engine and jQuery UI for configuration. Users can filter data and adjust appearance options, including chart type, colormap, and axis styling, through a configuration pane built with dex.js components.

PPatMartin

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

73% match

Loading thumbnail…

2D/3D Scatterplot

This example displays 200 data points in a 2D scatterplot with a third dimension encoded along a skewed z-axis. Scrolling the mouse wheel moves a focal plane through the z-range, making points near the current z-position more opaque and larger, while distant points fade. The visualization uses D3 v3 with SVG circles, and includes x, y, and z axes with tick labels. Synthetic data is generated using `d3.random.normal` and functions of sine and cosine to create a three-dimensional correlation pattern.

AAndresAnayaIsaza

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

72% match

Loading thumbnail…

scatter

This example presents an animated scatterplot comparing two datasets loaded from separate JavaScript files. Green and red circles represent positive and negative y-values, transitioning between the datasets every three seconds. Built with D3 v4, the visualization uses `d3.scaleLinear` for axes and `d3.transition` to animate circle positions and radii. An SVG line marks the zero baseline, with axis updates handled by `d3.axisTop` and `d3.axisLeft`.

EEranM6

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

71% match

Loading thumbnail…

3D scatter plot-penguin dataset

A 3D scatter plot visualizes the penguin dataset, showing body mass, culmen length, and flipper length for three penguin species, with each species color-coded via a custom Plotly colorscale. The chart uses Plotly’s `scatter3d` trace type to render interactive markers, while D3 loads the CSV data and maps species names to numeric color values. Three.js is referenced in the README, though the actual visualization relies on Plotly’s WebGL rendering. The plot includes labeled axes and semi-transparent grid backgrounds for depth perception.

Yyamunayennem

71% match