Trying out cubism

forked from bae25's block: Trying out cubism

<!DOCTYPE html>
     <head>
          <meta charset=utf-8>
          <link rel = stylesheet href = cubismstyle.css>
          <script src=https://d3js.org/d3.v3.min.js></script>
          <script src=https://square.github.io/cubism/cubism.v1.js></script>
     </head> 
     <body>
          <div id = content>
               <h3>Understanding <a href = https://square.github.io/cubism/>cubism</a></h3>
               <div id = demo>
                    <div id = update-time></div>
                    <div id = desc></div>
               </div>

context
    .on("change", function(start, stop) {
        d3.select("#update-time")
        .text("Last updated at " + stop + ".");
    });

d3.select("#demo")
    .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))});

d3.select("#demo")
  .append("div")
    .attr("class","rule")
  .call(context.rule());

//this is where the metrics are created     
var Data = d3.range(1,6).map(random);
var primary = Data[4];
var secondary = primary.shift(-30*60*1000); //why is this metric identical to the primary metric?
Data[5] = secondary;

d3.select("#demo")
    .selectAll(".horizon")
    .data(Data)
    .enter()
  .insert("div",".bottom")
    .attr("class","horizon")
    .call(context.horizon()
    .extent([-10, 10]))

context.on("focus",function(i) {
        d3.selectAll(".value")
           .style("right",i == null?null:context.size()-i+"px")});