Skip to content

Instantly share code, notes, and snippets.

@PatMartin PatMartin/.block
Last active Aug 7, 2017

Embed
What would you like to do?
Elegans 3D ScatterPlot
license: mit

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

<!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
You can’t perform that action at this time.