Skip to content

Instantly share code, notes, and snippets.

@seschultz

seschultz/.block

Created May 25, 2018 05:38
Show Gist options
  • Save seschultz/fc4b06b9b4ea690b3c3dcc9e0a2ee97b to your computer and use it in GitHub Desktop.
Save seschultz/fc4b06b9b4ea690b3c3dcc9e0a2ee97b to your computer and use it in GitHub Desktop.
Download ZIP
Baseball Scatter Plot- Interactive
Raw
.block
license: mit
border: no
Raw
README.md

An interactive scatterplot of the 1991-1992 Baseball Salaries Dataset

You can select which numerical variable (various baseball stats, salary) falls on the x, which on the y, and which is represented by the radius. You can choose either free agent eligibility or whether the player was a free agent to be represented by the color.

forked from curran's block: Spinner with d3-component

forked from micahstubbs's block: scatterplot menus with d3-component | radius select

forked from seschultz's block: Baseball Scatter Plot- Interactive

Raw
actionsFromDispatch.js
function actionsFromDispatch(dispatch) {
return {
ingestData(data, numericColumns, ordinalColumns) {
dispatch({
type: 'INGEST_DATA',
data,
numericColumns,
ordinalColumns,
});
},
setX(column) {
dispatch({ type: 'SET_X', column });
},
setY(column) {
dispatch({ type: 'SET_Y', column });
},
setColor(column) {
dispatch({ type: 'SET_COLOR', column });
},
setRadius(column) {
dispatch({ type: 'SET_RADIUS', column });
},
};
}
Raw
axis.js
/* global d3 */
const axis = ((() => {
const axisLocal = d3.local();
return d3.component('g')
.create(function (selection, d) {
axisLocal.set(selection.node(), d3[`axis${d.type}`]());
selection
.attr('opacity', 0)
.call(axisLocal.get(selection.node())
.scale(d.scale)
.ticks(d.ticks || 10))
.transition('opacity').duration(2000)
.attr('opacity', 0.8);
})
.render(function (selection, d) {
selection
.attr('transform', `translate(${[
d.translateX || 0,
d.translateY || 0,
]})`)
.transition('ticks').duration(3000)
.call(axisLocal.get(selection.node()));
});
})());
Raw
baseball.csv
Salary BattingAverage OnBasePercentage NumberRuns NumberHits Number of doubles Number of triples Number of home runs Number of runs batted in Number of walks Number of strike-outs Number of stolen bases Number of errors Eligible FreeAgent arbitration eligible? arbitrarion in 91/92?
3300 0.272 0.302 69 153 21 4 31 104 22 80 4 3 1 0 0 0
2600 0.269 0.335 58 111 17 2 18 66 39 69 0 3 1 1 0 0
2500 0.249 0.337 54 115 15 1 17 73 63 116 6 5 1 0 0 0
2475 0.26 0.292 59 128 22 7 12 50 23 64 21 21 0 0 1 0
2313 0.273 0.346 87 169 28 5 8 58 70 53 3 8 0 0 1 0
2175 0.291 0.379 104 170 32 2 26 100 87 89 22 4 1 0 0 0
600 0.258 0.37 34 86 14 1 14 38 15 45 0 10 1 0 0 0
460 0.228 0.279 16 38 7 2 3 21 11 32 2 3 0 0 0 0
240 0.25 0.327 40 61 11 0 1 18 24 26 14 2 0 0 0 0
200 0.203 0.24 39 64 10 1 10 33 14 96 13 6 0 0 0 0
177 0.262 0.283 7 38 5 0 0 10 5 18 2 7 0 0 0 0
140 0.222 0.307 21 45 9 0 6 22 19 56 3 3 0 0 0 0
117 0.227 0.28 4 5 2 0 1 3 2 1 0 0 0 0 0 0
115 0.261 0.37 1 6 0 0 0 2 4 3 0 0 0 0 0 0
2600 0.3 0.368 69 141 22 3 19 75 53 64 31 7 1 0 0 0
1907 0.225 0.292 60 130 22 1 13 73 50 100 2 14 1 0 0 0
1190 0.255 0.321 39 108 22 8 3 26 42 61 2 8 0 0 1 0
990 0.29 0.349 59 141 30 2 16 64 42 102 14 6 1 0 0 0
925 0.246 0.323 22 81 14 0 6 26 22 26 2 5 1 0 0 0
365 0.208 0.265 12 35 11 1 0 15 14 30 2 6 0 0 0 0
302 0.238 0.347 83 134 15 4 10 51 95 151 56 27 0 0 0 0
300 0.267 0.31 73 149 23 9 6 39 34 89 76 6 0 0 0 0
129 0.353 0.435 16 48 12 2 2 18 20 22 0 5 0 0 0 0
111 0.213 0.222 4 13 4 1 1 8 1 18 0 0 0 0 0 0
6100 0.302 0.391 102 174 44 6 18 100 90 67 2 15 1 1 0 0
4125 0.26 0.321 69 150 23 1 19 96 55 74 10 7 1 1 0 0
3213 0.255 0.347 45 71 7 5 1 17 39 47 37 3 1 0 0 0
2319 0.259 0.349 108 146 34 4 38 117 78 120 30 31 1 0 0 0
2000 0.223 0.307 43 84 10 4 10 40 36 56 7 4 1 0 0 0
1600 0.225 0.31 44 96 9 3 0 31 50 69 8 15 1 1 0 0
1394 0.258 0.381 58 108 23 0 4 51 83 50 1 5 1 0 0 0
935 0.275 0.351 40 70 16 4 4 21 30 42 15 3 1 1 0 0
850 0.327 0.424 60 141 14 3 0 54 75 38 4 20 1 1 0 0
775 0.272 0.3 18 62 14 2 5 35 9 19 0 3 0 0 1 0
760 0.241 0.32 33 84 16 2 6 36 40 53 2 14 0 0 1 1
629 0.293 0.355 32 79 17 0 1 30 24 43 2 0 0 0 0 0
275 0.257 0.315 51 96 10 1 6 34 33 57 13 8 0 0 0 0
120 0.225 0.33 7 20 2 0 0 5 14 19 1 2 0 0 0 0
2567 0.196 0.297 36 56 12 0 12 42 41 66 5 8 0 0 1 0
2500 0.252 0.309 66 137 33 1 28 81 48 93 1 5 1 0 0 0
2350 0.294 0.367 84 158 27 6 21 92 67 100 7 3 1 0 0 0
2317 0.297 0.391 48 73 13 5 3 12 37 20 24 4 1 0 0 0
2000 0.258 0.288 46 86 7 4 12 40 12 57 5 9 1 1 0 0
715 0.205 0.268 21 36 5 3 1 11 16 36 7 3 1 0 0 0
660 0.272 0.304 38 82 21 3 9 49 14 49 0 9 0 0 1 0
650 0.243 0.344 20 45 12 0 0 15 30 30 3 4 1 0 0 0
260 0.337 0.413 13 32 5 0 0 12 13 14 0 0 0 0 0 0
250 0.228 0.238 12 36 4 1 1 11 2 26 0 2 0 0 0 0
200 0.24 0.3 51 92 16 3 13 50 31 73 9 3 0 0 0 0
180 0.298 0.378 18 45 10 2 6 21 17 26 1 8 0 0 0 0
180 0.249 0.313 38 81 11 4 1 20 29 45 13 6 0 0 0 0
5150 0.292 0.41 95 149 28 5 25 116 107 73 43 3 0 0 1 0
4450 0.265 0.355 87 130 24 7 17 83 71 85 10 1 1 0 0 0
2000 0.265 0.306 53 133 16 6 3 54 30 56 7 9 0 0 1 1
1850 0.289 0.351 25 97 11 2 3 41 33 27 2 1 1 1 0 0
1192 0.295 0.363 19 65 17 1 1 29 21 32 1 5 1 0 0 0
875 0.27 0.33 96 164 32 8 16 67 52 99 10 24 0 0 1 1
825 0.246 0.324 45 62 12 2 7 24 28 39 17 6 1 0 0 0
525 0.288 0.366 24 47 7 0 7 24 18 23 2 3 0 0 0 0
367 0.273 0.344 23 51 11 2 4 23 19 34 9 1 0 0 0 0
325 0.239 0.328 16 26 1 1 4 18 14 15 3 2 0 0 0 0
320 0.244 0.281 7 20 4 0 1 11 5 17 4 2 0 0 0 0
150 0.275 0.373 83 113 17 2 10 50 64 81 8 12 0 0 0 0
113 0.34 0.381 15 36 7 0 0 7 7 17 3 6 0 0 0 0
113 0.25 0.28 2 6 0 2 0 1 1 8 0 1 0 0 0 0
2425 0.272 0.326 41 116 12 1 8 70 37 46 4 16 1 1 0 0
2367 0.219 0.268 34 82 13 2 9 33 23 86 5 9 1 0 0 0
2050 0.24 0.357 37 88 11 4 1 26 67 48 1 9 1 0 0 0
2000 0.285 0.38 96 157 30 3 3 50 83 36 35 8 1 0 0 0
1617 0.307 0.368 55 100 16 5 6 34 32 53 16 2 1 0 0 0
1167 0.24 0.3 29 58 8 4 6 36 22 34 15 5 1 0 0 0
992 0.264 0.319 38 121 24 5 2 57 36 63 9 7 0 0 1 0
400 0.227 0.26 21 47 10 2 1 15 10 29 12 2 0 0 0 0
315 0.305 0.36 69 173 40 6 8 77 50 113 20 3 0 0 0 0
315 0.28 0.353 76 158 36 3 11 81 62 94 17 25 0 0 0 0
230 0.251 0.301 83 142 23 15 9 69 41 114 44 6 0 0 0 0
135 0.216 0.316 28 58 7 2 5 28 39 33 14 1 0 0 0 0
130 0.243 0.322 38 45 8 3 5 17 18 45 15 6 0 0 0 0
3150 0.319 0.363 94 187 34 8 22 86 43 70 10 24 1 0 0 0
2785 0.297 0.371 81 119 10 1 0 26 47 40 72 3 1 1 0 0
2700 0.251 0.338 101 141 35 3 32 105 71 104 34 6 0 0 1 0
2400 0.253 0.313 32 67 12 0 11 45 25 31 0 3 1 0 0 0
1750 0.275 0.377 58 97 19 1 7 44 50 64 9 5 1 0 0 0
1262 0.32 0.368 41 98 17 2 3 32 23 19 2 15 0 0 1 0
940 0.259 0.358 49 91 14 3 11 54 54 59 5 17 0 0 1 0
555 0.275 0.377 67 109 25 1 21 87 65 81 8 7 0 0 0 0
500 0.249 0.296 36 88 9 2 0 27 22 63 3 18 0 0 1 0
370 0.188 0.243 13 30 7 0 5 14 11 42 1 8 0 0 1 0
350 0.241 0.316 46 99 25 0 6 44 44 48 1 4 0 0 0 0
148 0.242 0.284 7 23 6 0 4 23 6 20 1 3 0 0 0 0
146 0.251 0.296 32 68 16 1 12 50 17 48 0 8 0 0 0 0
4350 0.302 0.378 88 140 27 4 20 69 55 64 24 15 1 0 0 0
2833 0.28 0.359 51 101 12 2 6 35 46 39 5 7 1 0 0 0
2833 0.256 0.346 71 136 36 0 28 91 73 107 12 2 0 0 1 0
2750 0.301 0.354 91 175 35 3 26 88 44 79 19 12 0 0 1 0
1550 0.281 0.342 66 119 13 3 3 32 37 71 26 10 0 0 1 0
1300 0.234 0.301 13 36 5 0 6 19 16 39 0 6 0 0 1 0
1000 0.26 0.323 36 65 10 0 11 39 23 46 11 5 0 0 1 1
750 0.267 0.321 20 72 15 2 3 31 23 38 0 5 0 0 0 0
430 0.318 0.374 72 152 33 1 14 59 46 61 10 9 0 0 0 0
260 0.216 0.265 21 58 11 0 11 41 18 53 0 11 0 0 0 0
120 0.286 0.303 11 18 1 0 0 3 1 15 1 2 0 0 0 0
1500 0.253 0.312 65 145 30 3 13 80 46 85 4 23 0 0 1 0
1458 0.295 0.358 79 161 23 4 4 46 53 71 19 11 0 0 1 0
1210 0.285 0.331 84 170 28 10 8 54 42 65 34 5 0 0 1 0
935 0.262 0.319 44 121 20 7 4 50 40 49 9 10 0 0 0 0
800 0.214 0.29 38 72 12 1 11 38 36 92 1 3 1 1 0 0
395 0.218 0.327 26 31 3 1 1 11 24 17 16 0 0 0 0 0
350 0.294 0.387 79 163 26 4 15 82 75 116 7 12 0 0 0 0
285 0.254 0.32 51 120 28 9 13 69 40 101 10 5 0 0 0 0
139 0.243 0.27 27 61 13 2 9 36 9 74 4 18 0 0 0 0
133 0.153 0.227 11 18 6 0 1 7 12 41 1 1 0 0 0 0
4050 0.265 0.361 86 134 22 4 28 99 75 125 10 5 1 0 0 0
3600 0.235 0.353 39 67 10 0 11 33 48 92 14 3 1 0 0 0
3333 0.296 0.401 112 182 13 5 2 38 108 79 38 0 1 0 0 0
2183 0.264 0.353 39 91 16 2 8 40 47 32 4 7 1 0 0 0
1150 0.294 0.338 29 86 15 3 2 40 17 46 2 3 1 0 0 0
840 0.287 0.349 59 123 16 1 3 38 37 32 12 20 1 0 0 0
587 0.278 0.355 24 60 11 2 2 20 25 24 1 4 0 0 1 0
400 0.222 0.296 21 38 8 5 2 19 18 52 0 2 1 0 0 0
350 0.248 0.286 24 56 5 2 2 13 12 35 2 11 1 1 0 0
135 0.268 0.293 3 15 4 0 1 5 2 12 1 0 0 0 0 0
135 0.214 0.25 1 3 1 0 0 1 0 5 1 1 0 0 0 0
135 0.195 0.345 10 22 2 0 0 3 25 32 3 10 0 0 0 0
4075 0.278 0.396 84 147 19 1 31 106 105 135 4 14 1 0 0 0
3300 0.267 0.296 60 155 22 3 17 87 23 114 8 14 0 0 1 1
2387 0.317 0.355 69 158 27 11 4 62 34 19 8 3 1 0 0 0
2100 0.272 0.337 81 162 27 5 4 38 55 74 23 20 0 0 1 0
1750 0.265 0.322 44 102 17 1 6 51 33 56 3 18 1 1 0 0
805 0.262 0.315 51 94 12 1 21 49 27 66 5 2 0 0 1 0
725 0.194 0.277 25 34 12 2 2 22 19 15 5 8 0 0 1 0
687 0.217 0.319 41 74 16 0 12 44 51 77 9 9 1 1 0 0
200 0.228 0.295 26 84 16 0 10 47 31 90 2 2 0 0 0 0
130 0.286 0.444 0 2 0 0 0 0 2 3 0 0 0 0 0 0
125 0.269 0.345 4 7 2 1 0 5 3 4 0 0 0 0 1 1
120 0.246 0.267 5 14 2 0 0 9 1 9 2 2 0 0 0 0
117 0.275 0.298 6 25 3 0 1 6 2 14 0 7 0 0 0 0
114 0.243 0.308 13 26 7 2 2 8 9 27 1 1 0 0 0 0
4275 0.301 0.359 84 170 32 7 29 116 51 91 4 4 1 0 0 0
3563 0.312 0.357 67 155 30 3 4 43 34 74 17 6 1 0 0 0
2000 0.268 0.31 72 158 24 5 34 98 33 128 5 16 0 0 1 0
1600 0.262 0.352 74 129 24 5 19 48 63 95 14 11 1 0 0 0
1533 0.221 0.283 23 51 8 4 1 12 20 33 3 11 0 0 1 0
940 0.175 0.216 14 29 4 1 3 17 9 60 0 3 1 0 0 0
850 0.238 0.273 31 104 16 2 5 41 18 61 3 0 0 0 1 0
650 0.264 0.325 51 92 10 6 0 18 30 31 21 4 0 0 0 0
360 0.225 0.271 16 40 9 0 0 19 9 22 1 4 0 0 0 0
150 0.123 0.188 12 13 3 0 2 8 7 26 3 3 0 0 0 0
145 0.246 0.358 41 55 5 3 1 15 36 30 13 0 0 0 0 0
140 0.24 0.306 14 31 7 1 2 14 12 25 0 0 0 0 0 0
109 0.115 0.148 0 3 1 0 0 2 1 6 0 3 0 0 0 0
109 0.12 0.185 0 3 0 0 0 1 2 11 0 1 0 0 0 0
3415 0.227 0.307 29 40 9 1 10 28 16 29 4 8 1 1 0 0
2100 0.323 0.374 99 210 46 5 34 114 53 46 6 11 1 0 0 0
1300 0.278 0.321 57 135 22 1 5 43 28 45 6 1 1 0 0 0
1200 0.263 0.373 57 127 17 2 16 70 84 108 0 11 0 0 1 0
1025 0.26 0.313 82 158 27 10 19 59 47 115 16 3 1 0 0 0
730 0.216 0.253 24 62 11 1 0 14 15 31 0 7 0 0 1 0
687 0.233 0.326 45 74 16 0 23 61 41 99 0 0 0 0 0 0
380 0.204 0.255 29 42 9 0 7 18 13 49 0 4 0 0 0 0
365 0.23 0.336 40 59 12 3 2 27 36 44 12 3 0 0 0 0
175 0.243 0.304 36 83 15 0 11 31 29 61 0 1 0 0 0 0
150 0.233 0.302 40 91 17 2 16 45 40 82 1 7 0 0 0 0
150 0.278 0.316 15 59 7 0 2 22 12 19 1 3 0 0 0 0
140 0.269 0.303 32 58 12 1 13 33 11 51 1 2 0 0 0 0
3050 0.3 0.35 76 163 26 6 9 83 43 35 15 3 0 0 1 0
2900 0.249 0.374 75 120 18 1 26 87 96 133 0 0 1 0 0 0
2850 0.229 0.303 54 105 24 1 16 70 49 72 1 3 1 0 0 0
2700 0.332 0.421 93 181 42 2 8 51 89 32 1 12 1 0 0 0
2400 0.231 0.291 45 107 23 2 5 48 37 53 8 5 1 0 0 0
2300 0.251 0.314 56 119 33 3 14 56 39 81 6 2 1 0 0 0
1650 0.262 0.312 45 116 25 3 4 41 26 55 11 5 0 0 1 0
1600 0.283 0.349 87 175 42 2 5 60 60 53 6 14 0 0 1 1
1075 0.258 0.318 64 107 22 3 8 40 35 86 4 24 0 0 1 0
550 0.225 0.272 17 38 6 1 1 4 11 40 4 5 1 1 0 0
350 0.263 0.271 10 30 8 0 0 9 1 16 0 3 0 0 0 0
340 0.295 0.375 69 141 21 1 11 71 61 66 1 9 0 0 0 0
155 0.26 0.339 21 57 12 0 4 32 26 43 2 6 0 0 0 0
145 0.457 0.486 6 16 4 2 0 7 2 2 0 2 0 0 0 0
950 0.262 0.307 30 111 13 2 0 31 26 27 5 12 0 0 1 0
700 0.243 0.279 23 69 14 0 1 24 14 67 0 5 0 0 0 0
550 0.224 0.274 28 94 21 1 1 44 27 54 2 7 1 1 0 0
525 0.217 0.264 10 40 9 0 0 7 8 24 0 4 0 0 0 0
525 0.288 0.346 80 171 28 2 11 69 48 74 3 27 0 0 0 0
333 0.243 0.297 46 99 18 7 9 45 30 85 4 7 0 0 0 0
325 0.258 0.324 29 57 8 2 8 25 23 54 6 3 0 0 0 0
300 0.209 0.293 9 28 5 1 0 11 15 12 0 1 1 1 0 0
200 0.284 0.31 22 73 14 0 5 30 10 43 3 8 0 0 0 0
175 0.282 0.323 60 130 31 2 26 95 25 99 3 9 0 0 0 0
158 0.249 0.309 30 70 12 3 4 22 24 57 10 1 0 0 0 0
145 0.264 0.293 29 83 15 1 0 30 15 45 2 9 0 0 0 0
4500 0.261 0.347 102 163 25 0 44 133 78 151 0 8 1 0 0 0
3358 0.263 0.387 85 132 17 2 31 89 101 131 3 6 1 0 0 0
2400 0.248 0.32 57 93 20 0 9 55 37 39 11 9 1 0 0 0
2200 0.279 0.391 94 131 26 2 23 78 90 45 4 4 1 0 0 0
2017 0.179 0.314 64 60 14 2 25 64 89 175 1 7 1 0 0 0
1567 0.284 0.371 87 160 28 4 17 72 79 95 10 8 1 0 0 0
1050 0.247 0.306 65 114 14 9 6 52 36 60 15 3 1 1 0 0
375 0.237 0.351 23 46 10 1 7 29 35 40 1 1 1 1 0 0
355 0.26 0.293 18 66 6 0 4 21 12 26 2 3 1 0 0 0
300 0.259 0.309 65 144 36 3 21 91 40 149 12 23 0 0 0 0
230 0.257 0.335 77 122 15 7 3 33 52 92 41 6 0 0 0 0
150 0.289 0.325 29 46 13 2 5 17 9 24 10 2 0 0 0 0
120 0.291 0.341 19 37 5 0 2 11 10 25 2 2 0 0 0 0
109 0.216 0.341 37 61 7 5 0 19 54 91 29 6 1 0 0 0
3453 0.325 0.399 133 216 32 13 17 75 77 62 19 6 1 0 0 0
3200 0.26 0.332 66 131 20 4 10 77 54 79 6 2 1 0 0 0
2530 0.289 0.319 57 146 19 4 5 68 26 33 5 4 0 0 1 0
2167 0.213 0.282 48 77 16 2 11 38 35 71 13 9 1 0 0 0
1150 0.286 0.32 63 149 27 4 2 47 27 34 4 12 1 1 0 0
750 0.283 0.337 71 117 13 6 8 54 34 55 14 17 0 0 0 0
500 0.244 0.319 81 132 24 5 27 98 62 125 2 2 0 0 0 0
395 0.311 0.361 64 125 15 6 1 57 33 38 16 1 0 0 0 0
300 0.206 0.262 14 51 18 1 1 28 17 26 0 3 1 1 0 0
284 0.265 0.35 28 62 11 3 1 25 29 21 4 11 1 0 0 0
230 0.238 0.272 53 106 18 3 15 59 22 107 14 7 0 0 0 0
109 0.364 0.364 2 4 1 0 1 1 0 4 0 0 0 0 0 0
5300 0.316 0.397 78 153 35 3 31 100 65 121 6 7 1 1 0 0
3620 0.288 0.339 64 169 35 0 9 68 46 42 2 5 1 0 0 0
2500 0.268 0.308 52 122 20 0 24 77 25 49 3 6 1 0 0 0
2167 0.225 0.312 37 64 12 0 17 48 36 80 1 0 1 0 0 0
2150 0.267 0.333 68 130 22 2 20 69 45 77 32 4 0 0 1 0
1950 0.247 0.343 67 119 15 4 12 49 67 84 6 12 1 1 0 0
1300 0.285 0.321 67 140 23 2 19 80 26 40 0 3 0 0 1 0
360 0.245 0.322 19 45 11 1 1 15 18 43 3 15 0 0 0 0
280 0.23 0.257 34 106 23 1 12 53 16 75 3 15 0 0 0 0
255 0.22 0.333 69 110 14 1 23 63 83 128 5 6 0 0 0 0
147 0.242 0.288 35 72 12 4 3 23 15 52 12 18 0 0 0 0
125 0.238 0.336 43 76 19 4 3 34 48 57 10 5 0 0 0 0
109 0.308 0.31 4 8 1 0 0 3 1 3 0 0 0 0 0 0
3742 0.273 0.33 89 174 42 3 33 108 49 112 20 8 1 0 0 0
3633 0.252 0.308 58 108 18 2 20 65 31 70 12 13 1 0 0 0
2983 0.295 0.354 88 188 41 11 9 69 57 86 53 15 0 0 1 0
2383 0.282 0.342 110 181 40 10 17 60 55 135 33 1 1 0 0 0
2300 0.262 0.326 75 149 27 4 28 86 56 109 7 2 1 1 0 0
1375 0.25 0.342 37 72 15 0 12 48 36 76 4 2 1 0 0 0
1000 0.244 0.271 22 71 17 0 5 36 11 45 0 4 0 0 1 0
1000 0.234 0.274 41 104 18 3 0 29 24 107 7 19 0 0 1 0
900 0.216 0.318 20 40 5 1 1 21 29 21 0 3 1 0 0 0
775 0.25 0.364 27 60 12 1 2 24 44 44 0 0 1 0 0 0
600 0.243 0.286 27 85 6 2 0 27 22 49 5 22 1 1 0 0
387 0.256 0.353 64 116 30 1 17 68 68 84 0 5 0 0 0 0
117 0.275 0.361 17 44 7 0 4 20 19 43 0 14 0 0 0 0
2700 0.246 0.293 58 144 22 1 18 66 33 104 5 17 1 0 0 0
2317 0.238 0.322 48 85 11 1 16 50 44 62 3 5 1 0 0 0
1650 0.296 0.352 92 179 28 8 2 50 52 74 48 5 0 0 1 1
640 0.263 0.321 32 65 10 2 2 26 11 55 7 3 0 0 0 0
190 0.258 0.295 38 94 14 1 3 20 14 26 4 11 0 0 0 0
170 0.2 0.258 11 23 7 0 1 13 8 34 1 3 0 0 0 0
135 0.211 0.274 5 12 2 0 0 3 3 2 0 4 0 0 0 0
130 0.203 0.313 7 14 4 0 0 3 10 17 0 1 0 0 0 0
130 0.293 0.354 8 17 7 0 0 9 6 12 1 1 0 0 0 0
3650 0.285 0.323 63 159 27 0 25 86 32 62 2 10 1 0 0 0
3575 0.304 0.345 85 198 38 2 10 56 41 38 31 10 1 0 0 0
3500 0.268 0.359 102 163 20 6 5 50 83 68 51 3 1 0 0 0
2500 0.259 0.358 71 106 22 5 18 66 62 86 0 6 1 1 0 0
1900 0.273 0.284 52 143 20 3 3 49 11 38 21 21 0 0 1 0
1350 0.241 0.299 42 111 25 0 18 74 32 86 1 6 1 1 0 0
740 0.284 0.367 92 172 25 1 23 100 80 67 2 18 0 0 1 0
650 0.246 0.31 25 41 13 0 5 22 15 42 0 4 0 0 1 0
620 0.318 0.453 104 178 31 2 32 109 138 112 1 2 0 0 0 0
565 0.274 0.304 72 161 14 13 0 49 26 58 26 2 0 0 0 0
235 0.241 0.313 37 55 2 3 0 18 20 21 11 10 0 0 0 0
225 0.165 0.218 15 19 4 1 1 5 7 25 0 0 0 0 0 0
200 0.281 0.386 37 63 16 3 6 31 38 40 1 10 0 0 0 0
145 0.251 0.361 42 61 10 2 3 25 39 48 14 2 0 0 0 0
120 0.217 0.25 4 5 0 0 0 0 1 7 1 1 0 0 0 0
109 0.225 0.333 71 8 16 4 0 3 14 12 25 0 0 0 1 0
4200 0.301 0.36 79 166 34 3 21 96 52 66 2 8 1 1 0 0
3417 0.259 0.322 65 135 32 1 16 74 49 46 6 2 1 0 0 0
3100 0.255 0.327 77 129 40 2 10 61 58 75 2 1 1 0 0 0
1650 0.301 0.333 47 113 22 3 2 47 20 35 5 5 1 1 0 0
1150 0.272 0.338 59 132 19 2 9 62 47 38 26 17 0 0 1 0
900 0.25 0.279 11 57 10 0 1 23 11 46 0 1 1 0 0 0
740 0.277 0.33 34 74 18 2 13 41 17 52 1 3 0 0 1 0
575 0.28 0.336 41 77 22 1 4 23 23 44 14 10 0 0 0 0
425 0.252 0.301 15 35 5 1 5 22 10 23 1 0 0 0 1 0
400 0.188 0.243 20 36 9 1 2 18 15 40 2 2 1 1 0 0
287 0.277 0.32 24 51 9 0 2 13 11 42 15 4 0 0 0 0
275 0.261 0.289 86 164 28 9 8 64 24 99 20 3 0 0 0 0
183 0.217 0.283 45 80 16 4 5 34 30 75 17 16 0 0 0 0
170 0.251 0.315 22 58 8 0 3 31 23 42 2 6 0 0 0 0
153 0.216 0.267 20 51 7 0 1 17 16 45 3 12 0 0 0 0
109 0.271 0.328 74 161 22 6 12 58 49 133 23 17 1 1 0 0
3100 0.284 0.373 72 131 20 1 20 89 67 48 4 8 1 0 0 0
2992 0.319 0.352 92 195 29 6 15 89 31 78 11 6 1 0 0 0
2800 0.277 0.385 84 148 34 1 29 93 95 117 5 0 1 0 0 0
2500 0.311 0.336 54 137 28 1 10 69 14 22 1 8 1 1 0 0
1933 0.265 0.31 52 108 23 3 8 42 26 72 11 9 0 0 1 0
1200 0.279 0.322 36 102 20 0 6 36 21 55 1 11 1 1 0 0
1075 0.31 0.363 79 137 27 8 18 74 34 79 13 7 0 0 1 0
950 0.286 0.361 34 73 14 1 2 19 30 21 2 3 0 0 1 0
450 0.303 0.401 21 50 10 1 6 23 24 25 0 2 0 0 0 0
360 0.281 0.351 78 159 24 6 1 50 59 40 25 18 0 0 0 0
175 0.286 0.378 35 57 7 2 5 20 30 35 5 7 0 0 0 0
155 0.283 0.327 15 39 7 1 7 26 9 31 3 1 0 0 0 0
5000 0.307 0.357 110 203 44 5 25 116 56 91 16 7 0 0 1 1
3250 0.268 0.4 105 126 17 1 18 57 96 73 58 8 1 0 0 0
2825 0.201 0.33 62 97 22 0 22 75 93 116 2 4 1 0 0 0
2600 0.276 0.346 86 158 33 0 25 85 58 113 6 1 1 0 0 0
2050 0.274 0.312 50 125 31 1 6 67 22 70 2 15 0 0 1 0
1583 0.295 0.383 76 144 25 1 20 90 72 67 0 1 1 0 0 0
1150 0.063 0.063 0 1 0 0 0 1 0 2 0 0 1 1 0 0
1100 0.238 0.29 38 70 14 4 0 28 18 43 20 3 1 0 0 0
760 0.226 0.286 15 30 8 1 0 13 12 14 0 5 0 0 1 0
525 0.261 0.321 16 53 4 0 1 17 16 28 0 6 1 0 0 0
500 0.249 0.385 32 51 10 1 1 20 47 25 2 3 1 1 0 0
205 0.249 0.336 33 46 8 0 3 21 23 42 12 3 0 0 0 0
185 0.238 0.289 21 56 5 1 0 21 14 37 3 11 0 0 0 0
115 0.235 0.268 9 16 5 0 2 4 3 11 3 1 0 0 0 0
3750 0.256 0.338 52 95 13 1 27 69 43 57 2 6 1 0 0 0
2188 0.248 0.3 58 139 29 3 17 88 44 61 0 5 1 0 0 0
2167 0.254 0.332 95 160 34 6 3 57 72 63 28 18 0 0 1 0
2167 0.194 0.286 38 63 8 1 8 32 34 49 0 6 1 0 0 0
2050 0.327 0.399 76 179 42 1 22 100 71 82 18 4 0 0 1 0
1445 0.244 0.337 64 99 14 4 27 77 53 117 0 5 0 0 1 0
875 0.305 0.347 35 54 6 2 6 23 10 27 16 2 0 0 1 0
560 0.307 0.405 98 167 35 1 14 52 84 72 0 15 0 0 0 0
360 0.23 0.302 42 98 16 4 1 41 45 37 7 13 0 0 0 0
162 0.247 0.286 16 44 13 0 2 22 9 38 0 7 0 0 0 0
133 0.205 0.272 11 23 2 0 4 9 11 24 0 2 0 0 0 0
109 0.216 0.285 38 87 12 0 19 51 35 117 0 2 1 0 0 0
4300 0.266 0.359 115 152 32 1 44 122 78 152 26 9 1 0 0 0
3850 0.322 0.389 115 203 49 3 26 88 68 72 4 12 0 0 1 1
2387 0.341 0.408 108 201 27 3 15 78 65 78 36 14 1 0 0 0
950 0.278 0.377 76 113 17 2 17 49 58 70 1 0 1 1 0 0
675 0.271 0.339 21 54 8 1 2 20 21 25 2 11 1 1 0 0
600 0.252 0.283 44 136 18 4 9 44 25 84 11 21 1 1 0 0
287 0.264 0.321 78 144 34 1 27 102 42 118 4 6 0 0 0 0
230 0.269 0.332 46 106 22 0 20 69 33 93 0 6 0 0 0 0
215 0.194 0.27 8 28 3 2 1 11 16 23 1 1 0 0 0 0
183 0.213 0.312 36 57 8 3 2 26 39 32 8 15 0 0 0 0
170 0.111 0.138 3 3 0 0 0 1 1 7 0 0 0 0 0 0
160 0.264 0.318 24 48 7 0 1 22 15 18 0 7 0 0 0 0
142 0.187 0.281 38 50 9 2 15 37 32 98 0 9 0 0 0 0
140 0.264 0.27 24 74 16 0 3 27 5 42 0 10 0 0 0 0
109 0.258 0.395 6 8 1 0 1 6 7 11 0 0 0 0 0 0
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset='utf-8'>
<script src='https://unpkg.com/d3@4'></script>
<script src='https://unpkg.com/d3-component@3'></script>
<script src='https://unpkg.com/redux@3/dist/redux.min.js'></script>
<script src='https://unpkg.com/d3-tip@0.7.1'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.23.1/babel.min.js'></script>
<link rel='stylesheet' href='https://unpkg.com/bootstrap@4.0.0-alpha.6/dist/css/bootstrap.min.css'>
<style>
.point {
fill: currentColor;
}
/* Tooltip styles copied from
http://bl.ocks.org/Caged/6476579 */
.d3-tip {
line-height: 1;
padding: 12px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
border-radius: 2px;
}
</style>
</head>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src='wheel.js'></script>
<script src='spinner.js'></script>
<script src='axis.js'></script>
<script src='scatterplot.js'></script>
<script src='tooltip.js'></script>
<script src='page.js'></script>
<script src='loadData.js'></script>
<script src='reducer.js'></script>
<script src='actionsFromDispatch.js'></script>
<script src='vis.js'></script>
</body>
Raw
lebab.sh
# safe
lebab --replace vis.js --transform arrow
lebab --replace vis.js --transform for-of
lebab --replace vis.js --transform for-each
lebab --replace vis.js --transform arg-rest
lebab --replace vis.js --transform arg-spread
lebab --replace vis.js --transform obj-method
lebab --replace vis.js --transform obj-shorthand
lebab --replace vis.js --transform multi-var
# unsafe
lebab --replace vis.js --transform let
lebab --replace vis.js --transform template
Raw
loadData.js
/* global d3 */
function loadData(actions) {
const numericColumns = [
'Salary',
'BattingAverage',
'OnBasePercentage',
'NumberRuns',
'NumberHits'
];
const ordinalColumns = [
'Eligible',
'FreeAgent'
];
setTimeout(() => { // Show off the spinner for a few seconds ;)
d3.csv('baseball.csv', type, (data) => {
actions.ingestData(data, numericColumns, ordinalColumns);
});
}, 2000);
function type(d) {
return numericColumns.reduce((d, column) => {
d[column] = +d[column];
return d;
}, d);
}
}
Raw
page.js
/* global d3 spinner scatterplot tooltip window document */
// Quick fix for resizing some things for mobile-ish viewers
// vanilla JS window width and height
// https://gist.github.com/joshcarr/2f861bd37c3d0df40b30
const wV = window;
const dV = document;
const eV = dV.documentElement;
const gV = dV.getElementsByTagName('body')[0];
const xV = wV.innerWidth || eV.clientWidth || gV.clientWidth;
const yV = wV.innerHeight || eV.clientHeight || gV.clientHeight;
// Quick fix for resizing some things for mobile-ish viewers
const mobileScreen = (xV < 500);
// This component manages an svg element, and
// either displays a spinner or text,
// depending on the value of the `loading` state.
const svg = d3.component('svg')
.render(function (selection, d) {
const svgSelection = selection
.attr('width', d.width)
.attr('height', d.height)
.call(spinner, !d.loading ? [] : {
x: d.width / 2,
y: d.height / 2,
speed: 0.2,
});
const tipCallbacks = tooltip(svgSelection, d);
svgSelection
.call(scatterplot, d.loading ? [] : d, tipCallbacks);
});
const label = d3.component('label', 'col-sm-2 col-form-label')
.render(function (selection, d) {
selection.text(d);
});
const option = d3.component('option')
.render(function (selection, d) {
selection.text(d);
});
const select = d3.component('select', 'form-control')
.render(function (selection, d) {
selection
.call(option, d.columns)
.property('value', d.value)
.on('change', function () {
d.action(this.value);
});
});
const rowComponent = d3.component('div', 'row');
const colSm10 = d3.component('div', 'col-sm-10');
const menu = d3.component('div', 'col-sm-4')
.render(function (selection, d) {
const row = rowComponent(selection).call(label, d.label);
colSm10(row).call(select, d);
});
const menus = d3.component('div', 'container-fluid')
.create(function (selection) {
selection.style('opacity', 0);
})
.render(function (selection, d) {
rowComponent(selection).call(menu, [
{
label: 'X',
value: d.x,
action: d.setX,
columns: d.numericColumns,
},
{
label: 'Y',
value: d.y,
action: d.setY,
columns: d.numericColumns,
},
{
label: 'Color',
value: d.color,
action: d.setColor,
columns: d.ordinalColumns,
},
{
label: 'Radius',
value: d.radius,
action: d.setRadius,
columns: d.numericColumns,
},
], d);
if (!d.loading && selection.style('opacity') === '0') {
selection.transition().duration(2000)
.style('opacity', 1);
}
});
const app = d3.component('div')
.render(function (selection, d) {
selection
.call(svg, d)
.call(menus, d);
});
Raw
reducer.js
function reducer(state, action) {
state = state || {
width: 960,
height: 500 - 88,
loading: true,
margin: { top: 12, right: 12, bottom: 40, left: 50 },
x: 'BattingAverage',
y: 'NumberRuns',
color: 'Eligible',
radius: 'Salary',
};
switch (action.type) {
case 'INGEST_DATA':
return Object.assign({}, state, {
loading: false,
data: action.data,
numericColumns: action.numericColumns,
ordinalColumns: action.ordinalColumns,
});
case 'SET_X':
return Object.assign({}, state, { x: action.column });
case 'SET_Y':
return Object.assign({}, state, { y: action.column });
case 'SET_COLOR':
return Object.assign({}, state, { color: action.column });
case 'SET_RADIUS':
return Object.assign({}, state, { radius: action.column });
default:
return state;
}
}
Raw
scatterplot.js
/* global d3 axis mobileScreen */
// This component displays the visualization.
const scatterplot = ((() => {
const xScale = d3.scaleLinear();
const yScale = d3.scaleLinear();
const colorScale = d3.scaleOrdinal()
.range(d3.schemeCategory10);
// scale for the circle size
const radiusScale = d3.scaleSqrt();
const fillOpacityScale = d3.scaleThreshold();
function render(selection, d) {
const x = d.x;
const y = d.y;
const color = d.color;
const radius = d.radius;
const margin = d.margin;
const innerWidth = d.width - margin.left - margin.right;
const innerHeight = d.height - margin.top - margin.bottom;
const minRadius = 1;
const maxRadius = 12;
xScale
.domain(d3.extent(d.data, d => d[x]))
.range([0, innerWidth]);
yScale
.domain(d3.extent(d.data, d => d[y]))
.range([innerHeight, 0]);
colorScale
.domain(d3.extent(d.data, d => d[color]));
radiusScale
.range([mobileScreen ? 1 : 2, mobileScreen ? 10 : 16])
.domain(d3.extent(d.data, d => d[radius]));
// set the fill opacity
// based on the cardinality of the data
fillOpacityScale
.domain([200, 300, 500])
.range([0.7, 0.5, 0.3, 0.2]);
selection
.attr('transform', `translate(${margin.left},${margin.top})`)
.call(axis, [
{
type: 'Left',
scale: yScale,
translateX: -12,
},
{
type: 'Bottom',
scale: xScale,
translateY: innerHeight + 12,
ticks: 20,
},
]);
const renderData = d.data;
const circles = selection
.selectAll('.point')
.data(d.data);
circles.exit().remove();
circles
.enter().append('circle')
.attr('class', 'point')
.attr('r', 0)
.attr('cx', (d.width / 2) - margin.left)
.attr('cy', (d.height / 2) - margin.top)
.merge(circles)
.on('mouseover', d.show)
.on('mouseout', d.hide)
.transition()
.duration(2000)
.delay((d, i) => i * 5)
.attr('r', d => radiusScale(d[radius]))
.attr('cx', d => xScale(d[x]))
.attr('cy', d => yScale(d[y]))
.attr('color', d => colorScale(d[color]))
.style('fill-opacity', fillOpacityScale(renderData.length));
}
return d3.component('g')
.render(render);
})());
Raw
spinner.js
/* global d3 wheel */
// This component with a local timer makes the wheel spin.
const spinner = ((() => {
const timer = d3.local();
return d3.component('g')
.create(function (selection, d) {
timer.set(selection.node(), d3.timer((elapsed) => {
selection.call(wheel, elapsed * d.speed);
}));
})
.render(function (selection, d) {
selection.attr('transform', `translate(${d.x},${d.y})`);
})
.destroy(function (selection, d) {
timer.get(selection.node()).stop();
return selection
.attr('fill-opacity', 1)
.transition().duration(3000)
.attr('transform', `translate(${d.x},${d.y}) scale(10)`)
.attr('fill-opacity', 0);
});
})());
Raw
tooltip.js
/* global d3 */
// Use the d3-tip library for tooltips.
const tooltip = ((() => {
const tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0]);
return (svgSelection, state) => {
// Wish we could use D3 here for DOM manipulation..
tip.html(d => [
`<h4>${d.year} ${d.name}</h4>`,
`<div><strong>${state.x}: </strong>`,
`<span>${d[state.x]}</span></div>`,
`<div><strong>${state.y}: </strong>`,
`<span>${d[state.y]}</span></div>`,
`<div><strong>${state.color}: </strong>`,
`<span>${d[state.color]}</span></div>`,
].join(''));
svgSelection.call(tip);
return {
show: tip.show,
hide: tip.hide,
};
};
})());
Raw
vis.js
/* global d3 Redux loadData reducer actionsFromDispatch app */
function main() {
const store = Redux.createStore(reducer);
const actions = actionsFromDispatch(store.dispatch);
const renderApp = () => {
d3.select('body').call(app, store.getState(), actions);
};
renderApp();
store.subscribe(renderApp);
loadData(actions);
}
// call main() to run the app
main();
Raw
wheel.js
/* global d3 */
// This stateless component renders a static "wheel" made of circles,
// and rotates it depending on the value of props.angle.
const wheel = d3.component('g')
.create(function (selection) {
const minRadius = 4;
const maxRadius = 10;
const numDots = 10;
const wheelRadius = 40;
const rotation = 0;
const rotationIncrement = 3;
const radius = d3.scaleLinear()
.domain([0, numDots - 1])
.range([maxRadius, minRadius]);
const angle = d3.scaleLinear()
.domain([0, numDots])
.range([0, Math.PI * 2]);
selection
.selectAll('circle').data(d3.range(numDots))
.enter().append('circle')
.attr('cx', d => Math.sin(angle(d)) * wheelRadius)
.attr('cy', d => Math.cos(angle(d)) * wheelRadius)
.attr('r', radius);
})
.render(function (selection, d) {
selection.attr('transform', `rotate(${d})`);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment