index.html
<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="//cdnjs.cloudflare.com/ajax/libs/three.js/r66/three.min.js"></script>
<script type="text/javascript" src="//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 STEP_NUM = 10000;
var p = 10, r = 28, b = 8/3;
var fx = function(x,y,z){return ((-1)*p*x + p*y)};
var fy = function(x,y,z){return ((-1)*x*z + r*x - y)};
var fz = function(x,y,z){return (x*y - b*z)};
var dt = 0.01;
var x = 1, y = 1, z = 1;
var x_arr = [], y_arr = [], z_arr = [];
for(var i=0;i < STEP_NUM;i++){
x += dt * fx(x,y,z)
y += dt * fy(x,y,z);
z += dt * fz(x,y,z);
x_arr.push(x);
y_arr.push(y);
z_arr.push(z);
}
var data = {x:x_arr, y:y_arr, z:z_arr};
var stage = new Elegans.Stage(d3.select("#vis")[0][0], {
width: 1000,
height: 800,
world_width: 700,
world_height: 700,
autorange: false,
range: {x: [-100, 40], y: [-30, 30], z: [0, 80]}
});
var line = new Elegans.Line(data, {
name: "hoge",
thickness: 2,
colors: ["#dd1c77","#dd1c77"]
});
stage.add(line);
stage.render();
};
</script>
</head>
<body>
<div id="vis">
</div>
</body>