This is a sample to show how to generate a multiple plot with 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> |