Skip to main content
SimilarExport ZIP
100%

roomscale scatterplot

✓ Published0🌍 Public
AAndresAnayaIsaza
Last edited Feb 4, 2017
Created on Feb 4, 2017

An immersive 3D scatterplot of Fisher's Iris dataset renders as a room-scale scene in virtual reality. Users navigate the plot using WASD keys and mouse look controls, exploring three axes representing sepal length, petal width, and petal length, with data points color-coded by species. Built with A-Frame and D3.js, the visualization uses `d3.scaleLinear` and `d3.scaleOrdinal` to map measurements and categories to spatial positions and colors, rendered via WebGL in a browser. The scene includes axes labels, a legend, and supports HTC Vive controllers through the `vive-controls` component.

AI-generated description

a roomscale scatterplot targeting the HTC Vive

to enjoy this experience on the Vive, follow the instructions at https://webvr.info/ to download and install an experimental browser build that supports WebVR. from there, click the Enter VR HMD icon on the bottom right corner of the browser window to enter the scene.

for reference, this experience was developed on the Aug 29 2016 version 55.0.2842.0 build of Chromium with the flags --enable-webvr and --enable-gamepad-extensions

to explore the scene on a 2D screen, open in a new tab and then hold the S key until the scatterplot and legend come into view. from there you can navigate using the W A S D keys and look by clicking and dragging with the mouse

an iteration on the #aframevr + #d3js Iris Graph from @bryik_ws

featuring the famous Iris Dataset

for more A-Frame + D3 experiments search for aframe on blockbuilder search http://blockbuilder.org/search#text=aframe

for earlier iterations of this example and a nice unified commit history, visit the roomscale-scatter repo on github

added ="fly: true" so that you can look with the mouse and press w to travel up or down in the scene now there's a better user experience when experiencing this scene on a 2D screen with wasd-controls

<!-- Camera -->
  <a-entity camera look-controls wasd-controls="fly: true"></a-entity>

hat tip to @miquael + @donrmccurdy for suggesting this improvement

Original README.md

This is a proof-of-concept 3D visualization of Fisher's Iris data set. There is a lot of room for improvement, but it's neat to "walk" around the plot with the WASD keys and highlight data points using the mouse. An HMD friendly variant could be created by swapping out the mouse-cursor component for a standard gaze-cursor (for Google Cardboard) or vive-cursor (for HTC Vive).

It was built using a customized version of the aframe-scatter-component. The component source is hidden because the code is a bit long and gory, check the Gist if you must.

Note: click the display once before trying to move with WASD.

forked from <a href='http://bl.ocks.org/micahstubbs/'>micahstubbs</a>'s block: <a href='http://bl.ocks.org/micahstubbs/bef97f728381aca3f803a585581e7dbd'>roomscale scatterplot</a>

mit Licensed

Similar vizzes

Loading thumbnail…

roomscale scatterplot

An immersive, roomscale 3D scatterplot built with A-Frame and D3.js compares physical measurements (sepal length/width, petal length) across three Iris species, color-coded by species. The visualization renders 150 data points as spheres in a navigable virtual environment, supported by WebVR for HTC Vive headsets. D3 scales map CSV data values to spatial coordinates, while A-Frame's WASD controls, look-controls, and custom components enable freedom of movement through the plot.

AAndresAnayaIsaza
93% 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
77% match
Loading thumbnail…

Iris Scatter Plots_HW

This interactive scatter plot visualizes Fisher’s Iris dataset, letting users compare any two measured attributes (sepal/petal length and width) via dropdown menus. Points are colored by species using a ordinal scale, with axes and gridlines rendered through d3.axisBottom and d3.axisLeft. The React-driven interface updates scales, circles, and axis labels dynamically, while the SVG rendering uses d3.scaleLinear with nice extents. The code loads data via d3.csv and applies CSS opacity for overlapping points.

Sstephanie0215
76% match
Loading thumbnail…

Fork of ICE-BONUS_SCATTERPLOT_IRIS

This interactive scatterplot displays the classic Iris dataset as a 3D point cloud, projected onto an SVG canvas using the d3-3d library for D3 v4. The visualization renders the dataset's sepal and petal measurements as colored spheres within a rotating 3D grid, with axis labels indicating the variables. Users can drag the view to rotate the plot in both the X and Y dimensions, dynamically recalculating the projection. The implementation uses d3._3d() for 3D-to-2D projection, d3.drag() for interaction, and includes a separate AFRAME-based component for a WebGL/VR alternative view.

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

Iris Scatter Plot 0516017

This interactive scatter plot visualizes Fisher's Iris dataset, displaying the relationship between two flower measurements (from sepal length/width and petal length/width) as colored points representing the three Iris species. Users can dynamically switch which measurement appears on the x- and y-axes via dropdown menus rendered in HTML. The visualization uses D3 v5 to create an SVG canvas, with `d3.scaleLinear` for axes, `d3.axisLeft` and `d3.axisBottom` for tick marks, and `d3.scaleOrdinal` to map species to semi-transparent red, green, and blue fill colors. The code rebuilds the plot from scratch whenever an axis selection changes, removing all SVG elements and re-rendering from the source CSV data.

Ppotatowedges555
76% match