anchor.diff:  console.log(phaseData);
   
   
  -var margin = {top: 20, right: 30, bottom: 30, left: 40},
  -  width = 960 - margin.left - margin.right,
  +var margin = {top: 20, right: 20, bottom: 30, left: 10},
  +  width = 530 - margin.left - margin.right,
     height = 500 - margin.top - margin.bottom;
   
   
  -var width = 400,
  -  barHeight = 20,
  +// var width = 400,
  +  var  barHeight = 50,
     color = d3.scale.category20c();
   
   var x = d3.scale.linear()
  -.domain([0, gon.compiles.length])
  -.range([0, width]);
  +.domain([1, gon.compiles.length])
  +.range([1, width-40]);
   
   var brush = d3.svg.brush()
   .x(x)
  
positive.code:         return x(d.first_compile_in_phase);
  })
  .attr("y", 10)
  .attr("width", 50)
  .attr("height", 100)
  ;
  
  
  // var rectangle = chart.append("rect")
  // .attr("x", 0)
  // .attr("y", 10)
  // .attr("width", 50)
  // .attr("height", 100);
  
  
  var myLine = chart.append("svg:line")
  .attr("x1", 30)
  .attr("y1", 10)
  .attr("x2", width+10)
  .attr("y2", 10)
  .style("stroke", "#737373");
  
  
  
  
  // var phases = chart.append(".phases")
  // .data(gon.phases)
  
  // var phases = chart.selectAll("f")
  // .data(phaseData)
  // .enter().append("f");
  
  // phases.append("rect")
  // // .style("fill","rgb(60,179,113)")
  // .attr("width", 100)
  // .attr("height", 20)
  // .attr("x",10)
  // .attr("y",4)
  // .attr("transform", "translate(5,10)");
  
  
  // //Make an SVG Container
  // var svgContainer = d3.select("body").append("svg")
  //                                     .attr("width", 200)
  //                                     .attr("height", 200);
  
  // //Draw the Rectangle
  // var rectangle = chart.append("rect")
  // .attr("x", 10)
  // .attr("y", 10)
  // .attr("width", 50)
  // .attr("height", 100);
  
  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(5,10)")
  .attr("stroke", function(d) {
          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(31," + barHeight + ")")
  .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", barHeight);
  
  
  
  function brushended() {
  
    if (!d3.event.sourceEvent) return; // only transition after input
      console.log("BRUSH_END")
      var extent0 = brush.extent();
      // extent1 = extent0.map(d3.time.day.round);
  
      console.log(extent0)
      console.log(Math.floor(extent0[0]))
      console.log(Math.ceil(extent0[1]))
  
      var extent1 = extent0;
      extent1[0] = Math.round(extent0[0]);
      extent1[1] = Math.round(extent0[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}]},
  
negative.code: .orient("bottom");
  
  
  
  var chart = d3.select(".chart")
  .attr("width", width)
  