Permalink
Cannot retrieve contributors at this time
Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.
Sign up
Fetching contributors…
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> |