d3js-plugins-rails 0.0.1
Sign up to get free protection for your applications and to get access to all the features.
- data/.gitignore +17 -0
- data/Gemfile +4 -0
- data/LICENSE +22 -0
- data/README.md +28 -0
- data/Rakefile +1 -0
- data/d3js-plugins-rails.gemspec +21 -0
- data/lib/d3js-plugins-rails/version.rb +7 -0
- data/lib/d3js-plugins-rails.rb +10 -0
- data/vendor/assets/javascripts/d3/plugins/.gitignore +1 -0
- data/vendor/assets/javascripts/d3/plugins/LICENSE +26 -0
- data/vendor/assets/javascripts/d3/plugins/Makefile +87 -0
- data/vendor/assets/javascripts/d3/plugins/README.md +19 -0
- data/vendor/assets/javascripts/d3/plugins/box/box.js +301 -0
- data/vendor/assets/javascripts/d3/plugins/bullet/README.md +14 -0
- data/vendor/assets/javascripts/d3/plugins/bullet/bullet.js +241 -0
- data/vendor/assets/javascripts/d3/plugins/chernoff/README.md +15 -0
- data/vendor/assets/javascripts/d3/plugins/chernoff/chernoff.js +176 -0
- data/vendor/assets/javascripts/d3/plugins/cie/README.md +54 -0
- data/vendor/assets/javascripts/d3/plugins/cie/cie.js +155 -0
- data/vendor/assets/javascripts/d3/plugins/fisheye/README.md +43 -0
- data/vendor/assets/javascripts/d3/plugins/fisheye/fisheye.js +85 -0
- data/vendor/assets/javascripts/d3/plugins/force_labels/README.md +29 -0
- data/vendor/assets/javascripts/d3/plugins/force_labels/force_labels.js +56 -0
- data/vendor/assets/javascripts/d3/plugins/geo/polyhedron/README.md +7 -0
- data/vendor/assets/javascripts/d3/plugins/geo/polyhedron/polyhedron.js +436 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/README.md +107 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/aitoff.js +40 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/armadillo.js +79 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/august.js +15 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/baker.js +28 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/berghaus.js +60 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/boggs.js +27 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/bonne.js +29 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/bromley.js +5 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/collignon.js +17 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/conic-conformal.js +29 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/conic-equidistant.js +27 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/craig.js +24 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/craster.js +18 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/cylindrical-equal-area.js +23 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/eckert1.js +18 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/eckert2.js +17 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/eckert3.js +17 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/eckert4.js +24 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/eckert5.js +17 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/eckert6.js +22 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/eisenlohr.js +16 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/end.js +1 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/gringorten.js +111 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/guyou.js +46 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/hammer-retroazimuthal.js +75 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/hammer.js +51 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/hatano.js +25 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/healpix.js +64 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/hill.js +64 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/homolosine.js +17 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/interrupt.js +111 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/kavrayskiy7.js +15 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/lagrange.js +27 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/larrivee.js +39 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/laskowski.js +31 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/littrow.js +21 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/loximuthal.js +29 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/miller.js +15 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/mollweide.js +35 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/mt-flat-polar-parabolic.js +21 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/mt-flat-polar-quartic.js +23 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/mt-flat-polar-sinusoidal.js +25 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/natural-earth.js +22 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/nell-hammer.js +20 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/parallel1.js +12 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/parallel2.js +13 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/peirce-quincuncial.js +14 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/polyconic.js +25 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/projection.js +29 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/robinson.js +83 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/satellite.js +68 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/sinu-mollweide.js +19 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/sinusoidal.js +15 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/start.js +1 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/test/aitoff-test.js +26 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/test/armadillo-test.js +28 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/test/baker-test.js +26 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/test/boggs-test.js +26 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/test/bonne-test.js +45 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/test/craig-test.js +25 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/test/craster-test.js +25 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/test/env.js +32 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/test/equirectangular-test.js +97 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/test/hammer-test.js +29 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/test/hatano-test.js +25 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/test/hill-test.js +26 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/test/larrivee-test.js +25 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/test/laskowski-test.js +26 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/test/littrow-test.js +24 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/test/loximuthal-test.js +25 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/test/mollweide-test.js +26 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/test/mt-flat-polar-parabolic-test.js +25 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/test/mt-flat-polar-quartic-test.js +25 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/test/mt-flat-polar-sinusoidal-test.js +25 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/test/natural-earth-test.js +26 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/test/quartic-authalic-test.js +0 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/test/robinson-test.js +26 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/test/wagner6-test.js +25 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/test/winkel3-test.js +26 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/van-der-grinten.js +41 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/van-der-grinten4.js +22 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/wagner4.js +9 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/wagner6.js +15 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/wagner7.js +22 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/wiechel.js +14 -0
- data/vendor/assets/javascripts/d3/plugins/geo/projection/winkel3.js +40 -0
- data/vendor/assets/javascripts/d3/plugins/geo/tile/README.md +6 -0
- data/vendor/assets/javascripts/d3/plugins/geo/tile/tile.js +53 -0
- data/vendor/assets/javascripts/d3/plugins/geodesic/README.md +3 -0
- data/vendor/assets/javascripts/d3/plugins/geodesic/geodesic.js +130 -0
- data/vendor/assets/javascripts/d3/plugins/geom/contour/README.md +5 -0
- data/vendor/assets/javascripts/d3/plugins/geom/contour/contour.js +72 -0
- data/vendor/assets/javascripts/d3/plugins/graph/README.md +148 -0
- data/vendor/assets/javascripts/d3/plugins/graph/data/cities-matrix.json +37 -0
- data/vendor/assets/javascripts/d3/plugins/graph/data/cities.csv +36 -0
- data/vendor/assets/javascripts/d3/plugins/graph/data/miserables.json +338 -0
- data/vendor/assets/javascripts/d3/plugins/graph/graph.js +161 -0
- data/vendor/assets/javascripts/d3/plugins/graph/index.html +37 -0
- data/vendor/assets/javascripts/d3/plugins/hexbin/README.md +58 -0
- data/vendor/assets/javascripts/d3/plugins/hexbin/hexbin.js +96 -0
- data/vendor/assets/javascripts/d3/plugins/hive/README.md +5 -0
- data/vendor/assets/javascripts/d3/plugins/hive/hive.js +80 -0
- data/vendor/assets/javascripts/d3/plugins/horizon/README.md +11 -0
- data/vendor/assets/javascripts/d3/plugins/horizon/horizon.js +192 -0
- data/vendor/assets/javascripts/d3/plugins/interpolate-zoom/README.md +11 -0
- data/vendor/assets/javascripts/d3/plugins/interpolate-zoom/interpolate-zoom.js +75 -0
- data/vendor/assets/javascripts/d3/plugins/jsonp/README.md +26 -0
- data/vendor/assets/javascripts/d3/plugins/jsonp/jsonp.js +25 -0
- data/vendor/assets/javascripts/d3/plugins/keybinding/README.md +17 -0
- data/vendor/assets/javascripts/d3/plugins/keybinding/keybinding.js +120 -0
- data/vendor/assets/javascripts/d3/plugins/longscroll/README.md +10 -0
- data/vendor/assets/javascripts/d3/plugins/longscroll/longscroll.js +75 -0
- data/vendor/assets/javascripts/d3/plugins/package.json +20 -0
- data/vendor/assets/javascripts/d3/plugins/qq/README.md +3 -0
- data/vendor/assets/javascripts/d3/plugins/qq/qq.js +249 -0
- data/vendor/assets/javascripts/d3/plugins/rollup/README.md +5 -0
- data/vendor/assets/javascripts/d3/plugins/rollup/rollup.js +131 -0
- data/vendor/assets/javascripts/d3/plugins/sankey/README.md +17 -0
- data/vendor/assets/javascripts/d3/plugins/sankey/sankey.js +292 -0
- data/vendor/assets/javascripts/d3/plugins/simplify/README.md +6 -0
- data/vendor/assets/javascripts/d3/plugins/simplify/simplify-test.js +193 -0
- data/vendor/assets/javascripts/d3/plugins/simplify/simplify.js +446 -0
- data/vendor/assets/javascripts/d3/plugins/superformula/superformula.js +98 -0
- data/vendor/assets/javascripts/d3/plugins/urlencode/urlencode-test.js +68 -0
- data/vendor/assets/javascripts/d3/plugins/urlencode/urlencode.js +37 -0
- metadata +218 -0
@@ -0,0 +1,14 @@
|
|
1
|
+
# Bullet Chart
|
2
|
+
|
3
|
+
Demo: http://bl.ocks.org/4061961
|
4
|
+
|
5
|
+
Designed by Stephen Few, a bullet chart “provides a rich display of data in a
|
6
|
+
small space.” A variation on a bar chart, bullet charts compare a given
|
7
|
+
quantitative measure (such as profit or revenue) against qualitative ranges
|
8
|
+
(e.g., poor, satisfactory, good) and related markers (e.g., the same measure a
|
9
|
+
year ago). Layout inspired by
|
10
|
+
[Stephen Few](http://www.perceptualedge.com/articles/misc/Bullet_Graph_Design_Spec.pdf).
|
11
|
+
Implementation based on work by
|
12
|
+
[Clint Ivy](http://projects.instantcognition.com/protovis/bulletchart/),
|
13
|
+
Jamie Love of [N-Squared Software](http://www.nsquaredsoftware.com/) and
|
14
|
+
[Jason Davies](http://www.jasondavies.com/).
|
@@ -0,0 +1,241 @@
|
|
1
|
+
(function() {
|
2
|
+
|
3
|
+
// Chart design based on the recommendations of Stephen Few. Implementation
|
4
|
+
// based on the work of Clint Ivy, Jamie Love, and Jason Davies.
|
5
|
+
// http://projects.instantcognition.com/protovis/bulletchart/
|
6
|
+
d3.bullet = function() {
|
7
|
+
var orient = "left", // TODO top & bottom
|
8
|
+
reverse = false,
|
9
|
+
duration = 0,
|
10
|
+
ranges = bulletRanges,
|
11
|
+
markers = bulletMarkers,
|
12
|
+
measures = bulletMeasures,
|
13
|
+
width = 380,
|
14
|
+
height = 30,
|
15
|
+
tickFormat = null;
|
16
|
+
|
17
|
+
// For each small multiple…
|
18
|
+
function bullet(g) {
|
19
|
+
g.each(function(d, i) {
|
20
|
+
var rangez = ranges.call(this, d, i).slice().sort(d3.descending),
|
21
|
+
markerz = markers.call(this, d, i).slice().sort(d3.descending),
|
22
|
+
measurez = measures.call(this, d, i).slice().sort(d3.descending),
|
23
|
+
g = d3.select(this);
|
24
|
+
|
25
|
+
// Compute the new x-scale.
|
26
|
+
var x1 = d3.scale.linear()
|
27
|
+
.domain([0, Math.max(rangez[0], markerz[0], measurez[0])])
|
28
|
+
.range(reverse ? [width, 0] : [0, width]);
|
29
|
+
|
30
|
+
// Retrieve the old x-scale, if this is an update.
|
31
|
+
var x0 = this.__chart__ || d3.scale.linear()
|
32
|
+
.domain([0, Infinity])
|
33
|
+
.range(x1.range());
|
34
|
+
|
35
|
+
// Stash the new scale.
|
36
|
+
this.__chart__ = x1;
|
37
|
+
|
38
|
+
// Derive width-scales from the x-scales.
|
39
|
+
var w0 = bulletWidth(x0),
|
40
|
+
w1 = bulletWidth(x1);
|
41
|
+
|
42
|
+
// Update the range rects.
|
43
|
+
var range = g.selectAll("rect.range")
|
44
|
+
.data(rangez);
|
45
|
+
|
46
|
+
range.enter().append("rect")
|
47
|
+
.attr("class", function(d, i) { return "range s" + i; })
|
48
|
+
.attr("width", w0)
|
49
|
+
.attr("height", height)
|
50
|
+
.attr("x", reverse ? x0 : 0)
|
51
|
+
.transition()
|
52
|
+
.duration(duration)
|
53
|
+
.attr("width", w1)
|
54
|
+
.attr("x", reverse ? x1 : 0);
|
55
|
+
|
56
|
+
range.transition()
|
57
|
+
.duration(duration)
|
58
|
+
.attr("x", reverse ? x1 : 0)
|
59
|
+
.attr("width", w1)
|
60
|
+
.attr("height", height);
|
61
|
+
|
62
|
+
// Update the measure rects.
|
63
|
+
var measure = g.selectAll("rect.measure")
|
64
|
+
.data(measurez);
|
65
|
+
|
66
|
+
measure.enter().append("rect")
|
67
|
+
.attr("class", function(d, i) { return "measure s" + i; })
|
68
|
+
.attr("width", w0)
|
69
|
+
.attr("height", height / 3)
|
70
|
+
.attr("x", reverse ? x0 : 0)
|
71
|
+
.attr("y", height / 3)
|
72
|
+
.transition()
|
73
|
+
.duration(duration)
|
74
|
+
.attr("width", w1)
|
75
|
+
.attr("x", reverse ? x1 : 0);
|
76
|
+
|
77
|
+
measure.transition()
|
78
|
+
.duration(duration)
|
79
|
+
.attr("width", w1)
|
80
|
+
.attr("height", height / 3)
|
81
|
+
.attr("x", reverse ? x1 : 0)
|
82
|
+
.attr("y", height / 3);
|
83
|
+
|
84
|
+
// Update the marker lines.
|
85
|
+
var marker = g.selectAll("line.marker")
|
86
|
+
.data(markerz);
|
87
|
+
|
88
|
+
marker.enter().append("line")
|
89
|
+
.attr("class", "marker")
|
90
|
+
.attr("x1", x0)
|
91
|
+
.attr("x2", x0)
|
92
|
+
.attr("y1", height / 6)
|
93
|
+
.attr("y2", height * 5 / 6)
|
94
|
+
.transition()
|
95
|
+
.duration(duration)
|
96
|
+
.attr("x1", x1)
|
97
|
+
.attr("x2", x1);
|
98
|
+
|
99
|
+
marker.transition()
|
100
|
+
.duration(duration)
|
101
|
+
.attr("x1", x1)
|
102
|
+
.attr("x2", x1)
|
103
|
+
.attr("y1", height / 6)
|
104
|
+
.attr("y2", height * 5 / 6);
|
105
|
+
|
106
|
+
// Compute the tick format.
|
107
|
+
var format = tickFormat || x1.tickFormat(8);
|
108
|
+
|
109
|
+
// Update the tick groups.
|
110
|
+
var tick = g.selectAll("g.tick")
|
111
|
+
.data(x1.ticks(8), function(d) {
|
112
|
+
return this.textContent || format(d);
|
113
|
+
});
|
114
|
+
|
115
|
+
// Initialize the ticks with the old scale, x0.
|
116
|
+
var tickEnter = tick.enter().append("g")
|
117
|
+
.attr("class", "tick")
|
118
|
+
.attr("transform", bulletTranslate(x0))
|
119
|
+
.style("opacity", 1e-6);
|
120
|
+
|
121
|
+
tickEnter.append("line")
|
122
|
+
.attr("y1", height)
|
123
|
+
.attr("y2", height * 7 / 6);
|
124
|
+
|
125
|
+
tickEnter.append("text")
|
126
|
+
.attr("text-anchor", "middle")
|
127
|
+
.attr("dy", "1em")
|
128
|
+
.attr("y", height * 7 / 6)
|
129
|
+
.text(format);
|
130
|
+
|
131
|
+
// Transition the entering ticks to the new scale, x1.
|
132
|
+
tickEnter.transition()
|
133
|
+
.duration(duration)
|
134
|
+
.attr("transform", bulletTranslate(x1))
|
135
|
+
.style("opacity", 1);
|
136
|
+
|
137
|
+
// Transition the updating ticks to the new scale, x1.
|
138
|
+
var tickUpdate = tick.transition()
|
139
|
+
.duration(duration)
|
140
|
+
.attr("transform", bulletTranslate(x1))
|
141
|
+
.style("opacity", 1);
|
142
|
+
|
143
|
+
tickUpdate.select("line")
|
144
|
+
.attr("y1", height)
|
145
|
+
.attr("y2", height * 7 / 6);
|
146
|
+
|
147
|
+
tickUpdate.select("text")
|
148
|
+
.attr("y", height * 7 / 6);
|
149
|
+
|
150
|
+
// Transition the exiting ticks to the new scale, x1.
|
151
|
+
tick.exit().transition()
|
152
|
+
.duration(duration)
|
153
|
+
.attr("transform", bulletTranslate(x1))
|
154
|
+
.style("opacity", 1e-6)
|
155
|
+
.remove();
|
156
|
+
});
|
157
|
+
d3.timer.flush();
|
158
|
+
}
|
159
|
+
|
160
|
+
// left, right, top, bottom
|
161
|
+
bullet.orient = function(x) {
|
162
|
+
if (!arguments.length) return orient;
|
163
|
+
orient = x;
|
164
|
+
reverse = orient == "right" || orient == "bottom";
|
165
|
+
return bullet;
|
166
|
+
};
|
167
|
+
|
168
|
+
// ranges (bad, satisfactory, good)
|
169
|
+
bullet.ranges = function(x) {
|
170
|
+
if (!arguments.length) return ranges;
|
171
|
+
ranges = x;
|
172
|
+
return bullet;
|
173
|
+
};
|
174
|
+
|
175
|
+
// markers (previous, goal)
|
176
|
+
bullet.markers = function(x) {
|
177
|
+
if (!arguments.length) return markers;
|
178
|
+
markers = x;
|
179
|
+
return bullet;
|
180
|
+
};
|
181
|
+
|
182
|
+
// measures (actual, forecast)
|
183
|
+
bullet.measures = function(x) {
|
184
|
+
if (!arguments.length) return measures;
|
185
|
+
measures = x;
|
186
|
+
return bullet;
|
187
|
+
};
|
188
|
+
|
189
|
+
bullet.width = function(x) {
|
190
|
+
if (!arguments.length) return width;
|
191
|
+
width = x;
|
192
|
+
return bullet;
|
193
|
+
};
|
194
|
+
|
195
|
+
bullet.height = function(x) {
|
196
|
+
if (!arguments.length) return height;
|
197
|
+
height = x;
|
198
|
+
return bullet;
|
199
|
+
};
|
200
|
+
|
201
|
+
bullet.tickFormat = function(x) {
|
202
|
+
if (!arguments.length) return tickFormat;
|
203
|
+
tickFormat = x;
|
204
|
+
return bullet;
|
205
|
+
};
|
206
|
+
|
207
|
+
bullet.duration = function(x) {
|
208
|
+
if (!arguments.length) return duration;
|
209
|
+
duration = x;
|
210
|
+
return bullet;
|
211
|
+
};
|
212
|
+
|
213
|
+
return bullet;
|
214
|
+
};
|
215
|
+
|
216
|
+
function bulletRanges(d) {
|
217
|
+
return d.ranges;
|
218
|
+
}
|
219
|
+
|
220
|
+
function bulletMarkers(d) {
|
221
|
+
return d.markers;
|
222
|
+
}
|
223
|
+
|
224
|
+
function bulletMeasures(d) {
|
225
|
+
return d.measures;
|
226
|
+
}
|
227
|
+
|
228
|
+
function bulletTranslate(x) {
|
229
|
+
return function(d) {
|
230
|
+
return "translate(" + x(d) + ",0)";
|
231
|
+
};
|
232
|
+
}
|
233
|
+
|
234
|
+
function bulletWidth(x) {
|
235
|
+
var x0 = x(0);
|
236
|
+
return function(d) {
|
237
|
+
return Math.abs(x(d) - x0);
|
238
|
+
};
|
239
|
+
}
|
240
|
+
|
241
|
+
})();
|
@@ -0,0 +1,15 @@
|
|
1
|
+
# Chernoff faces
|
2
|
+
|
3
|
+
Demo: <http://bl.ocks.org/2011590>
|
4
|
+
|
5
|
+
Implements [Chernoff faces](http://en.wikipedia.org/wiki/Chernoff_face) for d3.
|
6
|
+
|
7
|
+
Exposes 8 parameters through functons to control the facial expression.
|
8
|
+
* **face** shape of the face `{0..1}`
|
9
|
+
* **hair** shape of the hair `{-1..1}`
|
10
|
+
* **mouth** shape of the mouth `{-1..1}`
|
11
|
+
* **noseh** height of the nose `{0..1}`
|
12
|
+
* **nosew** width of the nose `{0..1}`
|
13
|
+
* **eyeh** height of the eyes `{0..1}`
|
14
|
+
* **eyew** width of the eyes `{0..1}`
|
15
|
+
* **brow** slant of the brows `{-1..1}`
|
@@ -0,0 +1,176 @@
|
|
1
|
+
(function() {
|
2
|
+
function sign(num) {
|
3
|
+
if(num > 0) {
|
4
|
+
return 1;
|
5
|
+
} else if(num < 0) {
|
6
|
+
return -1;
|
7
|
+
} else {
|
8
|
+
return 0;
|
9
|
+
}
|
10
|
+
}
|
11
|
+
|
12
|
+
// Implements Chernoff faces (http://en.wikipedia.org/wiki/Chernoff_face).
|
13
|
+
// Exposes 8 parameters through functons to control the facial expression.
|
14
|
+
// face -- shape of the face {0..1}
|
15
|
+
// hair -- shape of the hair {-1..1}
|
16
|
+
// mouth -- shape of the mouth {-1..1}
|
17
|
+
// noseh -- height of the nose {0..1}
|
18
|
+
// nosew -- width of the nose {0..1}
|
19
|
+
// eyeh -- height of the eyes {0..1}
|
20
|
+
// eyew -- width of the eyes {0..1}
|
21
|
+
// brow -- slant of the brows {-1..1}
|
22
|
+
function d3_chernoff() {
|
23
|
+
var facef = 0.5, // 0 - 1
|
24
|
+
hairf = 0, // -1 - 1
|
25
|
+
mouthf = 0, // -1 - 1
|
26
|
+
nosehf = 0.5, // 0 - 1
|
27
|
+
nosewf = 0.5, // 0 - 1
|
28
|
+
eyehf = 0.5, // 0 - 1
|
29
|
+
eyewf = 0.5, // 0 - 1
|
30
|
+
browf = 0, // -1 - 1
|
31
|
+
|
32
|
+
line = d3.svg.line()
|
33
|
+
.interpolate("cardinal-closed")
|
34
|
+
.x(function(d) { return d.x; })
|
35
|
+
.y(function(d) { return d.y; }),
|
36
|
+
bline = d3.svg.line()
|
37
|
+
.interpolate("basis-closed")
|
38
|
+
.x(function(d) { return d.x; })
|
39
|
+
.y(function(d) { return d.y; });
|
40
|
+
|
41
|
+
function chernoff(a) {
|
42
|
+
if(a instanceof Array) {
|
43
|
+
a.each(__chernoff);
|
44
|
+
} else {
|
45
|
+
d3.select(this).each(__chernoff);
|
46
|
+
}
|
47
|
+
}
|
48
|
+
|
49
|
+
function __chernoff(d) {
|
50
|
+
var ele = d3.select(this),
|
51
|
+
facevar = (typeof(facef) === "function" ? facef(d) : facef) * 30,
|
52
|
+
hairvar = (typeof(hairf) === "function" ? hairf(d) : hairf) * 80,
|
53
|
+
mouthvar = (typeof(mouthf) === "function" ? mouthf(d) : mouthf) * 7,
|
54
|
+
nosehvar = (typeof(nosehf) === "function" ? nosehf(d) : nosehf) * 10,
|
55
|
+
nosewvar = (typeof(nosewf) === "function" ? nosewf(d) : nosewf) * 10,
|
56
|
+
eyehvar = (typeof(eyehf) === "function" ? eyehf(d) : eyehf) * 10,
|
57
|
+
eyewvar = (typeof(eyewf) === "function" ? eyewf(d) : eyewf) * 10,
|
58
|
+
browvar = (typeof(browf) === "function" ? browf(d) : browf) * 3;
|
59
|
+
|
60
|
+
var face = [{x: 70, y: 60}, {x: 120, y: 80},
|
61
|
+
{x: 120-facevar, y: 110}, {x: 120-facevar, y: 160},
|
62
|
+
{x: 20+facevar, y: 160}, {x: 20+facevar, y: 110},
|
63
|
+
{x: 20, y: 80}];
|
64
|
+
ele.selectAll("path.face").data([face]).enter()
|
65
|
+
.append("path")
|
66
|
+
.attr("class", "face")
|
67
|
+
.attr("d", bline);
|
68
|
+
|
69
|
+
var hair = [{x: 70, y: 60}, {x: 120, y: 80},
|
70
|
+
{x: 140, y: 45-hairvar}, {x: 120, y: 45},
|
71
|
+
{x: 70, y: 30}, {x: 20, y: 45},
|
72
|
+
{x: 0, y: 45-hairvar}, {x: 20, y: 80}];
|
73
|
+
ele.selectAll("path.hair").data([hair]).enter()
|
74
|
+
.append("path")
|
75
|
+
.attr("class", "hair")
|
76
|
+
.attr("d", bline);
|
77
|
+
|
78
|
+
var mouth = [{x: 70, y: 130+mouthvar},
|
79
|
+
{x: 110-facevar, y: 135-mouthvar},
|
80
|
+
{x: 70, y: 140+mouthvar},
|
81
|
+
{x: 30+facevar, y: 135-mouthvar}];
|
82
|
+
ele.selectAll("path.mouth").data([mouth]).enter()
|
83
|
+
.append("path")
|
84
|
+
.attr("class", "mouth")
|
85
|
+
.attr("d", line);
|
86
|
+
|
87
|
+
var nose = [{x: 70, y: 110-nosehvar},
|
88
|
+
{x: 70+nosewvar, y: 110+nosehvar},
|
89
|
+
{x: 70-nosewvar, y: 110+nosehvar}];
|
90
|
+
ele.selectAll("path.nose").data([nose]).enter()
|
91
|
+
.append("path")
|
92
|
+
.attr("class", "nose")
|
93
|
+
.attr("d", line);
|
94
|
+
|
95
|
+
var leye = [{x: 55, y: 90-eyehvar}, {x: 55+eyewvar, y: 90},
|
96
|
+
{x: 55, y: 90+eyehvar}, {x: 55-eyewvar, y: 90}];
|
97
|
+
var reye = [{x: 85, y: 90-eyehvar}, {x: 85+eyewvar, y: 90},
|
98
|
+
{x: 85, y: 90+eyehvar}, {x: 85-eyewvar, y: 90}];
|
99
|
+
ele.selectAll("path.leye").data([leye]).enter()
|
100
|
+
.append("path")
|
101
|
+
.attr("class", "leye")
|
102
|
+
.attr("d", bline);
|
103
|
+
ele.selectAll("path.reye").data([reye]).enter()
|
104
|
+
.append("path")
|
105
|
+
.attr("class", "reye")
|
106
|
+
.attr("d", bline);
|
107
|
+
|
108
|
+
ele.append("path")
|
109
|
+
.attr("class", "lbrow")
|
110
|
+
.attr("d", "M" + (55-eyewvar/1.7-sign(browvar)) + "," +
|
111
|
+
(87-eyehvar+browvar) + " " +
|
112
|
+
(55+eyewvar/1.7-sign(browvar)) + "," +
|
113
|
+
(87-eyehvar-browvar));
|
114
|
+
ele.append("path")
|
115
|
+
.attr("class", "rbrow")
|
116
|
+
.attr("d", "M" + (85-eyewvar/1.7+sign(browvar)) + "," +
|
117
|
+
(87-eyehvar-browvar) + " " +
|
118
|
+
(85+eyewvar/1.7+sign(browvar)) + "," +
|
119
|
+
(87-eyehvar+browvar));
|
120
|
+
}
|
121
|
+
|
122
|
+
chernoff.face = function(x) {
|
123
|
+
if(!arguments.length) return facef;
|
124
|
+
facef = x;
|
125
|
+
return chernoff;
|
126
|
+
};
|
127
|
+
|
128
|
+
chernoff.hair = function(x) {
|
129
|
+
if(!arguments.length) return hairf;
|
130
|
+
hairf = x;
|
131
|
+
return chernoff;
|
132
|
+
};
|
133
|
+
|
134
|
+
chernoff.mouth = function(x) {
|
135
|
+
if(!arguments.length) return mouthf;
|
136
|
+
mouthf = x;
|
137
|
+
return chernoff;
|
138
|
+
};
|
139
|
+
|
140
|
+
chernoff.noseh = function(x) {
|
141
|
+
if(!arguments.length) return nosehf;
|
142
|
+
nosehf = x;
|
143
|
+
return chernoff;
|
144
|
+
};
|
145
|
+
|
146
|
+
chernoff.nosew = function(x) {
|
147
|
+
if(!arguments.length) return nosewf;
|
148
|
+
nosewf = x;
|
149
|
+
return chernoff;
|
150
|
+
};
|
151
|
+
|
152
|
+
chernoff.eyeh = function(x) {
|
153
|
+
if(!arguments.length) return eyehf;
|
154
|
+
eyehf = x;
|
155
|
+
return chernoff;
|
156
|
+
};
|
157
|
+
|
158
|
+
chernoff.eyew = function(x) {
|
159
|
+
if(!arguments.length) return eyewf;
|
160
|
+
eyewf = x;
|
161
|
+
return chernoff;
|
162
|
+
};
|
163
|
+
|
164
|
+
chernoff.brow = function(x) {
|
165
|
+
if(!arguments.length) return browf;
|
166
|
+
browf = x;
|
167
|
+
return chernoff;
|
168
|
+
};
|
169
|
+
|
170
|
+
return chernoff;
|
171
|
+
}
|
172
|
+
|
173
|
+
d3.chernoff = function() {
|
174
|
+
return d3_chernoff(Object);
|
175
|
+
};
|
176
|
+
})();
|