All examples By author By category About

phil-pedruco

3D Scatterplot with csv upload

This is the second in a series of 3D scatter plots rendered using webGL. The first example used static data stored on the server whereas this example allows users to upload csv files. The files need to be in the following format:

Var 1a Var 2a Var 3a Var 1b Var 2b Var 3b Var 1c Var 2c Var 3c
x1 y1 z1 x2 y2 z2 x3 y3 z3
235 597 487 232 593 156 325 945 332
458 702 724 735 152 717 273 350 598
And if you don't have any data formatted just that way you can use [this csv file](https://gist.githubusercontent.com/phil-pedruco/9852362/raw/6764ed563711fa42dae37bf61f2c4e31a75b13cc/defaultData.csv). Note that you can only upload one csv at a time. If you want to view another csv just refresh the page.

You can change view by rotating cube using the mouse, move it left and right to rotate the cube around the y-axis and up and down to rotate it about the x adn z axis's. At present there's no relationship between the colours of the particles.

The visualisation uses the fantastic threejs library for the 3D and hooks into webGL. The example presented here is heavily based on the threejs scatter plot example. I've also used d3.js for some of convenience functions to import the data, scale the data and set up the ranges for the axis's.