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.
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="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> |