A minimal dbslice.d3Scatter plot example.
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"> | |
</head> | |
<body> | |
<div id = "target" style = "width:400px"> </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/dbslice.js"></script> | |
<script> | |
var m = 5; | |
var n = 21; | |
var points = []; | |
for (var j = 0.; j < m; ++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) ), | |
colField : j/m | |
}; | |
points.push( point ); | |
} | |
} | |
var data = { points : points }; | |
var layout = { height : 400, xAxisLabel : "x axis", yAxisLabel : "y axis"}; | |
dbslice.d3Scatter.make( document.getElementById("target"), data, layout ); | |
</script> | |
</body> | |
</html> |