Stroked/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    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

  
## index.html
<!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>


<script>
  var csv = new dex.csv(['x', 'y', 'a', 'b', 'c', 'd'],
    dex.datagen.randomMatrix({
      rows: 100, columns: 6, min: 0, max: 1000
    }));

  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>
	<!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>


	<script>
	var csv = new dex.csv(['x', 'y', 'a', 'b', 'c', 'd'],
	dex.datagen.randomMatrix({
	rows: 100, columns: 6, min: 0, max: 1000
	}));

	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>