Using dbslice.render to draw a session with 2 plots (a scatter and a line plot, both generated with d3.js).
The github repository for dbslice is here.
Last active
April 8, 2018 00:28
-
-
Save grahampullan/e0ac9efe230b0cbf0eb5742598f8643a to your computer and use it in GitHub Desktop.
dbslice.render example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: mit |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"> | |
| <link rel="stylesheet" href="http://dbslice.org/dbslice.css"> | |
| </head> | |
| <body> | |
| <div class="container-fluid" id="target"> </div> | |
| <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"> </script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script> | |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script> | |
| <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 plots = []; | |
| // | |
| // Scatter plot | |
| // | |
| var m = 101; | |
| var points = []; | |
| for ( var i = 0; i < m; ++i ) { | |
| var theta = i * 2 * Math.PI / m; | |
| var point = { | |
| x : theta , | |
| y : Math.cos(theta) + 0.2 * Math.random() , | |
| colField : Math.round(i/5) | |
| }; | |
| points.push( point ); | |
| } | |
| var plot = { | |
| plotFunc : dbslice.d3Scatter, | |
| layout : { title : "Scatter plot", colWidth : 4, height : 400 }, | |
| data : { points : points } | |
| }; | |
| plots.push( plot ); | |
| // | |
| // Multiple lines plot | |
| // | |
| var m = 101 | |
| var line1 = []; | |
| var line2 = []; | |
| for ( var i = 0; i < m; ++i ) { | |
| var theta = i * 2. * Math.PI / m | |
| var point1 = { x : theta, y : Math.sin(theta) }; | |
| line1.push( point1 ); | |
| var point2 = { x : theta, y : 2.*Math.sin(2.*theta) }; | |
| line2.push( point2 ); | |
| } | |
| var plot = { | |
| plotFunc : dbslice.d3LineSeries, | |
| layout : { title : "Line plot", colWidth : 4, height : 400 }, | |
| data : { series : [ { label: "series 1", data: line1 } , | |
| { label: "series 2", data: line2 } ]} | |
| }; | |
| plots.push( plot ); | |
| var session = { | |
| title : "dbslice.render example", | |
| plotRows : [ { title: "Two types of plot", plots : plots } ] | |
| }; | |
| dbslice.render ( "target", session ); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment