Fetching contributors…
Cannot retrieve contributors at this time
76 lines (61 sloc) 1.82 KB
<!DOCTYPE html>
<meta charset="utf-8">
<title>Random</title>
<style>
@import url(../style.css);
</style>
<select id="step">
<option value="1e4">10 seconds</option>
<option value="6e4">1 minute</option>
<option value="3e5">5 minutes</option>
</select>
<script src="../d3.v3.min.js"></script>
<script src="../cubism.v1.min.js"></script>
<script>
//
var step = +cubism.option("step", 1e4);
//
var context = cubism.context()
.step(step)
.size(1440);
//
var cube = context.cube();
//
var horizon = context.horizon();
//
var metrics = [
cube.metric("sum(random)"),
cube.metric("sum(random(value))").divide(cube.metric("sum(random)")),
cube.metric("median(random(value))"),
cube.metric("min(random(value))"),
cube.metric("max(random(value))")
];
// Add top and bottom axes to display the time.
d3.select("body").selectAll(".axis")
.data(["top", "bottom"])
.enter().append("div")
.attr("class", function(d) { return d + " axis"; })
.each(function(d) { d3.select(this).call(context.axis().ticks(12).orient(d)); });
// Add a mouseover rule.
d3.select("body").append("div")
.attr("class", "rule")
.call(context.rule());
//
d3.select("body").selectAll(".horizon")
.data(metrics)
.enter().insert("div", ".bottom")
.attr("class", "horizon")
.call(horizon);
// On mousemove, reposition the chart values to match the rule.
context.on("focus", function(i) {
d3.selectAll(".value").style("right", i == null ? null : context.size() - i + "px");
});
// Initialize the step menu's selection.
d3.selectAll("#step option").property("selected", function() {
return this.value == step;
});
// Update the location on step change.
d3.select("#step").on("change", function() {
window.location = "?step=" + this.value + "&" + location.search.replace(/[?&]step=[^&]*(&|$)/g, "$1").substring(1);
});
</script>