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