Skip to main content
SimilarExport ZIP
100%

roomscale scatterplot

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

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.

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>

forked from <a href='http://bl.ocks.org/AndresAnayaIsaza/'>AndresAnayaIsaza</a>'s block: <a href='http://bl.ocks.org/AndresAnayaIsaza/07c76040d750e87d546aca24393d9818'>roomscale scatterplot</a>

mit Licensed

Similar vizzes

Loading thumbnail…

roomscale scatterplot

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.

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

Iris Scatter Plot v3

This interactive scatter plot visualizes the Iris dataset, plotting sepal and petal measurements against each other. Users can select different attributes for the x and y axes via dropdown menus, with each circular mark representing an individual flower. The visualization uses React components with D3 v7 scales (scaleLinear) and the extent function to compute domains, rendering SVG circles with hover tooltips. Data loads asynchronously from a CSV file using the d3.csv method.

JJohn Lewis
78% match
Loading thumbnail…

Scatter Plot

This interactive scatter plot visualizes the Iris dataset, displaying measurements of sepal and petal length and width for three flower species. Users can select which features to plot on the x- and y-axes using dropdown menus, with points color-coded by species (setosa, versicolor, virginica). The visualization uses D3 v5 to load and parse the CSV data, dynamically render SVG circles and axes with d3.axisBottom and d3.axisLeft, and animate point appearance via transition().duration() with staggered delays.

AAmanda-Tai
78% 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
78% match
Loading thumbnail…

3-D Scatter Plot

This example visualizes the classic Iris dataset as an interactive 3-D scatter plot, mapping sepal length, sepal width, and petal length onto the x, y, and z axes. Points are colored by species—setosa, versicolor, and virginica—using a custom Plotly colorscale. The visualization is built with Plotly’s `scatter3d` trace type, which renders via WebGL, and uses D3 to load and parse the CSV data. Each axis is labeled and given a distinct background color for clarity.

Aavinash021997
78% match
Loading thumbnail…

scatter plot iris

This interactive scatter plot visualizes the Iris flower dataset, letting users compare four measurements (sepal and petal length and width) by selecting axes from dropdown menus. The code uses D3 v5 for scales and axes, builds the visualization with React, and loads data from iris.csv. It demonstrates dynamic axis updates and customizable tick styling on an SVG render.

Ppei9223
78% match