anchor.diff:  <!DOCTYPE html>
   <meta charset="utf-8">
   <%= include_gon %>
  +
  +
  +
  +
  +<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
  +<script src="//code.jquery.com/jquery-1.10.2.js"></script>
  +<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
  +<script>
  +$(function() {
  +    $( "#accordion" ).accordion();
  +});
  +</script>
  +
  +
  +
   <style>
   
   .chart {
  
positive.code: </style>
  <h1>Timeline With Brush</h1>
  
  <body>
  <BR>
  <div id="viz"></div>
  <svg class="chart"></svg>
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <script>
  
  
negative.code: .attr("height", 10)
  .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)
           .enter().append("g");
  
  
  
           bar.append("circle")
           .attr("cx",function(d, i) {
                   return x(d.git_tag);
           })
           .attr("r", 5)
           .attr("transform", "translate("+margin.left+",45)")
           .attr("stroke",
                 function(d) {
                   if(d.light_color == "amber")
                     {
                       return "orange";
                     }
                     return d.light_color;
                     })
                     .style("fill","rgba(60,179,113, 0)")
                     .attr("stroke-width", 3);
  
  
  
  
                     chart.append("g")
                     .attr("class", "x axis")
                     .attr("transform", "translate("+margin.left+",60)")
                     .call(xAxis)
                     .selectAll("text")
                     .attr("y", 6)
                     .attr("height",10)
                     // .attr("x", 6)
                     .style("text-anchor", "start");
  
  
                     var gBrush = chart.append("g")
                     .attr("class", "brush")
                     .call(brush)
                     .call(brush.event);
  
                     gBrush.selectAll("rect")
                     .attr("height", 40)
                     .attr("transform", "translate("+margin.left+",20)")
                     ;
  
  
  
                     function brushended()
                     {
  
                       if (!d3.event.sourceEvent) return; // only transition after input
                         console.log("BRUSH_END")
                         var extent0 = brush.extent();
  
  
                         var extent1 = extent0;
                         extent1[0] = Math.round(extent0[0]);
                         extent1[1] = Math.round(extent0[1]);
  
                         // console.log(extent0)
                         console.log(extent1[0]);
                         console.log(extent1[1]);
                         var start = extent1[0];
                       var end = extent1[1];
  
                       $.ajax({
                                url: "/viz/retrieve_session",
                                dataType:'json',
                                data: {
                                  'start': start,
                                  'end':end
                                },
                                success: function(data){
                                  console.log(data);
                                  // $.each(data, function(key, value) {
                                              //          // alert(key + ", " + $.param(value));
                                              //          console.log(key);
                                              //          console.log(value);
                                  // });
  
                                },
                                error: function(){
                                  console.error("AJAX");
                                },
                                type: 'GET'
                       });
  
  
  
  
  
  
  
  
  
  
                       d3.select(this).transition()
                       .call(brush.extent(extent1))
                       .call(brush.event);
                     }
  
  
  
  
                     </script>
  