Permalink
Cannot retrieve contributors at this time
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<title>Klout SwimLanes</title> | |
<style> | |
@import url(bootstrap.css); | |
@import url(style.css); | |
body { | |
padding-top: 20px; /* 60px to make the container go all the way to the bottom of the topbar */ | |
} | |
</style> | |
<body> | |
<div class="navbar navbar-fixed-top"> | |
<div class="navbar-inner"> | |
Graphite Metrics | |
</div> | |
</div> | |
<script src="d3.v2.js"></script> | |
<script src="cubism.v1.js"></script> | |
<script> | |
var context = cubism.context() | |
.serverDelay(15 * 1000) // allow 15 seconds of collection lag | |
.step(15000) // fifteen seconds per value | |
.size(1440); // fetch 1440 values (720p) | |
var graphite = context.graphite("http://graphite"); | |
var api_metrics = [ | |
graphite.metric("my.graphite.metric1").alias("my_name1"), | |
graphite.metric("my.graphite.metric2").alias("my_name2"), | |
graphite.metric("my.graphite.metric3").alias("my_name3"), | |
graphite.metric("my.graphite.metric4").alias("my_name4") | |
]; | |
var data_metrics = [ | |
graphite.metric("my.graphite.metric").alias("my_name"), | |
graphite.metric("my.graphite.metric2").alias("my_name2") | |
]; | |
var horizon = context.horizon().colors(["#08519c", "#*82bd", "#6baed6", "#fee6ce", "#fdae6b", "#e6550d" ]); | |
var horizon2 = context.horizon().colors(["#ddic77", "#c994c7", "#e7eief","#efedf5", "#bcbddc", "#756bb1" ]); | |
d3.select("body").selectAll(".axis") | |
.data(["top", "bottom"]) | |
.enter().append("div").attr("class", "fluid-row") | |
.attr("class", function(d) { return d + " axis"; }) | |
.each(function(d) { d3.select(this).call(context.axis().ticks(12).orient(d)); }); | |
d3.select("body").append("div") | |
.attr("class", "rule") | |
.call(context.rule()); | |
d3.select("body").selectAll(".horizon") | |
.data(api_metrics) | |
.enter().insert("div", ".bottom") | |
.attr("class", "horizon").call(horizon.extent([-1000, 1000])); | |
d3.select("body").selectAll(".horizon2") | |
.data(data_metrics) | |
.enter().insert("div", ".bottom") | |
.attr("class", "horizon").call(horizon2.extent([-1000, 1000])); | |
context.on("focus", function(i) { | |
d3.selectAll(".value").style("right", i == null ? null : context.size() - 1 - i + "px"); | |
}); | |
</script> |