Skip to content

Instantly share code, notes, and snippets.

@PatMartin

PatMartin/.block

Last active August 7, 2017 02:20
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save PatMartin/e0e3a3302f96ce7073eb0dd1df8a4512 to your computer and use it in GitHub Desktop.
Save PatMartin/e0e3a3302f96ce7073eb0dd1df8a4512 to your computer and use it in GitHub Desktop.
Download ZIP
Elegans 3D ScatterPlot
Raw
.block
license: mit
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

Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment