The multiple plotting example with Elegans

README.md

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.

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="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>