anchor.diff:                console.log(extent1[0])
                 console.log(extent1[1])
   
  -              //   // if empty when rounded, use floor & ceil instead
  -              //   if (extent1[0] >= extent1[1]) {
  -                //       extent1[0] = d3.time.day.floor(extent0[0]);
  -                //       extent1[1] = d3.time.day.ceil(extent0[1]);
  -              //     }
  -
                 d3.select(this).transition()
                 .call(brush.extent(extent1))
                 .call(brush.event);
                 }
   
   
  -
  -
  -              // .attr("r", function(d, i) {
  -                         //         return x(1);
  -              // });
  -              // .attr("height", barHeight );
  -
  -
  -              // var margin = {top: 250, right: 40, bottom: 250, left: 40},
  -                //   width = 960 - margin.left - margin.right,
  -                //   height = 500 - margin.top - margin.bottom;
  -
  -              // var x = d3.time.scale()
  -              // .domain([new Date(2012, 0, 1), new Date(2013, 0, 1)])
  -              // .range([0, width]);
  -
  -              // var xAxis = d3.svg.axis()
  -              // .scale(x);
  -
  -              // var svg = d3.select("body").append("svg")
  -              // .attr("width", width + margin.left + margin.right)
  -              // .attr("height", height + margin.top + margin.bottom)
  -              // .append("g")
  -              // .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  -
  -              // svg.append("g")
  -              // .attr("class", "x axis")
  -              // .attr("transform", "translate(0," + height + ")")
  -              // .call(xAxis)
  -              // .selectAll("text")
  -              // .attr("y", 0)
  -              // .attr("x", 9)
  -              // .attr("dy", ".5em")
  -              // .attr("transform", "rotate(90)")
  -              // .style("text-anchor", "start");
  -
  -
  -
  -
  -              // var margin = {top: 250, right: 40, bottom: 250, left: 40},
  -                //   width = 960 - margin.left - margin.right,
  -                //   height = 500 - margin.top - margin.bottom;
  -
  -              // var x = d3.time.scale()
  -              // .domain([new Date(2012, 0, 1), new Date(2013, 0, 1)])
  -              // .range([0, width]);
  -
  -              // var xAxis = d3.svg.axis()
  -              // .scale(x);
  -
  -              // var svg = d3.select("body").append("svg")
  -              // .attr("width", width + margin.left + margin.right)
  -              // .attr("height", height + margin.top + margin.bottom)
  -              // .append("g")
  -              // .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  -
  -              // svg.append("g")
  -              // .attr("class", "x axis")
  -              // .attr("transform", "translate(0," + height + ")")
  -              // .call(xAxis)
  -              // .selectAll("text")
  -              // .attr("y", 0)
  -              // .attr("x", 9)
  -              // .attr("dy", ".35em")
  -              // .attr("transform", "rotate(90)")
  -              // .style("text-anchor", "start");
  -
  -
  -
  -              // bar.append("text")
  -              // .attr("x", function(d) { return x(d) - 3; })
  -              // .attr("y", barHeight / 2)
  -              // .attr("dy", ".35em")
  -              // .text(function(d) { return d; });
  -
  -              /*
  -var testData = [
  -  {times: [{"starting_time": 1, "ending_time": 2}, {"starting_time": 3, "ending_time": 4}]},
  -  {times: [{"starting_time": 4, "ending_time": 6}, {"starting_time": 2, "ending_time": 3}]},
  -  {times: [{"starting_time": 6, "ending_time": 8}]},
  -];
  -var width = 500;
  -  var chart = d3.timeline();
  -  var svg = d3.select("#timeline1").append("svg").attr("width", width)
  -  .datum(testData).call(chart);
  -// */
  -              // var testData = [
  -                //   {times: [{"starting_time": 1, "ending_time": 2}, {"starting_time": 3, "ending_time": 4}]},
  -                //   {times: [{"starting_time": 4, "ending_time": 6}, {"starting_time": 2, "ending_time": 3}]},
  -                //   {times: [{"starting_time": 6, "ending_time": 8}]},
  -              // ];
  -
  -              // var margin = {top: 200, right: 40, bottom: 200, left: 40},
  -                //   width = 960 - margin.left - margin.right,
  -                //   height = 500 - margin.top - margin.bottom;
  -
  -              // var x = d3.time.scale()
  -              // .domain([new Date(2013, 7, 1), new Date(2013, 7, 5) - 1])
  -              // .range([0, width]);
  -
  -              // // var brush = d3.svg.brush()
  -              // // .x(x)
  -              // // .extent([new Date(2013, 7, 2), new Date(2013, 7, 3)])
  -              // // .on("brushend", brushended);
  -
  -              // var svg = d3.select("body").append("svg")
  -              // .attr("width", width + margin.left + margin.right)
  -              // .attr("height", height + margin.top + margin.bottom)
  -              // .append("g")
  -              // .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  -
  -              // svg.append("rect")
  -              // .attr("class", "grid-background")
  -              // .attr("width", width)
  -              // .attr("height", height);
  -
  -              // svg.append("g")
  -              // .attr("class", "x grid")
  -              // .attr("transform", "translate(0," + height + ")")
  -              // .call(d3.svg.axis()
  -                       //       .scale(x)
  -                       //       .orient("bottom")
  -                       //       .ticks(d3.time.hours, 12)
  -                       //       .tickSize(-height)
  -                       //       .tickFormat(""))
  -              // .selectAll(".tick")
  -              // .classed("minor", function(d) { return d.getHours(); });
  -
  -              // svg.append("g")
  -              // .attr("class", "x axis")
  -              // .attr("transform", "translate(0," + height + ")")
  -              // .call(d3.svg.axis()
  -                       //       .scale(x)
  -                       //       .orient("bottom")
  -                       //       .ticks(d3.time.days)
  -                       //       .tickPadding(0))
  -              // .selectAll("text")
  -              // .attr("x", 6)
  -              // .style("text-anchor", null);
  -
  -              // var gBrush = svg.append("g")
  -              // .attr("class", "brush")
  -              // .call(brush)
  -              // .call(brush.event);
  -
  -              // gBrush.selectAll("rect")
  -              // .attr("height", height);
  -
  -              // function brushended() {
  -                //   if (!d3.event.sourceEvent) return; // only transition after input
  -                //     var extent0 = brush.extent(),
  -                //       extent1 = extent0.map(d3.time.day.round);
  -
  -                //     // if empty when rounded, use floor & ceil instead
  -                //     if (extent1[0] >= extent1[1]) {
  -                  //         extent1[0] = d3.time.day.floor(extent0[0]);
  -                  //         extent1[1] = d3.time.day.ceil(extent0[1]);
  -                //       }
  -
  -                //       d3.select(this).transition()
  -                //       .call(brush.extent(extent1))
  -                //       .call(brush.event);
  -              //       }
  -
                 </script>
  
positive.code: <meta charset="utf-8">
  <%= include_gon %>
  <style>
  
  /*.chart rect {
    fill: steelblue;
  }*/
  
  .chart {
    background-color: #efefef;
  
negative.code: .attr("stroke", "grey")
  .attr("fill", function(d) {
          if(d.tdd_color == "white"){return "gray";}
          else{return d.tdd_color;}})
            .attr("transform", "translate("+margin.left+",10)");
  
            var myLine = chart.append("svg:line")
            .attr("x1", margin.left)
            .attr("y1", 45)
            .attr("x2" ,function(d, i) {
                    return x(gon.compiles.length);
            })
            .attr("y2", 45)
            .style("stroke", "#737373");
  
            var bar = chart.selectAll("g")
            .data(data)
  