Skip to content

Instantly share code, notes, and snippets.

@HawkinsJM

HawkinsJM/.block

Created December 17, 2017 23:43
Show Gist options
  • Save HawkinsJM/4ee370f1d5debd2f68818e1a00bda273 to your computer and use it in GitHub Desktop.
Save HawkinsJM/4ee370f1d5debd2f68818e1a00bda273 to your computer and use it in GitHub Desktop.
Download ZIP
Scatter Plot with Menus
Raw
.block
license: mit
border: no
Raw
README.md
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
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>
<link rel="stylesheet" href="https://unpkg.com/bootstrap@4.0.0-alpha.6/dist/css/bootstrap.min.css">
<style>
.point {
fill: currentColor;
stroke: currentColor;
fill-opacity: 0.3;
}
/* 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>
// This stateless component renders a static "wheel" made of circles,
// and rotates it depending on the value of props.angle.
var wheel = d3.component("g")
.create(function (selection){
var minRadius = 4,
maxRadius = 10,
numDots = 10,
wheelRadius = 40,
rotation = 0,
rotationIncrement = 3,
radius = d3.scaleLinear()
.domain([0, numDots - 1])
.range([maxRadius, minRadius]),
angle = d3.scaleLinear()
.domain([0, numDots])
.range([0, Math.PI * 2]);
selection
.selectAll("circle").data(d3.range(numDots))
.enter().append("circle")
.attr("cx", function (d){ return Math.sin(angle(d)) * wheelRadius; })
.attr("cy", function (d){ return Math.cos(angle(d)) * wheelRadius; })
.attr("r", radius);
})
.render(function (selection, d){
selection.attr("transform", "rotate(" + d + ")");
});
// This component with a local timer makes the wheel spin.
var spinner = (function (){
var timer = d3.local();
return d3.component("g")
.create(function (selection, d){
timer.set(selection.node(), d3.timer(function (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);
});
}());
var axis = (function (){
var 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()));
});
}());
// This component displays the visualization.
var scatterPlot = (function (){
var xScale = d3.scaleLinear(),
yScale = d3.scaleLinear(),
colorScale = d3.scaleOrdinal()
.range(d3.schemeCategory10);
function render(selection, d){
var x = d.x,
y = d.y,
color = d.color,
margin = d.margin,
innerWidth = d.width - margin.left - margin.right,
innerHeight = d.height - margin.top - margin.bottom;
xScale
.domain(d3.extent(d.data, function (d){ return d[x]; }))
.range([0, innerWidth]);
yScale
.domain(d3.extent(d.data, function (d){ return d[y]; }))
.range([innerHeight, 0]);
colorScale
.domain(d3.extent(d.data, function (d){ return d[color]; }));
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
}
])
var 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(function (d, i){ return i * 5; })
.attr("r", 10)
.attr("cx", function (d){ return xScale(d[x]); })
.attr("cy", function (d){ return yScale(d[y]); })
.attr("color", function (d){ return colorScale(d[color]); })
}
return d3.component("g")
.render(render);
}());
// Leverage the d3-tip library for tooltips.
var tooltip = (function (){
var tip = d3.tip()
.attr("class", "d3-tip")
.offset([-10, 0]);
return function (svgSelection, state){
// Wish we could use D3 here for DOM manipulation..
tip.html(function(d) {
return [
"<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
};
}
}());
// This component manages an svg element, and
// either displays a spinner or text,
// depending on the value of the `loading` state.
var svg = d3.component("svg")
.render(function (selection, d){
var 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
});
var tipCallbacks = tooltip(svgSelection, d);
svgSelection
.call(scatterPlot, d.loading ? [] : d, tipCallbacks);
});
var label = d3.component("label", "col-sm-2 col-form-label")
.render(function (selection, d){
selection.text(d);
});
var option = d3.component("option")
.render(function (selection, d){
selection.text(d);
});
var 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);
})
});
var rowComponent = d3.component("div", "row");
var colSm10 = d3.component("div", "col-sm-10");
var menu = d3.component("div", "col-sm-4")
.render(function (selection, d){
var row = rowComponent(selection).call(label, d.label);
colSm10(row).call(select, d);
});
var 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
}
], d);
if(!d.loading && selection.style("opacity") === "0"){
selection.transition().duration(2000)
.style("opacity", 1);
}
});
var app = d3.component("div")
.render(function (selection, d){
selection.call(menus, d).call(svg, d);
});
function loadData(actions){
var numericColumns = [
"acceleration",
"cylinders",
"displacement",
"horsepower",
"weight",
"year",
"mpg"
],
ordinalColumns = [
"cylinders",
"origin",
"year"
];
setTimeout(function (){ // Show off the spinner for a few seconds ;)
d3.csv("auto-mpg.csv", type, function (data){
actions.ingestData(data, numericColumns, ordinalColumns)
});
}, 2000);
function type(d){
return numericColumns.reduce(function (d, column){
d[column] = + d[column];
return d;
}, d);
}
}
function reducer (state, action){
var state = state || {
width: 960,
height: 500 - 38,
loading: true,
margin: {top: 12, right: 12, bottom: 40, left: 50},
x: "acceleration",
y: "horsepower",
color: "cylinders"
};
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 });
default:
return state;
}
}
function actionsFromDispatch(dispatch){
return {
ingestData: function (data, numericColumns, ordinalColumns){
dispatch({
type: "INGEST_DATA",
data: data,
numericColumns: numericColumns,
ordinalColumns: ordinalColumns
});
},
setX: function (column){
dispatch({ type: "SET_X", column: column });
},
setY: function (column){
dispatch({ type: "SET_Y", column: column });
},
setColor: function (column){
dispatch({ type: "SET_COLOR", column: column });
}
};
}
function main(){
var store = Redux.createStore(reducer),
actions = actionsFromDispatch(store.dispatch);
renderApp = function(){
d3.select("body").call(app, store.getState(), actions);
}
renderApp();
store.subscribe(renderApp);
loadData(actions);
}
main();
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment