source: django_apps/running/static/year-total.js@ 311

function yearTotalGraph(data, binder) {
  if (data.length == 0) {
    return;
  }
  var start = data[0].x;
  var end = data[data.length - 1].x;
  
  /* Scales and sizing. */
  var w = 810,
      h1 = 300,
      h2 = 30,
      x = pv.Scale.linear(start, end).range(0, w),
      y = pv.Scale.linear(0, pv.max(data, function(d) d.y)).range(0, h2);
  
  /* Interaction state. Focus scales will have domain set on-render. */
  var i = {x:0, dx:w},
      fx = pv.Scale.linear().range(0, w),
      fy = pv.Scale.linear().range(0, h1);
  
  /* Root panel. */
  var vis = new pv.Panel().canvas(binder)
      .width(w)
      .height(h1 + 20 + h2)
      .bottom(20)
      .left(30)
      .right(20)
      .top(5);
  
  /* Focus panel (zoomed in). */
  var focus = vis.add(pv.Panel)
      .def("init", function() {
          var d1 = x.invert(i.x),
              d2 = x.invert(i.x + i.dx),
              dd = data.slice(
                  Math.max(0, pv.search.index(data, d1, function(d) d.x) - 1),
                  pv.search.index(data, d2, function(d) d.x) + 1);
          fx.domain(d1, d2);
          fy.domain(scale.checked ? [0, pv.max(dd, function(d) d.y) * 1.1] : y.domain());
          return dd;
        })
      .top(0)
      .height(h1);
  
  /* X-axis ticks. */
  focus.add(pv.Rule)
      .data(function() fx.ticks())
      .left(fx)
      .strokeStyle("#eee")
    .anchor("bottom").add(pv.Label)
      .text(fx.tickFormat);
  
  /* Y-axis ticks. */
  focus.add(pv.Rule)
      .data(function() fy.ticks(7))
      .bottom(fy)
      .strokeStyle(function(d) d ? "#aaa" : "#000")
    .anchor("left").add(pv.Label)
      .text(fy.tickFormat);
  
  /* Focus area chart. */
  focus.add(pv.Panel)
      .overflow("hidden")
    .add(pv.Area)
      .data(function() focus.init())
      .left(function(d) fx(d.x))
      .bottom(1)
      .height(function(d) fy(d.y))
      .fillStyle("lightsteelblue")
    .anchor("top").add(pv.Line)
      .fillStyle(null)
      .strokeStyle("steelblue")
      .lineWidth(2);
  
  /* Context panel (zoomed out). */
  var context = vis.add(pv.Panel)
      .bottom(0)
      .height(h2);
  
  /* X-axis ticks. */
  context.add(pv.Rule)
      .data(x.ticks())
      .left(x)
      .strokeStyle("#eee")
    .anchor("bottom").add(pv.Label)
      .text(x.tickFormat);
  
  /* Y-axis ticks. */
  context.add(pv.Rule)
      .bottom(0);
  
  /* Context area chart. */
  context.add(pv.Area)
      .data(data)
      .left(function(d) x(d.x))
      .bottom(1)
      .height(function(d) y(d.y))
      .fillStyle("lightsteelblue")
    .anchor("top").add(pv.Line)
      .strokeStyle("steelblue")
      .lineWidth(2);
  
  /* The selectable, draggable focus region. */
  context.add(pv.Panel)
      .data([i])
      .cursor("crosshair")
      .events("all")
      .event("mousedown", pv.Behavior.select())
      .event("select", focus)
    .add(pv.Bar)
      .left(function(d) d.x)
      .width(function(d) d.dx)
      .fillStyle("rgba(255, 128, 128, .4)")
      .cursor("move")
      .event("mousedown", pv.Behavior.drag())
      .event("drag", focus);
  
   vis.render();
}