This is a sample to show how Elegans.Surface works. This shows a graph of the equetion below:
Click here to learn more about Elegans.
<html lang="en"> | |
<head> | |
<title>Plot Sample - Wireframe</title> | |
<link rel='stylesheet' href='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 data = {}; | |
var BIGIN=-10, END=10, INTERVAL = 0.5; | |
width = height = (END - BIGIN)/INTERVAL + 1; | |
data.x = [], data.z = [], data.y = []; | |
for(var i=0;i<height;i++)data.x.push([]); | |
for(var j=0;j<height;j++){ | |
var x = BIGIN + INTERVAL*j; | |
for(var i=0;i<width;i++){ | |
data.x[i][j] = x; | |
} | |
} | |
for(var i=0;i<width;i++){ | |
data.z.push([]); | |
var y = BIGIN + INTERVAL*i; | |
for(var j=0;j<height;j++){ | |
data.z[i][j] = y; | |
} | |
} | |
for(var i=0;i<width;i++){ | |
data.y.push([]); | |
for(var j=0;j<height;j++){ | |
var x=data.x[i][j], y=data.z[i][j]; | |
data.y[i][j] = Math.sin(Math.sqrt(x*x+y*y))/Math.sqrt(x*x+y*y); | |
} | |
} | |
d3.select('#vis').datum(data).call(Elegans.WireframePlot.color("#999999")); | |
}; | |
</script> | |
</head> | |
<body> | |
<div id="vis"> | |
</div> | |
</body> | |
</html> |