Skip to content

Instantly share code, notes, and snippets.

@micahstubbs

micahstubbs/.block

Last active February 20, 2020 10:56
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save micahstubbs/b097f9d0999848ee70b74b36ce30cbb8 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save micahstubbs/b097f9d0999848ee70b74b36ce30cbb8 to your computer and use it in GitHub Desktop.
Download ZIP
scatterplot menus with d3-component | radius select
Raw
.block
license: mit
border: no
Raw
README.md

an example that separates concerns a bit with functions in different files

nice point sizing with a square root radius scale from the block ES2015 Voronoi Scatterplot with bootstrap-native popover tooltip from @micahstubbs

find a nice commit history at the companion repo

an iteration scatterplot menus with d3-component | es2015 from @micahstubbs

now with a new dimension to toggle: mark size (radius)

an es2015 iteration on the block Scatter Plot with Menus from @currankelleher

This example demonstrates usage of a new library called d3-component and Redux to create a scatter plot with menus for X, Y, and color, and some animations. It's an experiment to see how things play out when pairing D3 directly with Redux, without React in the middle.

Built with blockbuilder.org

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

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
auto-mpg.csv
mpg cylinders displacement horsepower weight acceleration year origin name
18 8 307 130 3504 12 1970 USA chevrolet chevelle malibu
15 8 350 165 3693 11.5 1970 USA buick skylark 320
18 8 318 150 3436 11 1970 USA plymouth satellite
16 8 304 150 3433 12 1970 USA amc rebel sst
17 8 302 140 3449 10.5 1970 USA ford torino
15 8 429 198 4341 10 1970 USA ford galaxie 500
14 8 454 220 4354 9 1970 USA chevrolet impala
14 8 440 215 4312 8.5 1970 USA plymouth fury iii
14 8 455 225 4425 10 1970 USA pontiac catalina
15 8 390 190 3850 8.5 1970 USA amc ambassador dpl
15 8 383 170 3563 10 1970 USA dodge challenger se
14 8 340 160 3609 8 1970 USA plymouth 'cuda 340
15 8 400 150 3761 9.5 1970 USA chevrolet monte carlo
14 8 455 225 3086 10 1970 USA buick estate wagon (sw)
24 4 113 95 2372 15 1970 Japan toyota corona mark ii
22 6 198 95 2833 15.5 1970 USA plymouth duster
18 6 199 97 2774 15.5 1970 USA amc hornet
21 6 200 85 2587 16 1970 USA ford maverick
27 4 97 88 2130 14.5 1970 Japan datsun pl510
26 4 97 46 1835 20.5 1970 Germany volkswagen 1131 deluxe sedan
25 4 110 87 2672 17.5 1970 Germany peugeot 504
24 4 107 90 2430 14.5 1970 Germany audi 100 ls
25 4 104 95 2375 17.5 1970 Germany saab 99e
26 4 121 113 2234 12.5 1970 Germany bmw 2002
21 6 199 90 2648 15 1970 USA amc gremlin
10 8 360 215 4615 14 1970 USA ford f250
10 8 307 200 4376 15 1970 USA chevy c20
11 8 318 210 4382 13.5 1970 USA dodge d200
9 8 304 193 4732 18.5 1970 USA hi 1200d
27 4 97 88 2130 14.5 1971 Japan datsun pl510
28 4 140 90 2264 15.5 1971 USA chevrolet vega 2300
25 4 113 95 2228 14 1971 Japan toyota corona
19 6 232 100 2634 13 1971 USA amc gremlin
16 6 225 105 3439 15.5 1971 USA plymouth satellite custom
17 6 250 100 3329 15.5 1971 USA chevrolet chevelle malibu
19 6 250 88 3302 15.5 1971 USA ford torino 500
18 6 232 100 3288 15.5 1971 USA amc matador
14 8 350 165 4209 12 1971 USA chevrolet impala
14 8 400 175 4464 11.5 1971 USA pontiac catalina brougham
14 8 351 153 4154 13.5 1971 USA ford galaxie 500
14 8 318 150 4096 13 1971 USA plymouth fury iii
12 8 383 180 4955 11.5 1971 USA dodge monaco (sw)
13 8 400 170 4746 12 1971 USA ford country squire (sw)
13 8 400 175 5140 12 1971 USA pontiac safari (sw)
18 6 258 110 2962 13.5 1971 USA amc hornet sportabout (sw)
22 4 140 72 2408 19 1971 USA chevrolet vega (sw)
19 6 250 100 3282 15 1971 USA pontiac firebird
18 6 250 88 3139 14.5 1971 USA ford mustang
23 4 122 86 2220 14 1971 USA mercury capri 2000
28 4 116 90 2123 14 1971 Germany opel 1900
30 4 79 70 2074 19.5 1971 Germany peugeot 304
30 4 88 76 2065 14.5 1971 Germany fiat 124b
31 4 71 65 1773 19 1971 Japan toyota corolla 1200
35 4 72 69 1613 18 1971 Japan datsun 1200
27 4 97 60 1834 19 1971 Germany volkswagen model 111
26 4 91 70 1955 20.5 1971 USA plymouth cricket
24 4 113 95 2278 15.5 1972 Japan toyota corona hardtop
25 4 97.5 80 2126 17 1972 USA dodge colt hardtop
23 4 97 54 2254 23.5 1972 Germany volkswagen type 3
20 4 140 90 2408 19.5 1972 USA chevrolet vega
21 4 122 86 2226 16.5 1972 USA ford pinto runabout
13 8 350 165 4274 12 1972 USA chevrolet impala
14 8 400 175 4385 12 1972 USA pontiac catalina
15 8 318 150 4135 13.5 1972 USA plymouth fury iii
14 8 351 153 4129 13 1972 USA ford galaxie 500
17 8 304 150 3672 11.5 1972 USA amc ambassador sst
11 8 429 208 4633 11 1972 USA mercury marquis
13 8 350 155 4502 13.5 1972 USA buick lesabre custom
12 8 350 160 4456 13.5 1972 USA oldsmobile delta 88 royale
13 8 400 190 4422 12.5 1972 USA chrysler newport royal
19 3 70 97 2330 13.5 1972 Japan mazda rx2 coupe
15 8 304 150 3892 12.5 1972 USA amc matador (sw)
13 8 307 130 4098 14 1972 USA chevrolet chevelle concours (sw)
13 8 302 140 4294 16 1972 USA ford gran torino (sw)
14 8 318 150 4077 14 1972 USA plymouth satellite custom (sw)
18 4 121 112 2933 14.5 1972 Germany volvo 145e (sw)
22 4 121 76 2511 18 1972 Germany volkswagen 411 (sw)
21 4 120 87 2979 19.5 1972 Germany peugeot 504 (sw)
26 4 96 69 2189 18 1972 Germany renault 12 (sw)
22 4 122 86 2395 16 1972 USA ford pinto (sw)
28 4 97 92 2288 17 1972 Japan datsun 510 (sw)
23 4 120 97 2506 14.5 1972 Japan toyouta corona mark ii (sw)
28 4 98 80 2164 15 1972 USA dodge colt (sw)
27 4 97 88 2100 16.5 1972 Japan toyota corolla 1600 (sw)
13 8 350 175 4100 13 1973 USA buick century 350
14 8 304 150 3672 11.5 1973 USA amc matador
13 8 350 145 3988 13 1973 USA chevrolet malibu
14 8 302 137 4042 14.5 1973 USA ford gran torino
15 8 318 150 3777 12.5 1973 USA dodge coronet custom
12 8 429 198 4952 11.5 1973 USA mercury marquis brougham
13 8 400 150 4464 12 1973 USA chevrolet caprice classic
13 8 351 158 4363 13 1973 USA ford ltd
14 8 318 150 4237 14.5 1973 USA plymouth fury gran sedan
13 8 440 215 4735 11 1973 USA chrysler new yorker brougham
12 8 455 225 4951 11 1973 USA buick electra 225 custom
13 8 360 175 3821 11 1973 USA amc ambassador brougham
18 6 225 105 3121 16.5 1973 USA plymouth valiant
16 6 250 100 3278 18 1973 USA chevrolet nova custom
18 6 232 100 2945 16 1973 USA amc hornet
18 6 250 88 3021 16.5 1973 USA ford maverick
23 6 198 95 2904 16 1973 USA plymouth duster
26 4 97 46 1950 21 1973 Germany volkswagen super beetle
11 8 400 150 4997 14 1973 USA chevrolet impala
12 8 400 167 4906 12.5 1973 USA ford country
13 8 360 170 4654 13 1973 USA plymouth custom suburb
12 8 350 180 4499 12.5 1973 USA oldsmobile vista cruiser
18 6 232 100 2789 15 1973 USA amc gremlin
20 4 97 88 2279 19 1973 Japan toyota carina
21 4 140 72 2401 19.5 1973 USA chevrolet vega
22 4 108 94 2379 16.5 1973 Japan datsun 610
18 3 70 90 2124 13.5 1973 Japan maxda rx3
19 4 122 85 2310 18.5 1973 USA ford pinto
21 6 155 107 2472 14 1973 USA mercury capri v6
26 4 98 90 2265 15.5 1973 Germany fiat 124 sport coupe
15 8 350 145 4082 13 1973 USA chevrolet monte carlo s
16 8 400 230 4278 9.5 1973 USA pontiac grand prix
29 4 68 49 1867 19.5 1973 Germany fiat 128
24 4 116 75 2158 15.5 1973 Germany opel manta
20 4 114 91 2582 14 1973 Germany audi 100ls
19 4 121 112 2868 15.5 1973 Germany volvo 144ea
15 8 318 150 3399 11 1973 USA dodge dart custom
24 4 121 110 2660 14 1973 Germany saab 99le
20 6 156 122 2807 13.5 1973 Japan toyota mark ii
11 8 350 180 3664 11 1973 USA oldsmobile omega
20 6 198 95 3102 16.5 1974 USA plymouth duster
19 6 232 100 2901 16 1974 USA amc hornet
15 6 250 100 3336 17 1974 USA chevrolet nova
31 4 79 67 1950 19 1974 Japan datsun b210
26 4 122 80 2451 16.5 1974 USA ford pinto
32 4 71 65 1836 21 1974 Japan toyota corolla 1200
25 4 140 75 2542 17 1974 USA chevrolet vega
16 6 250 100 3781 17 1974 USA chevrolet chevelle malibu classic
16 6 258 110 3632 18 1974 USA amc matador
18 6 225 105 3613 16.5 1974 USA plymouth satellite sebring
16 8 302 140 4141 14 1974 USA ford gran torino
13 8 350 150 4699 14.5 1974 USA buick century luxus (sw)
14 8 318 150 4457 13.5 1974 USA dodge coronet custom (sw)
14 8 302 140 4638 16 1974 USA ford gran torino (sw)
14 8 304 150 4257 15.5 1974 USA amc matador (sw)
29 4 98 83 2219 16.5 1974 Germany audi fox
26 4 79 67 1963 15.5 1974 Germany volkswagen dasher
26 4 97 78 2300 14.5 1974 Germany opel manta
31 4 76 52 1649 16.5 1974 Japan toyota corona
32 4 83 61 2003 19 1974 Japan datsun 710
28 4 90 75 2125 14.5 1974 USA dodge colt
24 4 90 75 2108 15.5 1974 Germany fiat 128
26 4 116 75 2246 14 1974 Germany fiat 124 tc
24 4 120 97 2489 15 1974 Japan honda civic
26 4 108 93 2391 15.5 1974 Japan subaru
31 4 79 67 2000 16 1974 Germany fiat x1.9
19 6 225 95 3264 16 1975 USA plymouth valiant custom
18 6 250 105 3459 16 1975 USA chevrolet nova
15 6 250 72 3432 21 1975 USA mercury monarch
15 6 250 72 3158 19.5 1975 USA ford maverick
16 8 400 170 4668 11.5 1975 USA pontiac catalina
15 8 350 145 4440 14 1975 USA chevrolet bel air
16 8 318 150 4498 14.5 1975 USA plymouth grand fury
14 8 351 148 4657 13.5 1975 USA ford ltd
17 6 231 110 3907 21 1975 USA buick century
16 6 250 105 3897 18.5 1975 USA chevroelt chevelle malibu
15 6 258 110 3730 19 1975 USA amc matador
18 6 225 95 3785 19 1975 USA plymouth fury
21 6 231 110 3039 15 1975 USA buick skyhawk
20 8 262 110 3221 13.5 1975 USA chevrolet monza 2+2
13 8 302 129 3169 12 1975 USA ford mustang ii
29 4 97 75 2171 16 1975 Japan toyota corolla
23 4 140 83 2639 17 1975 USA ford pinto
20 6 232 100 2914 16 1975 USA amc gremlin
23 4 140 78 2592 18.5 1975 USA pontiac astro
24 4 134 96 2702 13.5 1975 Japan toyota corona
25 4 90 71 2223 16.5 1975 Germany volkswagen dasher
24 4 119 97 2545 17 1975 Japan datsun 710
18 6 171 97 2984 14.5 1975 USA ford pinto
29 4 90 70 1937 14 1975 Germany volkswagen rabbit
19 6 232 90 3211 17 1975 USA amc pacer
23 4 115 95 2694 15 1975 Germany audi 100ls
23 4 120 88 2957 17 1975 Germany peugeot 504
22 4 121 98 2945 14.5 1975 Germany volvo 244dl
25 4 121 115 2671 13.5 1975 Germany saab 99le
33 4 91 53 1795 17.5 1975 Japan honda civic cvcc
28 4 107 86 2464 15.5 1976 Germany fiat 131
25 4 116 81 2220 16.9 1976 Germany opel 1900
25 4 140 92 2572 14.9 1976 USA capri ii
26 4 98 79 2255 17.7 1976 USA dodge colt
27 4 101 83 2202 15.3 1976 Germany renault 12tl
17.5 8 305 140 4215 13 1976 USA chevrolet chevelle malibu classic
16 8 318 150 4190 13 1976 USA dodge coronet brougham
15.5 8 304 120 3962 13.9 1976 USA amc matador
14.5 8 351 152 4215 12.8 1976 USA ford gran torino
22 6 225 100 3233 15.4 1976 USA plymouth valiant
22 6 250 105 3353 14.5 1976 USA chevrolet nova
24 6 200 81 3012 17.6 1976 USA ford maverick
22.5 6 232 90 3085 17.6 1976 USA amc hornet
29 4 85 52 2035 22.2 1976 USA chevrolet chevette
24.5 4 98 60 2164 22.1 1976 USA chevrolet woody
29 4 90 70 1937 14.2 1976 Germany vw rabbit
33 4 91 53 1795 17.4 1976 Japan honda civic
20 6 225 100 3651 17.7 1976 USA dodge aspen se
18 6 250 78 3574 21 1976 USA ford granada ghia
18.5 6 250 110 3645 16.2 1976 USA pontiac ventura sj
17.5 6 258 95 3193 17.8 1976 USA amc pacer d/l
29.5 4 97 71 1825 12.2 1976 Germany volkswagen rabbit
32 4 85 70 1990 17 1976 Japan datsun b-210
28 4 97 75 2155 16.4 1976 Japan toyota corolla
26.5 4 140 72 2565 13.6 1976 USA ford pinto
20 4 130 102 3150 15.7 1976 Germany volvo 245
13 8 318 150 3940 13.2 1976 USA plymouth volare premier v8
19 4 120 88 3270 21.9 1976 Germany peugeot 504
19 6 156 108 2930 15.5 1976 Japan toyota mark ii
16.5 6 168 120 3820 16.7 1976 Germany mercedes-benz 280s
16.5 8 350 180 4380 12.1 1976 USA cadillac seville
13 8 350 145 4055 12 1976 USA chevy c10
13 8 302 130 3870 15 1976 USA ford f108
13 8 318 150 3755 14 1976 USA dodge d100
31.5 4 98 68 2045 18.5 1977 Japan honda accord cvcc
30 4 111 80 2155 14.8 1977 USA buick opel isuzu deluxe
36 4 79 58 1825 18.6 1977 Germany renault 5 gtl
25.5 4 122 96 2300 15.5 1977 USA plymouth arrow gs
33.5 4 85 70 1945 16.8 1977 Japan datsun f-10 hatchback
17.5 8 305 145 3880 12.5 1977 USA chevrolet caprice classic
17 8 260 110 4060 19 1977 USA oldsmobile cutlass supreme
15.5 8 318 145 4140 13.7 1977 USA dodge monaco brougham
15 8 302 130 4295 14.9 1977 USA mercury cougar brougham
17.5 6 250 110 3520 16.4 1977 USA chevrolet concours
20.5 6 231 105 3425 16.9 1977 USA buick skylark
19 6 225 100 3630 17.7 1977 USA plymouth volare custom
18.5 6 250 98 3525 19 1977 USA ford granada
16 8 400 180 4220 11.1 1977 USA pontiac grand prix lj
15.5 8 350 170 4165 11.4 1977 USA chevrolet monte carlo landau
15.5 8 400 190 4325 12.2 1977 USA chrysler cordoba
16 8 351 149 4335 14.5 1977 USA ford thunderbird
29 4 97 78 1940 14.5 1977 Germany volkswagen rabbit custom
24.5 4 151 88 2740 16 1977 USA pontiac sunbird coupe
26 4 97 75 2265 18.2 1977 Japan toyota corolla liftback
25.5 4 140 89 2755 15.8 1977 USA ford mustang ii 2+2
30.5 4 98 63 2051 17 1977 USA chevrolet chevette
33.5 4 98 83 2075 15.9 1977 USA dodge colt m/m
30 4 97 67 1985 16.4 1977 Japan subaru dl
30.5 4 97 78 2190 14.1 1977 Germany volkswagen dasher
22 6 146 97 2815 14.5 1977 Japan datsun 810
21.5 4 121 110 2600 12.8 1977 Germany bmw 320i
21.5 3 80 110 2720 13.5 1977 Japan mazda rx-4
43.1 4 90 48 1985 21.5 1978 Germany volkswagen rabbit custom diesel
36.1 4 98 66 1800 14.4 1978 USA ford fiesta
32.8 4 78 52 1985 19.4 1978 Japan mazda glc deluxe
39.4 4 85 70 2070 18.6 1978 Japan datsun b210 gx
36.1 4 91 60 1800 16.4 1978 Japan honda civic cvcc
19.9 8 260 110 3365 15.5 1978 USA oldsmobile cutlass salon brougham
19.4 8 318 140 3735 13.2 1978 USA dodge diplomat
20.2 8 302 139 3570 12.8 1978 USA mercury monarch ghia
19.2 6 231 105 3535 19.2 1978 USA pontiac phoenix lj
20.5 6 200 95 3155 18.2 1978 USA chevrolet malibu
20.2 6 200 85 2965 15.8 1978 USA ford fairmont (auto)
25.1 4 140 88 2720 15.4 1978 USA ford fairmont (man)
20.5 6 225 100 3430 17.2 1978 USA plymouth volare
19.4 6 232 90 3210 17.2 1978 USA amc concord
20.6 6 231 105 3380 15.8 1978 USA buick century special
20.8 6 200 85 3070 16.7 1978 USA mercury zephyr
18.6 6 225 110 3620 18.7 1978 USA dodge aspen
18.1 6 258 120 3410 15.1 1978 USA amc concord d/l
19.2 8 305 145 3425 13.2 1978 USA chevrolet monte carlo landau
17.7 6 231 165 3445 13.4 1978 USA buick regal sport coupe (turbo)
18.1 8 302 139 3205 11.2 1978 USA ford futura
17.5 8 318 140 4080 13.7 1978 USA dodge magnum xe
30 4 98 68 2155 16.5 1978 USA chevrolet chevette
27.5 4 134 95 2560 14.2 1978 Japan toyota corona
27.2 4 119 97 2300 14.7 1978 Japan datsun 510
30.9 4 105 75 2230 14.5 1978 USA dodge omni
21.1 4 134 95 2515 14.8 1978 Japan toyota celica gt liftback
23.2 4 156 105 2745 16.7 1978 USA plymouth sapporo
23.8 4 151 85 2855 17.6 1978 USA oldsmobile starfire sx
23.9 4 119 97 2405 14.9 1978 Japan datsun 200-sx
20.3 5 131 103 2830 15.9 1978 Germany audi 5000
17 6 163 125 3140 13.6 1978 Germany volvo 264gl
21.6 4 121 115 2795 15.7 1978 Germany saab 99gle
16.2 6 163 133 3410 15.8 1978 Germany peugeot 604sl
31.5 4 89 71 1990 14.9 1978 Germany volkswagen scirocco
29.5 4 98 68 2135 16.6 1978 Japan honda accord lx
21.5 6 231 115 3245 15.4 1979 USA pontiac lemans v6
19.8 6 200 85 2990 18.2 1979 USA mercury zephyr 6
22.3 4 140 88 2890 17.3 1979 USA ford fairmont 4
20.2 6 232 90 3265 18.2 1979 USA amc concord dl 6
20.6 6 225 110 3360 16.6 1979 USA dodge aspen 6
17 8 305 130 3840 15.4 1979 USA chevrolet caprice classic
17.6 8 302 129 3725 13.4 1979 USA ford ltd landau
16.5 8 351 138 3955 13.2 1979 USA mercury grand marquis
18.2 8 318 135 3830 15.2 1979 USA dodge st. regis
16.9 8 350 155 4360 14.9 1979 USA buick estate wagon (sw)
15.5 8 351 142 4054 14.3 1979 USA ford country squire (sw)
19.2 8 267 125 3605 15 1979 USA chevrolet malibu classic (sw)
18.5 8 360 150 3940 13 1979 USA chrysler lebaron town @ country (sw)
31.9 4 89 71 1925 14 1979 Germany vw rabbit custom
34.1 4 86 65 1975 15.2 1979 Japan maxda glc deluxe
35.7 4 98 80 1915 14.4 1979 USA dodge colt hatchback custom
27.4 4 121 80 2670 15 1979 USA amc spirit dl
25.4 5 183 77 3530 20.1 1979 Germany mercedes benz 300d
23 8 350 125 3900 17.4 1979 USA cadillac eldorado
27.2 4 141 71 3190 24.8 1979 Germany peugeot 504
23.9 8 260 90 3420 22.2 1979 USA oldsmobile cutlass salon brougham
34.2 4 105 70 2200 13.2 1979 USA plymouth horizon
34.5 4 105 70 2150 14.9 1979 USA plymouth horizon tc3
31.8 4 85 65 2020 19.2 1979 Japan datsun 210
37.3 4 91 69 2130 14.7 1979 Germany fiat strada custom
28.4 4 151 90 2670 16 1979 USA buick skylark limited
28.8 6 173 115 2595 11.3 1979 USA chevrolet citation
26.8 6 173 115 2700 12.9 1979 USA oldsmobile omega brougham
33.5 4 151 90 2556 13.2 1979 USA pontiac phoenix
41.5 4 98 76 2144 14.7 1980 Germany vw rabbit
38.1 4 89 60 1968 18.8 1980 Japan toyota corolla tercel
32.1 4 98 70 2120 15.5 1980 USA chevrolet chevette
37.2 4 86 65 2019 16.4 1980 Japan datsun 310
28 4 151 90 2678 16.5 1980 USA chevrolet citation
26.4 4 140 88 2870 18.1 1980 USA ford fairmont
24.3 4 151 90 3003 20.1 1980 USA amc concord
19.1 6 225 90 3381 18.7 1980 USA dodge aspen
34.3 4 97 78 2188 15.8 1980 Germany audi 4000
29.8 4 134 90 2711 15.5 1980 Japan toyota corona liftback
31.3 4 120 75 2542 17.5 1980 Japan mazda 626
37 4 119 92 2434 15 1980 Japan datsun 510 hatchback
32.2 4 108 75 2265 15.2 1980 Japan toyota corolla
46.6 4 86 65 2110 17.9 1980 Japan mazda glc
27.9 4 156 105 2800 14.4 1980 USA dodge colt
40.8 4 85 65 2110 19.2 1980 Japan datsun 210
44.3 4 90 48 2085 21.7 1980 Germany vw rabbit c (diesel)
43.4 4 90 48 2335 23.7 1980 Germany vw dasher (diesel)
36.4 5 121 67 2950 19.9 1980 Germany audi 5000s (diesel)
30 4 146 67 3250 21.8 1980 Germany mercedes-benz 240d
44.6 4 91 67 1850 13.8 1980 Japan honda civic 1500 gl
33.8 4 97 67 2145 18 1980 Japan subaru dl
29.8 4 89 62 1845 15.3 1980 Germany vokswagen rabbit
32.7 6 168 132 2910 11.4 1980 Japan datsun 280-zx
23.7 3 70 100 2420 12.5 1980 Japan mazda rx-7 gs
35 4 122 88 2500 15.1 1980 Germany triumph tr7 coupe
32.4 4 107 72 2290 17 1980 Japan honda accord
27.2 4 135 84 2490 15.7 1981 USA plymouth reliant
26.6 4 151 84 2635 16.4 1981 USA buick skylark
25.8 4 156 92 2620 14.4 1981 USA dodge aries wagon (sw)
23.5 6 173 110 2725 12.6 1981 USA chevrolet citation
30 4 135 84 2385 12.9 1981 USA plymouth reliant
39.1 4 79 58 1755 16.9 1981 Japan toyota starlet
39 4 86 64 1875 16.4 1981 USA plymouth champ
35.1 4 81 60 1760 16.1 1981 Japan honda civic 1300
32.3 4 97 67 2065 17.8 1981 Japan subaru
37 4 85 65 1975 19.4 1981 Japan datsun 210 mpg
37.7 4 89 62 2050 17.3 1981 Japan toyota tercel
34.1 4 91 68 1985 16 1981 Japan mazda glc 4
34.7 4 105 63 2215 14.9 1981 USA plymouth horizon 4
34.4 4 98 65 2045 16.2 1981 USA ford escort 4w
29.9 4 98 65 2380 20.7 1981 USA ford escort 2h
33 4 105 74 2190 14.2 1981 Germany volkswagen jetta
33.7 4 107 75 2210 14.4 1981 Japan honda prelude
32.4 4 108 75 2350 16.8 1981 Japan toyota corolla
32.9 4 119 100 2615 14.8 1981 Japan datsun 200sx
31.6 4 120 74 2635 18.3 1981 Japan mazda 626
28.1 4 141 80 3230 20.4 1981 Germany peugeot 505s turbo diesel
30.7 6 145 76 3160 19.6 1981 Germany volvo diesel
25.4 6 168 116 2900 12.6 1981 Japan toyota cressida
24.2 6 146 120 2930 13.8 1981 Japan datsun 810 maxima
22.4 6 231 110 3415 15.8 1981 USA buick century
26.6 8 350 105 3725 19 1981 USA oldsmobile cutlass ls
20.2 6 200 88 3060 17.1 1981 USA ford granada gl
17.6 6 225 85 3465 16.6 1981 USA chrysler lebaron salon
28 4 112 88 2605 19.6 1982 USA chevrolet cavalier
27 4 112 88 2640 18.6 1982 USA chevrolet cavalier wagon
34 4 112 88 2395 18 1982 USA chevrolet cavalier 2-door
31 4 112 85 2575 16.2 1982 USA pontiac j2000 se hatchback
29 4 135 84 2525 16 1982 USA dodge aries se
27 4 151 90 2735 18 1982 USA pontiac phoenix
24 4 140 92 2865 16.4 1982 USA ford fairmont futura
36 4 105 74 1980 15.3 1982 Germany volkswagen rabbit l
37 4 91 68 2025 18.2 1982 Japan mazda glc custom l
31 4 91 68 1970 17.6 1982 Japan mazda glc custom
38 4 105 63 2125 14.7 1982 USA plymouth horizon miser
36 4 98 70 2125 17.3 1982 USA mercury lynx l
36 4 120 88 2160 14.5 1982 Japan nissan stanza xe
36 4 107 75 2205 14.5 1982 Japan honda accord
34 4 108 70 2245 16.9 1982 Japan toyota corolla
38 4 91 67 1965 15 1982 Japan honda civic
32 4 91 67 1965 15.7 1982 Japan honda civic (auto)
38 4 91 67 1995 16.2 1982 Japan datsun 310 gx
25 6 181 110 2945 16.4 1982 USA buick century limited
38 6 262 85 3015 17 1982 USA oldsmobile cutlass ciera (diesel)
26 4 156 92 2585 14.5 1982 USA chrysler lebaron medallion
22 6 232 112 2835 14.7 1982 USA ford granada l
32 4 144 96 2665 13.9 1982 Japan toyota celica gt
36 4 135 84 2370 13 1982 USA dodge charger 2.2
27 4 151 90 2950 17.3 1982 USA chevrolet camaro
27 4 140 86 2790 15.6 1982 USA ford mustang gl
44 4 97 52 2130 24.6 1982 Germany vw pickup
32 4 135 84 2295 11.6 1982 USA dodge rampage
28 4 120 79 2625 18.6 1982 USA ford ranger
31 4 119 82 2720 19.4 1982 USA chevy s-10
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
index.html
<!DOCTYPE html>
<head>
<meta charset='utf-8'>
<script src='https://unpkg.com/d3-component@3'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js'></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='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 = [
'acceleration',
'cylinders',
'displacement',
'horsepower',
'weight',
'year',
'mpg'
]
const ordinalColumns = ['cylinders', 'origin', 'year']
setTimeout(() => {
// Show off the spinner for a few seconds ;)
d3.csv('auto-mpg.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
preview.xcf
View raw

(Sorry about that, but we can’t show files that are this big right now.)

Raw
reducer.js
View raw

(Sorry about that, but we can’t show files that are this big right now.)

Raw
scatterplot.js
View raw

(Sorry about that, but we can’t show files that are this big right now.)

Raw
spinner.js
View raw

(Sorry about that, but we can’t show files that are this big right now.)

Raw
tooltip.js
View raw

(Sorry about that, but we can’t show files that are this big right now.)

Raw
vis.js
View raw

(Sorry about that, but we can’t show files that are this big right now.)

Raw
wheel.js
View raw

(Sorry about that, but we can’t show files that are this big right now.)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment