Skip to content

Instantly share code, notes, and snippets.

@domitry

domitry/README.md

Last active Aug 29, 2015
Embed
What would you like to do?
The multiple plotting example with Elegans

About this sample

This is a sample to show how to generate a multiple plot with Elegans.

About Elegans

Click here to learn more about Elegans.

<html lang="en">
<head>
<title>Plot Sample - Line</title>
<link rel='stylesheet' href="https://rawgit.com/domitry/elegans/master/examples/common.css">
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r66/three.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.4.4/d3.min.js"></script>
<script type="text/javascript" src="https://rawgit.com/domitry/elegans/master/release/elegans.min.js"></script>
<script type="text/javascript">
window.onload = function(){
var BEGIN = -10, END = 10, INTERVAL = 0.5, DIFF_MAX=4;
var line_data = {x:[],y:[],z:[]};
var particles_data = {x:[],y:[],z:[]};
for(var x=BEGIN;x<=END;x+=INTERVAL){
var y = -1*x;
var z = x*x+y*y;
line_data.x.push(x);
line_data.y.push(y);
line_data.z.push(z);
}
for(var x=BEGIN;x<=END;x+=INTERVAL*1.5){
var y = -1*x;
var z = x*x+y*y;
particles_data.x.push(x + (Math.random()-0.5)*DIFF_MAX);
particles_data.y.push(y + (Math.random()-0.5)*DIFF_MAX);
particles_data.z.push(z + (Math.random()-0.5)*DIFF_MAX);
}
var stage = new Elegans.Stage(d3.select("#vis")[0][0]);
var line = new Elegans.Line(line_data, {
name: "z = x^2 + y^2 (y = -x, x=-10..10)",
thickness: 5,
colors: ["#dd1c77","#dd1c77"]
})
var particles = new Elegans.Particles(particles_data, {
name: "particles",
size: 0.8,
color: "#c994c7"
});
stage.add(particles);
stage.add(line);
stage.render();
};
</script>
</head>
<body>
<div id="vis">
</div>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment