dbslice.d3LineSeries plot. Press the Click to change button to change the data, and update the plot.
The github repository for dbslice is here.
license: mit |
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | |
<link rel="stylesheet" href="http://dbslice.org/dbslice.css"> | |
</head> | |
<body> | |
<button onclick="update()">Click to change</button> | |
<div id = "target" style = "width:800px"> </div> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script> | |
<script src="http://dbslice.org/d3-tip.js"></script> | |
<script src="http://dbslice.org/dbslice.js"></script> | |
<script> | |
var updateCall; | |
var series = []; | |
var n = 50; | |
var m = 10; | |
// Initial data | |
for ( var j = 0.; j < m; ++j ) { | |
var line = { | |
data : [], | |
label : "Line "+j | |
}; | |
for ( var i = 0.; i < n; ++i ) { | |
var point = { | |
x : i/n, | |
y : 0.125 * Math.cos( i/n * 2 * Math.PI) * (1 - Math.cos( j/m * 2 * Math.PI) ) | |
}; | |
line.data.push( point ); | |
} | |
series.push( line ); | |
} | |
var data = { series : series }; | |
var layout ={ height : 600, xAxisLabel : "x axis", yAxisLabel : "y axis" }; | |
updateCall = 1; | |
// plot initial data | |
dbslice.d3LineSeries.make( document.getElementById("target"), data, layout); | |
function update() { | |
if ( updateCall == 1 ) { | |
var series=[]; | |
for ( var j = 0.; j < m; ++j ) { | |
var line = { | |
data : [], | |
label : "Line "+j | |
}; | |
for ( var i = 0.; i < n; ++i ) { | |
var point = { | |
x : i/n, | |
y : 0.25 * Math.cos( i/n * 4 * Math.PI) * (1 - Math.cos( j/m * 2 * Math.PI) ) | |
}; | |
line.data.push( point ); | |
} | |
series.push( line ); | |
} | |
updateCall=0; | |
} else { | |
var series=[]; | |
for ( var j = 0.; j < m; ++j ) { | |
var line = { | |
data : [], | |
label : "Line "+j | |
}; | |
for ( var i = 0.; i < n; ++i ) { | |
var point = { | |
x : i/n, | |
y : 0.125 * Math.cos( i/n * 2 * Math.PI) * (1 - Math.cos( j/m * 2 * Math.PI) ) | |
}; | |
line.data.push( point ); | |
} | |
series.push( line ); | |
} | |
updateCall=1; | |
} | |
var data = { series : series }; | |
var layout={ height : 400, xAxisLabel : "x axis", yAxisLabel : "y axis" }; | |
// plot new data | |
dbslice.d3LineSeries.update( document.getElementById("target"), data, layout); | |
} | |
</script> | |
</body> | |
</html> |