Elegans 3D ScatterPlot

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

forked from PatMartin's block: Elegans 3D ScatterPlot

<!DOCTYPE html>
<meta charset="utf-8">
<style>
    html, body, #ScatterPlotParent {
        height: 100%;
        min-height: 100%;
        width: 100%;
        min-width: 100%;
    }
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.theme.min.css">
<link rel="stylesheet" href="https://dexjs.net/js/dex-jquery.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css"/>
<link rel="stylesheet" href="https://dexjs.net/js/dex-bootstrap.css">
<link rel="stylesheet" href="https://dexjs.net/js/dex.css"><div id="ScatterPlotParent"></div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://dexjs.net/js/dex-jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://dexjs.net/js/dex-bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://dexjs.net/js/dex-libs.js"></script>
<script src="https://dexjs.net/js/elegans.min.js"></script>
<script src="https://dexjs.net/js/dex.js"></script>

var scatterplot = dex.charts.elegans.ScatterPlot({
      'parent': '#ScatterPlotParent',
      'color': d3.scale.category10(),
      'csv': csv,
      'series': [
        {
          'name': 'series-a',
          'coordinates': {'x': 'x', 'y': 'y', 'z': 'a'},
          'shape': 'circle',
          'size': 1
        },
        {
          'name': 'series-b',
          'coordinates': {'x': 'x', 'y': 'y', 'z': 'b'},
          'shape': 'rect',
          'size': 1
        },
        {
          'name': 'series-c',
          'coordinates': {'x': 'x', 'y': 'y', 'z': 'c'},
          'shape': 'cross',
          'size': 1
        },
        {
          'name': 'series-d',
          'coordinates': {'x': 'x', 'y': 'y', 'z': 'd'},
          'shape': 'diamond',
          'size': 1
        }
      ]
    }
  ).render();

</script>

https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.min.js

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js

https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js

https://dexjs.net/js/dex-jquery.js

https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js

https://dexjs.net/js/dex-bootstrap.js

https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js

https://dexjs.net/js/dex-libs.js

https://dexjs.net/js/elegans.min.js

https://dexjs.net/js/dex.js