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