d3_rails 0.0.1 → 0.0.2

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,6 @@
1
+ module D3Rails
2
+ module Rails
3
+ class Engine < ::Rails::Engine
4
+ end
5
+ end
6
+ end
@@ -1,3 +1,3 @@
1
1
  module D3Rails
2
- VERSION = "0.0.1"
2
+ VERSION = "0.0.2"
3
3
  end
@@ -0,0 +1,984 @@
1
+ (function(){d3.chart = {};
2
+ // Inspired by http://informationandvisualization.de/blog/box-plot
3
+ d3.chart.box = function() {
4
+ var width = 1,
5
+ height = 1,
6
+ duration = 0,
7
+ domain = null,
8
+ value = Number,
9
+ whiskers = d3_chart_boxWhiskers,
10
+ quartiles = d3_chart_boxQuartiles,
11
+ tickFormat = null;
12
+
13
+ // For each small multiple…
14
+ function box(g) {
15
+ g.each(function(d, i) {
16
+ d = d.map(value).sort(d3.ascending);
17
+ var g = d3.select(this),
18
+ n = d.length,
19
+ min = d[0],
20
+ max = d[n - 1];
21
+
22
+ // Compute quartiles. Must return exactly 3 elements.
23
+ var quartileData = d.quartiles = quartiles(d);
24
+
25
+ // Compute whiskers. Must return exactly 2 elements, or null.
26
+ var whiskerIndices = whiskers && whiskers.call(this, d, i),
27
+ whiskerData = whiskerIndices && whiskerIndices.map(function(i) { return d[i]; });
28
+
29
+ // Compute outliers. If no whiskers are specified, all data are "outliers".
30
+ // We compute the outliers as indices, so that we can join across transitions!
31
+ var outlierIndices = whiskerIndices
32
+ ? d3.range(0, whiskerIndices[0]).concat(d3.range(whiskerIndices[1] + 1, n))
33
+ : d3.range(n);
34
+
35
+ // Compute the new x-scale.
36
+ var x1 = d3.scale.linear()
37
+ .domain(domain && domain.call(this, d, i) || [min, max])
38
+ .range([height, 0]);
39
+
40
+ // Retrieve the old x-scale, if this is an update.
41
+ var x0 = this.__chart__ || d3.scale.linear()
42
+ .domain([0, Infinity])
43
+ .range(x1.range());
44
+
45
+ // Stash the new scale.
46
+ this.__chart__ = x1;
47
+
48
+ // Note: the box, median, and box tick elements are fixed in number,
49
+ // so we only have to handle enter and update. In contrast, the outliers
50
+ // and other elements are variable, so we need to exit them! Variable
51
+ // elements also fade in and out.
52
+
53
+ // Update center line: the vertical line spanning the whiskers.
54
+ var center = g.selectAll("line.center")
55
+ .data(whiskerData ? [whiskerData] : []);
56
+
57
+ center.enter().insert("svg:line", "rect")
58
+ .attr("class", "center")
59
+ .attr("x1", width / 2)
60
+ .attr("y1", function(d) { return x0(d[0]); })
61
+ .attr("x2", width / 2)
62
+ .attr("y2", function(d) { return x0(d[1]); })
63
+ .style("opacity", 1e-6)
64
+ .transition()
65
+ .duration(duration)
66
+ .style("opacity", 1)
67
+ .attr("y1", function(d) { return x1(d[0]); })
68
+ .attr("y2", function(d) { return x1(d[1]); });
69
+
70
+ center.transition()
71
+ .duration(duration)
72
+ .style("opacity", 1)
73
+ .attr("y1", function(d) { return x1(d[0]); })
74
+ .attr("y2", function(d) { return x1(d[1]); });
75
+
76
+ center.exit().transition()
77
+ .duration(duration)
78
+ .style("opacity", 1e-6)
79
+ .attr("y1", function(d) { return x1(d[0]); })
80
+ .attr("y2", function(d) { return x1(d[1]); })
81
+ .remove();
82
+
83
+ // Update innerquartile box.
84
+ var box = g.selectAll("rect.box")
85
+ .data([quartileData]);
86
+
87
+ box.enter().append("svg:rect")
88
+ .attr("class", "box")
89
+ .attr("x", 0)
90
+ .attr("y", function(d) { return x0(d[2]); })
91
+ .attr("width", width)
92
+ .attr("height", function(d) { return x0(d[0]) - x0(d[2]); })
93
+ .transition()
94
+ .duration(duration)
95
+ .attr("y", function(d) { return x1(d[2]); })
96
+ .attr("height", function(d) { return x1(d[0]) - x1(d[2]); });
97
+
98
+ box.transition()
99
+ .duration(duration)
100
+ .attr("y", function(d) { return x1(d[2]); })
101
+ .attr("height", function(d) { return x1(d[0]) - x1(d[2]); });
102
+
103
+ // Update median line.
104
+ var medianLine = g.selectAll("line.median")
105
+ .data([quartileData[1]]);
106
+
107
+ medianLine.enter().append("svg:line")
108
+ .attr("class", "median")
109
+ .attr("x1", 0)
110
+ .attr("y1", x0)
111
+ .attr("x2", width)
112
+ .attr("y2", x0)
113
+ .transition()
114
+ .duration(duration)
115
+ .attr("y1", x1)
116
+ .attr("y2", x1);
117
+
118
+ medianLine.transition()
119
+ .duration(duration)
120
+ .attr("y1", x1)
121
+ .attr("y2", x1);
122
+
123
+ // Update whiskers.
124
+ var whisker = g.selectAll("line.whisker")
125
+ .data(whiskerData || []);
126
+
127
+ whisker.enter().insert("svg:line", "circle, text")
128
+ .attr("class", "whisker")
129
+ .attr("x1", 0)
130
+ .attr("y1", x0)
131
+ .attr("x2", width)
132
+ .attr("y2", x0)
133
+ .style("opacity", 1e-6)
134
+ .transition()
135
+ .duration(duration)
136
+ .attr("y1", x1)
137
+ .attr("y2", x1)
138
+ .style("opacity", 1);
139
+
140
+ whisker.transition()
141
+ .duration(duration)
142
+ .attr("y1", x1)
143
+ .attr("y2", x1)
144
+ .style("opacity", 1);
145
+
146
+ whisker.exit().transition()
147
+ .duration(duration)
148
+ .attr("y1", x1)
149
+ .attr("y2", x1)
150
+ .style("opacity", 1e-6)
151
+ .remove();
152
+
153
+ // Update outliers.
154
+ var outlier = g.selectAll("circle.outlier")
155
+ .data(outlierIndices, Number);
156
+
157
+ outlier.enter().insert("svg:circle", "text")
158
+ .attr("class", "outlier")
159
+ .attr("r", 5)
160
+ .attr("cx", width / 2)
161
+ .attr("cy", function(i) { return x0(d[i]); })
162
+ .style("opacity", 1e-6)
163
+ .transition()
164
+ .duration(duration)
165
+ .attr("cy", function(i) { return x1(d[i]); })
166
+ .style("opacity", 1);
167
+
168
+ outlier.transition()
169
+ .duration(duration)
170
+ .attr("cy", function(i) { return x1(d[i]); })
171
+ .style("opacity", 1);
172
+
173
+ outlier.exit().transition()
174
+ .duration(duration)
175
+ .attr("cy", function(i) { return x1(d[i]); })
176
+ .style("opacity", 1e-6)
177
+ .remove();
178
+
179
+ // Compute the tick format.
180
+ var format = tickFormat || x1.tickFormat(8);
181
+
182
+ // Update box ticks.
183
+ var boxTick = g.selectAll("text.box")
184
+ .data(quartileData);
185
+
186
+ boxTick.enter().append("svg:text")
187
+ .attr("class", "box")
188
+ .attr("dy", ".3em")
189
+ .attr("dx", function(d, i) { return i & 1 ? 6 : -6 })
190
+ .attr("x", function(d, i) { return i & 1 ? width : 0 })
191
+ .attr("y", x0)
192
+ .attr("text-anchor", function(d, i) { return i & 1 ? "start" : "end"; })
193
+ .text(format)
194
+ .transition()
195
+ .duration(duration)
196
+ .attr("y", x1);
197
+
198
+ boxTick.transition()
199
+ .duration(duration)
200
+ .text(format)
201
+ .attr("y", x1);
202
+
203
+ // Update whisker ticks. These are handled separately from the box
204
+ // ticks because they may or may not exist, and we want don't want
205
+ // to join box ticks pre-transition with whisker ticks post-.
206
+ var whiskerTick = g.selectAll("text.whisker")
207
+ .data(whiskerData || []);
208
+
209
+ whiskerTick.enter().append("svg:text")
210
+ .attr("class", "whisker")
211
+ .attr("dy", ".3em")
212
+ .attr("dx", 6)
213
+ .attr("x", width)
214
+ .attr("y", x0)
215
+ .text(format)
216
+ .style("opacity", 1e-6)
217
+ .transition()
218
+ .duration(duration)
219
+ .attr("y", x1)
220
+ .style("opacity", 1);
221
+
222
+ whiskerTick.transition()
223
+ .duration(duration)
224
+ .text(format)
225
+ .attr("y", x1)
226
+ .style("opacity", 1);
227
+
228
+ whiskerTick.exit().transition()
229
+ .duration(duration)
230
+ .attr("y", x1)
231
+ .style("opacity", 1e-6)
232
+ .remove();
233
+ });
234
+ d3.timer.flush();
235
+ }
236
+
237
+ box.width = function(x) {
238
+ if (!arguments.length) return width;
239
+ width = x;
240
+ return box;
241
+ };
242
+
243
+ box.height = function(x) {
244
+ if (!arguments.length) return height;
245
+ height = x;
246
+ return box;
247
+ };
248
+
249
+ box.tickFormat = function(x) {
250
+ if (!arguments.length) return tickFormat;
251
+ tickFormat = x;
252
+ return box;
253
+ };
254
+
255
+ box.duration = function(x) {
256
+ if (!arguments.length) return duration;
257
+ duration = x;
258
+ return box;
259
+ };
260
+
261
+ box.domain = function(x) {
262
+ if (!arguments.length) return domain;
263
+ domain = x == null ? x : d3.functor(x);
264
+ return box;
265
+ };
266
+
267
+ box.value = function(x) {
268
+ if (!arguments.length) return value;
269
+ value = x;
270
+ return box;
271
+ };
272
+
273
+ box.whiskers = function(x) {
274
+ if (!arguments.length) return whiskers;
275
+ whiskers = x;
276
+ return box;
277
+ };
278
+
279
+ box.quartiles = function(x) {
280
+ if (!arguments.length) return quartiles;
281
+ quartiles = x;
282
+ return box;
283
+ };
284
+
285
+ return box;
286
+ };
287
+
288
+ function d3_chart_boxWhiskers(d) {
289
+ return [0, d.length - 1];
290
+ }
291
+
292
+ function d3_chart_boxQuartiles(d) {
293
+ return [
294
+ d3.quantile(d, .25),
295
+ d3.quantile(d, .5),
296
+ d3.quantile(d, .75)
297
+ ];
298
+ }
299
+ // Chart design based on the recommendations of Stephen Few. Implementation
300
+ // based on the work of Clint Ivy, Jamie Love, and Jason Davies.
301
+ // http://projects.instantcognition.com/protovis/bulletchart/
302
+ d3.chart.bullet = function() {
303
+ var orient = "left", // TODO top & bottom
304
+ reverse = false,
305
+ duration = 0,
306
+ ranges = d3_chart_bulletRanges,
307
+ markers = d3_chart_bulletMarkers,
308
+ measures = d3_chart_bulletMeasures,
309
+ width = 380,
310
+ height = 30,
311
+ tickFormat = null;
312
+
313
+ // For each small multiple…
314
+ function bullet(g) {
315
+ g.each(function(d, i) {
316
+ var rangez = ranges.call(this, d, i).slice().sort(d3.descending),
317
+ markerz = markers.call(this, d, i).slice().sort(d3.descending),
318
+ measurez = measures.call(this, d, i).slice().sort(d3.descending),
319
+ g = d3.select(this);
320
+
321
+ // Compute the new x-scale.
322
+ var x1 = d3.scale.linear()
323
+ .domain([0, Math.max(rangez[0], markerz[0], measurez[0])])
324
+ .range(reverse ? [width, 0] : [0, width]);
325
+
326
+ // Retrieve the old x-scale, if this is an update.
327
+ var x0 = this.__chart__ || d3.scale.linear()
328
+ .domain([0, Infinity])
329
+ .range(x1.range());
330
+
331
+ // Stash the new scale.
332
+ this.__chart__ = x1;
333
+
334
+ // Derive width-scales from the x-scales.
335
+ var w0 = d3_chart_bulletWidth(x0),
336
+ w1 = d3_chart_bulletWidth(x1);
337
+
338
+ // Update the range rects.
339
+ var range = g.selectAll("rect.range")
340
+ .data(rangez);
341
+
342
+ range.enter().append("svg:rect")
343
+ .attr("class", function(d, i) { return "range s" + i; })
344
+ .attr("width", w0)
345
+ .attr("height", height)
346
+ .attr("x", reverse ? x0 : 0)
347
+ .transition()
348
+ .duration(duration)
349
+ .attr("width", w1)
350
+ .attr("x", reverse ? x1 : 0);
351
+
352
+ range.transition()
353
+ .duration(duration)
354
+ .attr("x", reverse ? x1 : 0)
355
+ .attr("width", w1)
356
+ .attr("height", height);
357
+
358
+ // Update the measure rects.
359
+ var measure = g.selectAll("rect.measure")
360
+ .data(measurez);
361
+
362
+ measure.enter().append("svg:rect")
363
+ .attr("class", function(d, i) { return "measure s" + i; })
364
+ .attr("width", w0)
365
+ .attr("height", height / 3)
366
+ .attr("x", reverse ? x0 : 0)
367
+ .attr("y", height / 3)
368
+ .transition()
369
+ .duration(duration)
370
+ .attr("width", w1)
371
+ .attr("x", reverse ? x1 : 0);
372
+
373
+ measure.transition()
374
+ .duration(duration)
375
+ .attr("width", w1)
376
+ .attr("height", height / 3)
377
+ .attr("x", reverse ? x1 : 0)
378
+ .attr("y", height / 3);
379
+
380
+ // Update the marker lines.
381
+ var marker = g.selectAll("line.marker")
382
+ .data(markerz);
383
+
384
+ marker.enter().append("svg:line")
385
+ .attr("class", "marker")
386
+ .attr("x1", x0)
387
+ .attr("x2", x0)
388
+ .attr("y1", height / 6)
389
+ .attr("y2", height * 5 / 6)
390
+ .transition()
391
+ .duration(duration)
392
+ .attr("x1", x1)
393
+ .attr("x2", x1);
394
+
395
+ marker.transition()
396
+ .duration(duration)
397
+ .attr("x1", x1)
398
+ .attr("x2", x1)
399
+ .attr("y1", height / 6)
400
+ .attr("y2", height * 5 / 6);
401
+
402
+ // Compute the tick format.
403
+ var format = tickFormat || x1.tickFormat(8);
404
+
405
+ // Update the tick groups.
406
+ var tick = g.selectAll("g.tick")
407
+ .data(x1.ticks(8), function(d) {
408
+ return this.textContent || format(d);
409
+ });
410
+
411
+ // Initialize the ticks with the old scale, x0.
412
+ var tickEnter = tick.enter().append("svg:g")
413
+ .attr("class", "tick")
414
+ .attr("transform", d3_chart_bulletTranslate(x0))
415
+ .style("opacity", 1e-6);
416
+
417
+ tickEnter.append("svg:line")
418
+ .attr("y1", height)
419
+ .attr("y2", height * 7 / 6);
420
+
421
+ tickEnter.append("svg:text")
422
+ .attr("text-anchor", "middle")
423
+ .attr("dy", "1em")
424
+ .attr("y", height * 7 / 6)
425
+ .text(format);
426
+
427
+ // Transition the entering ticks to the new scale, x1.
428
+ tickEnter.transition()
429
+ .duration(duration)
430
+ .attr("transform", d3_chart_bulletTranslate(x1))
431
+ .style("opacity", 1);
432
+
433
+ // Transition the updating ticks to the new scale, x1.
434
+ var tickUpdate = tick.transition()
435
+ .duration(duration)
436
+ .attr("transform", d3_chart_bulletTranslate(x1))
437
+ .style("opacity", 1);
438
+
439
+ tickUpdate.select("line")
440
+ .attr("y1", height)
441
+ .attr("y2", height * 7 / 6);
442
+
443
+ tickUpdate.select("text")
444
+ .attr("y", height * 7 / 6);
445
+
446
+ // Transition the exiting ticks to the new scale, x1.
447
+ tick.exit().transition()
448
+ .duration(duration)
449
+ .attr("transform", d3_chart_bulletTranslate(x1))
450
+ .style("opacity", 1e-6)
451
+ .remove();
452
+ });
453
+ d3.timer.flush();
454
+ }
455
+
456
+ // left, right, top, bottom
457
+ bullet.orient = function(x) {
458
+ if (!arguments.length) return orient;
459
+ orient = x;
460
+ reverse = orient == "right" || orient == "bottom";
461
+ return bullet;
462
+ };
463
+
464
+ // ranges (bad, satisfactory, good)
465
+ bullet.ranges = function(x) {
466
+ if (!arguments.length) return ranges;
467
+ ranges = x;
468
+ return bullet;
469
+ };
470
+
471
+ // markers (previous, goal)
472
+ bullet.markers = function(x) {
473
+ if (!arguments.length) return markers;
474
+ markers = x;
475
+ return bullet;
476
+ };
477
+
478
+ // measures (actual, forecast)
479
+ bullet.measures = function(x) {
480
+ if (!arguments.length) return measures;
481
+ measures = x;
482
+ return bullet;
483
+ };
484
+
485
+ bullet.width = function(x) {
486
+ if (!arguments.length) return width;
487
+ width = x;
488
+ return bullet;
489
+ };
490
+
491
+ bullet.height = function(x) {
492
+ if (!arguments.length) return height;
493
+ height = x;
494
+ return bullet;
495
+ };
496
+
497
+ bullet.tickFormat = function(x) {
498
+ if (!arguments.length) return tickFormat;
499
+ tickFormat = x;
500
+ return bullet;
501
+ };
502
+
503
+ bullet.duration = function(x) {
504
+ if (!arguments.length) return duration;
505
+ duration = x;
506
+ return bullet;
507
+ };
508
+
509
+ return bullet;
510
+ };
511
+
512
+ function d3_chart_bulletRanges(d) {
513
+ return d.ranges;
514
+ }
515
+
516
+ function d3_chart_bulletMarkers(d) {
517
+ return d.markers;
518
+ }
519
+
520
+ function d3_chart_bulletMeasures(d) {
521
+ return d.measures;
522
+ }
523
+
524
+ function d3_chart_bulletTranslate(x) {
525
+ return function(d) {
526
+ return "translate(" + x(d) + ",0)";
527
+ };
528
+ }
529
+
530
+ function d3_chart_bulletWidth(x) {
531
+ var x0 = x(0);
532
+ return function(d) {
533
+ return Math.abs(x(d) - x0);
534
+ };
535
+ }
536
+ // Implements a horizon layout, which is a variation of a single-series
537
+ // area chart where the area is folded into multiple bands. Color is used to
538
+ // encode band, allowing the size of the chart to be reduced significantly
539
+ // without impeding readability. This layout algorithm is based on the work of
540
+ // J. Heer, N. Kong and M. Agrawala in "Sizing the Horizon: The Effects of Chart
541
+ // Size and Layering on the Graphical Perception of Time Series Visualizations",
542
+ // CHI 2009. http://hci.stanford.edu/publications/2009/heer-horizon-chi09.pdf
543
+ d3.chart.horizon = function() {
544
+ var bands = 1, // between 1 and 5, typically
545
+ mode = "offset", // or mirror
546
+ interpolate = "linear", // or basis, monotone, step-before, etc.
547
+ x = d3_chart_horizonX,
548
+ y = d3_chart_horizonY,
549
+ w = 960,
550
+ h = 40,
551
+ duration = 0;
552
+
553
+ var color = d3.scale.linear()
554
+ .domain([-1, 0, 1])
555
+ .range(["#d62728", "#fff", "#1f77b4"]);
556
+
557
+ // For each small multiple…
558
+ function horizon(g) {
559
+ g.each(function(d, i) {
560
+ var g = d3.select(this),
561
+ n = 2 * bands + 1,
562
+ xMin = Infinity,
563
+ xMax = -Infinity,
564
+ yMax = -Infinity,
565
+ x0, // old x-scale
566
+ y0, // old y-scale
567
+ id; // unique id for paths
568
+
569
+ // Compute x- and y-values along with extents.
570
+ var data = d.map(function(d, i) {
571
+ var xv = x.call(this, d, i),
572
+ yv = y.call(this, d, i);
573
+ if (xv < xMin) xMin = xv;
574
+ if (xv > xMax) xMax = xv;
575
+ if (-yv > yMax) yMax = -yv;
576
+ if (yv > yMax) yMax = yv;
577
+ return [xv, yv];
578
+ });
579
+
580
+ // Compute the new x- and y-scales.
581
+ var x1 = d3.scale.linear().domain([xMin, xMax]).range([0, w]),
582
+ y1 = d3.scale.linear().domain([0, yMax]).range([0, h * bands]);
583
+
584
+ // Retrieve the old scales, if this is an update.
585
+ if (this.__chart__) {
586
+ x0 = this.__chart__.x;
587
+ y0 = this.__chart__.y;
588
+ id = this.__chart__.id;
589
+ } else {
590
+ x0 = d3.scale.linear().domain([0, Infinity]).range(x1.range());
591
+ y0 = d3.scale.linear().domain([0, Infinity]).range(y1.range());
592
+ id = ++d3_chart_horizonId;
593
+ }
594
+
595
+ // We'll use a defs to store the area path and the clip path.
596
+ var defs = g.selectAll("defs")
597
+ .data([data]);
598
+
599
+ var defsEnter = defs.enter().append("svg:defs");
600
+
601
+ // The clip path is a simple rect.
602
+ defsEnter.append("svg:clipPath")
603
+ .attr("id", "d3_chart_horizon_clip" + id)
604
+ .append("svg:rect")
605
+ .attr("width", w)
606
+ .attr("height", h);
607
+
608
+ defs.select("rect").transition()
609
+ .duration(duration)
610
+ .attr("width", w)
611
+ .attr("height", h);
612
+
613
+ // The area path is rendered with our resuable d3.svg.area.
614
+ defsEnter.append("svg:path")
615
+ .attr("id", "d3_chart_horizon_path" + id)
616
+ .attr("d", d3_chart_horizonArea
617
+ .interpolate(interpolate)
618
+ .x(function(d) { return x0(d[0]); })
619
+ .y0(h * bands)
620
+ .y1(function(d) { return h * bands - y0(d[1]); }))
621
+ .transition()
622
+ .duration(duration)
623
+ .attr("d", d3_chart_horizonArea
624
+ .x(function(d) { return x1(d[0]); })
625
+ .y1(function(d) { return h * bands - y1(d[1]); }));
626
+
627
+ defs.select("path").transition()
628
+ .duration(duration)
629
+ .attr("d", d3_chart_horizonArea);
630
+
631
+ // We'll use a container to clip all horizon layers at once.
632
+ g.selectAll("g")
633
+ .data([null])
634
+ .enter().append("svg:g")
635
+ .attr("clip-path", "url(#d3_chart_horizon_clip" + id + ")");
636
+
637
+ // Define the transform function based on the mode.
638
+ var transform = mode == "offset"
639
+ ? function(d) { return "translate(0," + (d + (d < 0) - bands) * h + ")"; }
640
+ : function(d) { return (d < 0 ? "scale(1,-1)" : "") + "translate(0," + (d - bands) * h + ")"; };
641
+
642
+ // Instantiate each copy of the path with different transforms.
643
+ var u = g.select("g").selectAll("use")
644
+ .data(d3.range(-1, -bands - 1, -1).concat(d3.range(1, bands + 1)), Number);
645
+
646
+ // TODO don't fudge the enter transition
647
+ u.enter().append("svg:use")
648
+ .attr("xlink:href", "#d3_chart_horizon_path" + id)
649
+ .attr("transform", function(d) { return transform(d + (d > 0 ? 1 : -1)); })
650
+ .style("fill", color)
651
+ .transition()
652
+ .duration(duration)
653
+ .attr("transform", transform);
654
+
655
+ u.transition()
656
+ .duration(duration)
657
+ .attr("transform", transform)
658
+ .style("fill", color);
659
+
660
+ u.exit().transition()
661
+ .duration(duration)
662
+ .attr("transform", transform)
663
+ .remove();
664
+
665
+ // Stash the new scales.
666
+ this.__chart__ = {x: x1, y: y1, id: id};
667
+ });
668
+ d3.timer.flush();
669
+ }
670
+
671
+ horizon.duration = function(x) {
672
+ if (!arguments.length) return duration;
673
+ duration = +x;
674
+ return horizon;
675
+ };
676
+
677
+ horizon.bands = function(x) {
678
+ if (!arguments.length) return bands;
679
+ bands = +x;
680
+ color.domain([-bands, 0, bands]);
681
+ return horizon;
682
+ };
683
+
684
+ horizon.mode = function(x) {
685
+ if (!arguments.length) return mode;
686
+ mode = x + "";
687
+ return horizon;
688
+ };
689
+
690
+ horizon.colors = function(x) {
691
+ if (!arguments.length) return color.range();
692
+ color.range(x);
693
+ return horizon;
694
+ };
695
+
696
+ horizon.interpolate = function(x) {
697
+ if (!arguments.length) return interpolate;
698
+ interpolate = x + "";
699
+ return horizon;
700
+ };
701
+
702
+ horizon.x = function(z) {
703
+ if (!arguments.length) return x;
704
+ x = z;
705
+ return horizon;
706
+ };
707
+
708
+ horizon.y = function(z) {
709
+ if (!arguments.length) return y;
710
+ y = z;
711
+ return horizon;
712
+ };
713
+
714
+ horizon.width = function(x) {
715
+ if (!arguments.length) return w;
716
+ w = +x;
717
+ return horizon;
718
+ };
719
+
720
+ horizon.height = function(x) {
721
+ if (!arguments.length) return h;
722
+ h = +x;
723
+ return horizon;
724
+ };
725
+
726
+ return horizon;
727
+ };
728
+
729
+ var d3_chart_horizonArea = d3.svg.area(),
730
+ d3_chart_horizonId = 0;
731
+
732
+ function d3_chart_horizonX(d) {
733
+ return d[0];
734
+ }
735
+
736
+ function d3_chart_horizonY(d) {
737
+ return d[1];
738
+ }
739
+ // Based on http://vis.stanford.edu/protovis/ex/qqplot.html
740
+ d3.chart.qq = function() {
741
+ var width = 1,
742
+ height = 1,
743
+ duration = 0,
744
+ domain = null,
745
+ tickFormat = null,
746
+ n = 100,
747
+ x = d3_chart_qqX,
748
+ y = d3_chart_qqY;
749
+
750
+ // For each small multiple…
751
+ function qq(g) {
752
+ g.each(function(d, i) {
753
+ var g = d3.select(this),
754
+ qx = d3_chart_qqQuantiles(n, x.call(this, d, i)),
755
+ qy = d3_chart_qqQuantiles(n, y.call(this, d, i)),
756
+ xd = domain && domain.call(this, d, i) || [d3.min(qx), d3.max(qx)], // new x-domain
757
+ yd = domain && domain.call(this, d, i) || [d3.min(qy), d3.max(qy)], // new y-domain
758
+ x0, // old x-scale
759
+ y0; // old y-scale
760
+
761
+ // Compute the new x-scale.
762
+ var x1 = d3.scale.linear()
763
+ .domain(xd)
764
+ .range([0, width]);
765
+
766
+ // Compute the new y-scale.
767
+ var y1 = d3.scale.linear()
768
+ .domain(yd)
769
+ .range([height, 0]);
770
+
771
+ // Retrieve the old scales, if this is an update.
772
+ if (this.__chart__) {
773
+ x0 = this.__chart__.x;
774
+ y0 = this.__chart__.y;
775
+ } else {
776
+ x0 = d3.scale.linear().domain([0, Infinity]).range(x1.range());
777
+ y0 = d3.scale.linear().domain([0, Infinity]).range(y1.range());
778
+ }
779
+
780
+ // Stash the new scales.
781
+ this.__chart__ = {x: x1, y: y1};
782
+
783
+ // Update diagonal line.
784
+ var diagonal = g.selectAll("line.diagonal")
785
+ .data([null]);
786
+
787
+ diagonal.enter().append("svg:line")
788
+ .attr("class", "diagonal")
789
+ .attr("x1", x1(yd[0]))
790
+ .attr("y1", y1(xd[0]))
791
+ .attr("x2", x1(yd[1]))
792
+ .attr("y2", y1(xd[1]));
793
+
794
+ diagonal.transition()
795
+ .duration(duration)
796
+ .attr("x1", x1(yd[0]))
797
+ .attr("y1", y1(xd[0]))
798
+ .attr("x2", x1(yd[1]))
799
+ .attr("y2", y1(xd[1]));
800
+
801
+ // Update quantile plots.
802
+ var circle = g.selectAll("circle")
803
+ .data(d3.range(n).map(function(i) {
804
+ return {x: qx[i], y: qy[i]};
805
+ }));
806
+
807
+ circle.enter().append("svg:circle")
808
+ .attr("class", "quantile")
809
+ .attr("r", 4.5)
810
+ .attr("cx", function(d) { return x0(d.x); })
811
+ .attr("cy", function(d) { return y0(d.y); })
812
+ .style("opacity", 1e-6)
813
+ .transition()
814
+ .duration(duration)
815
+ .attr("cx", function(d) { return x1(d.x); })
816
+ .attr("cy", function(d) { return y1(d.y); })
817
+ .style("opacity", 1);
818
+
819
+ circle.transition()
820
+ .duration(duration)
821
+ .attr("cx", function(d) { return x1(d.x); })
822
+ .attr("cy", function(d) { return y1(d.y); })
823
+ .style("opacity", 1);
824
+
825
+ circle.exit().transition()
826
+ .duration(duration)
827
+ .attr("cx", function(d) { return x1(d.x); })
828
+ .attr("cy", function(d) { return y1(d.y); })
829
+ .style("opacity", 1e-6)
830
+ .remove();
831
+
832
+ var xformat = tickFormat || x1.tickFormat(4),
833
+ yformat = tickFormat || y1.tickFormat(4),
834
+ tx = function(d) { return "translate(" + x1(d) + "," + height + ")"; },
835
+ ty = function(d) { return "translate(0," + y1(d) + ")"; };
836
+
837
+ // Update x-ticks.
838
+ var xtick = g.selectAll("g.x.tick")
839
+ .data(x1.ticks(4), function(d) {
840
+ return this.textContent || xformat(d);
841
+ });
842
+
843
+ var xtickEnter = xtick.enter().append("svg:g")
844
+ .attr("class", "x tick")
845
+ .attr("transform", function(d) { return "translate(" + x0(d) + "," + height + ")"; })
846
+ .style("opacity", 1e-6);
847
+
848
+ xtickEnter.append("svg:line")
849
+ .attr("y1", 0)
850
+ .attr("y2", -6);
851
+
852
+ xtickEnter.append("svg:text")
853
+ .attr("text-anchor", "middle")
854
+ .attr("dy", "1em")
855
+ .text(xformat);
856
+
857
+ // Transition the entering ticks to the new scale, x1.
858
+ xtickEnter.transition()
859
+ .duration(duration)
860
+ .attr("transform", tx)
861
+ .style("opacity", 1);
862
+
863
+ // Transition the updating ticks to the new scale, x1.
864
+ xtick.transition()
865
+ .duration(duration)
866
+ .attr("transform", tx)
867
+ .style("opacity", 1);
868
+
869
+ // Transition the exiting ticks to the new scale, x1.
870
+ xtick.exit().transition()
871
+ .duration(duration)
872
+ .attr("transform", tx)
873
+ .style("opacity", 1e-6)
874
+ .remove();
875
+
876
+ // Update ticks.
877
+ var ytick = g.selectAll("g.y.tick")
878
+ .data(y1.ticks(4), function(d) {
879
+ return this.textContent || yformat(d);
880
+ });
881
+
882
+ var ytickEnter = ytick.enter().append("svg:g")
883
+ .attr("class", "y tick")
884
+ .attr("transform", function(d) { return "translate(0," + y0(d) + ")"; })
885
+ .style("opacity", 1e-6);
886
+
887
+ ytickEnter.append("svg:line")
888
+ .attr("x1", 0)
889
+ .attr("x2", 6);
890
+
891
+ ytickEnter.append("svg:text")
892
+ .attr("text-anchor", "end")
893
+ .attr("dx", "-.5em")
894
+ .attr("dy", ".3em")
895
+ .text(yformat);
896
+
897
+ // Transition the entering ticks to the new scale, y1.
898
+ ytickEnter.transition()
899
+ .duration(duration)
900
+ .attr("transform", ty)
901
+ .style("opacity", 1);
902
+
903
+ // Transition the updating ticks to the new scale, y1.
904
+ ytick.transition()
905
+ .duration(duration)
906
+ .attr("transform", ty)
907
+ .style("opacity", 1);
908
+
909
+ // Transition the exiting ticks to the new scale, y1.
910
+ ytick.exit().transition()
911
+ .duration(duration)
912
+ .attr("transform", ty)
913
+ .style("opacity", 1e-6)
914
+ .remove();
915
+ });
916
+ }
917
+
918
+ qq.width = function(x) {
919
+ if (!arguments.length) return width;
920
+ width = x;
921
+ return qq;
922
+ };
923
+
924
+ qq.height = function(x) {
925
+ if (!arguments.length) return height;
926
+ height = x;
927
+ return qq;
928
+ };
929
+
930
+ qq.duration = function(x) {
931
+ if (!arguments.length) return duration;
932
+ duration = x;
933
+ return qq;
934
+ };
935
+
936
+ qq.domain = function(x) {
937
+ if (!arguments.length) return domain;
938
+ domain = x == null ? x : d3.functor(x);
939
+ return qq;
940
+ };
941
+
942
+ qq.count = function(z) {
943
+ if (!arguments.length) return n;
944
+ n = z;
945
+ return qq;
946
+ };
947
+
948
+ qq.x = function(z) {
949
+ if (!arguments.length) return x;
950
+ x = z;
951
+ return qq;
952
+ };
953
+
954
+ qq.y = function(z) {
955
+ if (!arguments.length) return y;
956
+ y = z;
957
+ return qq;
958
+ };
959
+
960
+ qq.tickFormat = function(x) {
961
+ if (!arguments.length) return tickFormat;
962
+ tickFormat = x;
963
+ return qq;
964
+ };
965
+
966
+ return qq;
967
+ };
968
+
969
+ function d3_chart_qqQuantiles(n, values) {
970
+ var m = values.length - 1;
971
+ values = values.slice().sort(d3.ascending);
972
+ return d3.range(n).map(function(i) {
973
+ return values[~~(i * m / n)];
974
+ });
975
+ }
976
+
977
+ function d3_chart_qqX(d) {
978
+ return d.x;
979
+ }
980
+
981
+ function d3_chart_qqY(d) {
982
+ return d.y;
983
+ }
984
+ })();