| 1 | function yearTotalGraph(data, binder) {
|
|---|
| 2 | var start = data[0].x;
|
|---|
| 3 | var end = data[data.length - 1].x;
|
|---|
| 4 |
|
|---|
| 5 | /* Scales and sizing. */
|
|---|
| 6 | var w = 810,
|
|---|
| 7 | h1 = 300,
|
|---|
| 8 | h2 = 30,
|
|---|
| 9 | x = pv.Scale.linear(start, end).range(0, w),
|
|---|
| 10 | y = pv.Scale.linear(0, pv.max(data, function(d) d.y)).range(0, h2);
|
|---|
| 11 |
|
|---|
| 12 | /* Interaction state. Focus scales will have domain set on-render. */
|
|---|
| 13 | var i = {x:200, dx:100},
|
|---|
| 14 | fx = pv.Scale.linear().range(0, w),
|
|---|
| 15 | fy = pv.Scale.linear().range(0, h1);
|
|---|
| 16 |
|
|---|
| 17 | /* Root panel. */
|
|---|
| 18 | var vis = new pv.Panel().canvas(binder)
|
|---|
| 19 | .width(w)
|
|---|
| 20 | .height(h1 + 20 + h2)
|
|---|
| 21 | .bottom(20)
|
|---|
| 22 | .left(30)
|
|---|
| 23 | .right(20)
|
|---|
| 24 | .top(5);
|
|---|
| 25 |
|
|---|
| 26 | /* Focus panel (zoomed in). */
|
|---|
| 27 | var focus = vis.add(pv.Panel)
|
|---|
| 28 | .def("init", function() {
|
|---|
| 29 | var d1 = x.invert(i.x),
|
|---|
| 30 | d2 = x.invert(i.x + i.dx),
|
|---|
| 31 | dd = data.slice(
|
|---|
| 32 | Math.max(0, pv.search.index(data, d1, function(d) d.x) - 1),
|
|---|
| 33 | pv.search.index(data, d2, function(d) d.x) + 1);
|
|---|
| 34 | fx.domain(d1, d2);
|
|---|
| 35 | fy.domain(scale.checked ? [0, pv.max(dd, function(d) d.y)] : y.domain());
|
|---|
| 36 | return dd;
|
|---|
| 37 | })
|
|---|
| 38 | .top(0)
|
|---|
| 39 | .height(h1);
|
|---|
| 40 |
|
|---|
| 41 | /* X-axis ticks. */
|
|---|
| 42 | focus.add(pv.Rule)
|
|---|
| 43 | .data(function() fx.ticks())
|
|---|
| 44 | .left(fx)
|
|---|
| 45 | .strokeStyle("#eee")
|
|---|
| 46 | .anchor("bottom").add(pv.Label)
|
|---|
| 47 | .text(fx.tickFormat);
|
|---|
| 48 |
|
|---|
| 49 | /* Y-axis ticks. */
|
|---|
| 50 | focus.add(pv.Rule)
|
|---|
| 51 | .data(function() fy.ticks(7))
|
|---|
| 52 | .bottom(fy)
|
|---|
| 53 | .strokeStyle(function(d) d ? "#aaa" : "#000")
|
|---|
| 54 | .anchor("left").add(pv.Label)
|
|---|
| 55 | .text(fy.tickFormat);
|
|---|
| 56 |
|
|---|
| 57 | /* Focus area chart. */
|
|---|
| 58 | focus.add(pv.Panel)
|
|---|
| 59 | .overflow("hidden")
|
|---|
| 60 | .add(pv.Area)
|
|---|
| 61 | .data(function() focus.init())
|
|---|
| 62 | .left(function(d) fx(d.x))
|
|---|
| 63 | .bottom(1)
|
|---|
| 64 | .height(function(d) fy(d.y))
|
|---|
| 65 | .fillStyle("lightsteelblue")
|
|---|
| 66 | .anchor("top").add(pv.Line)
|
|---|
| 67 | .fillStyle(null)
|
|---|
| 68 | .strokeStyle("steelblue")
|
|---|
| 69 | .lineWidth(2);
|
|---|
| 70 |
|
|---|
| 71 | /* Context panel (zoomed out). */
|
|---|
| 72 | var context = vis.add(pv.Panel)
|
|---|
| 73 | .bottom(0)
|
|---|
| 74 | .height(h2);
|
|---|
| 75 |
|
|---|
| 76 | /* X-axis ticks. */
|
|---|
| 77 | context.add(pv.Rule)
|
|---|
| 78 | .data(x.ticks())
|
|---|
| 79 | .left(x)
|
|---|
| 80 | .strokeStyle("#eee")
|
|---|
| 81 | .anchor("bottom").add(pv.Label)
|
|---|
| 82 | .text(x.tickFormat);
|
|---|
| 83 |
|
|---|
| 84 | /* Y-axis ticks. */
|
|---|
| 85 | context.add(pv.Rule)
|
|---|
| 86 | .bottom(0);
|
|---|
| 87 |
|
|---|
| 88 | /* Context area chart. */
|
|---|
| 89 | context.add(pv.Area)
|
|---|
| 90 | .data(data)
|
|---|
| 91 | .left(function(d) x(d.x))
|
|---|
| 92 | .bottom(1)
|
|---|
| 93 | .height(function(d) y(d.y))
|
|---|
| 94 | .fillStyle("lightsteelblue")
|
|---|
| 95 | .anchor("top").add(pv.Line)
|
|---|
| 96 | .strokeStyle("steelblue")
|
|---|
| 97 | .lineWidth(2);
|
|---|
| 98 |
|
|---|
| 99 | /* The selectable, draggable focus region. */
|
|---|
| 100 | context.add(pv.Panel)
|
|---|
| 101 | .data([i])
|
|---|
| 102 | .cursor("crosshair")
|
|---|
| 103 | .events("all")
|
|---|
| 104 | .event("mousedown", pv.Behavior.select())
|
|---|
| 105 | .event("select", focus)
|
|---|
| 106 | .add(pv.Bar)
|
|---|
| 107 | .left(function(d) d.x)
|
|---|
| 108 | .width(function(d) d.dx)
|
|---|
| 109 | .fillStyle("rgba(255, 128, 128, .4)")
|
|---|
| 110 | .cursor("move")
|
|---|
| 111 | .event("mousedown", pv.Behavior.drag())
|
|---|
| 112 | .event("drag", focus);
|
|---|
| 113 |
|
|---|
| 114 | vis.render();
|
|---|
| 115 | }
|
|---|
