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