library(tidyverse)
Observable Inputs.table from R data.frame / tibble
Demo
fdfd
R: ggplot toy
ggplot(mpg, aes(x = hwy, y = cty, color = cyl)) +
geom_point(alpha = 0.5, size = 2) +
scale_color_viridis_c() +
theme_minimal()
Transpose R data object
R df / tibble needs to be transposed for Observable’s Inputs.table
Inputs.table needs an Array of Objects to iterate over
Consider turning this into a function
Consider how to account for potential row names
<- mtcars %>%
data_raw rownames_to_column("car") %>%
# tibble() %>%
transpose()
typeof(mtcars)
[1] "list"
class(mtcars)
[1] "data.frame"
str(mtcars)
'data.frame': 32 obs. of 11 variables:
$ mpg : num 21 21 22.8 21.4 18.7 18.1 14.3 24.4 22.8 19.2 ...
$ cyl : num 6 6 4 6 8 6 8 4 4 6 ...
$ disp: num 160 160 108 258 360 ...
$ hp : num 110 110 93 110 175 105 245 62 95 123 ...
$ drat: num 3.9 3.9 3.85 3.08 3.15 2.76 3.21 3.69 3.92 3.92 ...
$ wt : num 2.62 2.88 2.32 3.21 3.44 ...
$ qsec: num 16.5 17 18.6 19.4 17 ...
$ vs : num 0 0 1 1 0 1 0 1 1 1 ...
$ am : num 1 1 1 0 0 0 0 0 0 0 ...
$ gear: num 4 4 4 3 3 3 3 4 4 4 ...
$ carb: num 4 4 1 1 2 1 4 2 2 4 ...
typeof(data_raw)
[1] "list"
class(data_raw)
[1] "list"
str(data_raw)
List of 32
$ :List of 12
..$ car : chr "Mazda RX4"
..$ mpg : num 21
..$ cyl : num 6
..$ disp: num 160
..$ hp : num 110
..$ drat: num 3.9
..$ wt : num 2.62
..$ qsec: num 16.5
..$ vs : num 0
..$ am : num 1
..$ gear: num 4
..$ carb: num 4
$ :List of 12
..$ car : chr "Mazda RX4 Wag"
..$ mpg : num 21
..$ cyl : num 6
..$ disp: num 160
..$ hp : num 110
..$ drat: num 3.9
..$ wt : num 2.88
..$ qsec: num 17
..$ vs : num 0
..$ am : num 1
..$ gear: num 4
..$ carb: num 4
$ :List of 12
..$ car : chr "Datsun 710"
..$ mpg : num 22.8
..$ cyl : num 4
..$ disp: num 108
..$ hp : num 93
..$ drat: num 3.85
..$ wt : num 2.32
..$ qsec: num 18.6
..$ vs : num 1
..$ am : num 1
..$ gear: num 4
..$ carb: num 1
$ :List of 12
..$ car : chr "Hornet 4 Drive"
..$ mpg : num 21.4
..$ cyl : num 6
..$ disp: num 258
..$ hp : num 110
..$ drat: num 3.08
..$ wt : num 3.21
..$ qsec: num 19.4
..$ vs : num 1
..$ am : num 0
..$ gear: num 3
..$ carb: num 1
$ :List of 12
..$ car : chr "Hornet Sportabout"
..$ mpg : num 18.7
..$ cyl : num 8
..$ disp: num 360
..$ hp : num 175
..$ drat: num 3.15
..$ wt : num 3.44
..$ qsec: num 17
..$ vs : num 0
..$ am : num 0
..$ gear: num 3
..$ carb: num 2
$ :List of 12
..$ car : chr "Valiant"
..$ mpg : num 18.1
..$ cyl : num 6
..$ disp: num 225
..$ hp : num 105
..$ drat: num 2.76
..$ wt : num 3.46
..$ qsec: num 20.2
..$ vs : num 1
..$ am : num 0
..$ gear: num 3
..$ carb: num 1
$ :List of 12
..$ car : chr "Duster 360"
..$ mpg : num 14.3
..$ cyl : num 8
..$ disp: num 360
..$ hp : num 245
..$ drat: num 3.21
..$ wt : num 3.57
..$ qsec: num 15.8
..$ vs : num 0
..$ am : num 0
..$ gear: num 3
..$ carb: num 4
$ :List of 12
..$ car : chr "Merc 240D"
..$ mpg : num 24.4
..$ cyl : num 4
..$ disp: num 147
..$ hp : num 62
..$ drat: num 3.69
..$ wt : num 3.19
..$ qsec: num 20
..$ vs : num 1
..$ am : num 0
..$ gear: num 4
..$ carb: num 2
$ :List of 12
..$ car : chr "Merc 230"
..$ mpg : num 22.8
..$ cyl : num 4
..$ disp: num 141
..$ hp : num 95
..$ drat: num 3.92
..$ wt : num 3.15
..$ qsec: num 22.9
..$ vs : num 1
..$ am : num 0
..$ gear: num 4
..$ carb: num 2
$ :List of 12
..$ car : chr "Merc 280"
..$ mpg : num 19.2
..$ cyl : num 6
..$ disp: num 168
..$ hp : num 123
..$ drat: num 3.92
..$ wt : num 3.44
..$ qsec: num 18.3
..$ vs : num 1
..$ am : num 0
..$ gear: num 4
..$ carb: num 4
$ :List of 12
..$ car : chr "Merc 280C"
..$ mpg : num 17.8
..$ cyl : num 6
..$ disp: num 168
..$ hp : num 123
..$ drat: num 3.92
..$ wt : num 3.44
..$ qsec: num 18.9
..$ vs : num 1
..$ am : num 0
..$ gear: num 4
..$ carb: num 4
$ :List of 12
..$ car : chr "Merc 450SE"
..$ mpg : num 16.4
..$ cyl : num 8
..$ disp: num 276
..$ hp : num 180
..$ drat: num 3.07
..$ wt : num 4.07
..$ qsec: num 17.4
..$ vs : num 0
..$ am : num 0
..$ gear: num 3
..$ carb: num 3
$ :List of 12
..$ car : chr "Merc 450SL"
..$ mpg : num 17.3
..$ cyl : num 8
..$ disp: num 276
..$ hp : num 180
..$ drat: num 3.07
..$ wt : num 3.73
..$ qsec: num 17.6
..$ vs : num 0
..$ am : num 0
..$ gear: num 3
..$ carb: num 3
$ :List of 12
..$ car : chr "Merc 450SLC"
..$ mpg : num 15.2
..$ cyl : num 8
..$ disp: num 276
..$ hp : num 180
..$ drat: num 3.07
..$ wt : num 3.78
..$ qsec: num 18
..$ vs : num 0
..$ am : num 0
..$ gear: num 3
..$ carb: num 3
$ :List of 12
..$ car : chr "Cadillac Fleetwood"
..$ mpg : num 10.4
..$ cyl : num 8
..$ disp: num 472
..$ hp : num 205
..$ drat: num 2.93
..$ wt : num 5.25
..$ qsec: num 18
..$ vs : num 0
..$ am : num 0
..$ gear: num 3
..$ carb: num 4
$ :List of 12
..$ car : chr "Lincoln Continental"
..$ mpg : num 10.4
..$ cyl : num 8
..$ disp: num 460
..$ hp : num 215
..$ drat: num 3
..$ wt : num 5.42
..$ qsec: num 17.8
..$ vs : num 0
..$ am : num 0
..$ gear: num 3
..$ carb: num 4
$ :List of 12
..$ car : chr "Chrysler Imperial"
..$ mpg : num 14.7
..$ cyl : num 8
..$ disp: num 440
..$ hp : num 230
..$ drat: num 3.23
..$ wt : num 5.34
..$ qsec: num 17.4
..$ vs : num 0
..$ am : num 0
..$ gear: num 3
..$ carb: num 4
$ :List of 12
..$ car : chr "Fiat 128"
..$ mpg : num 32.4
..$ cyl : num 4
..$ disp: num 78.7
..$ hp : num 66
..$ drat: num 4.08
..$ wt : num 2.2
..$ qsec: num 19.5
..$ vs : num 1
..$ am : num 1
..$ gear: num 4
..$ carb: num 1
$ :List of 12
..$ car : chr "Honda Civic"
..$ mpg : num 30.4
..$ cyl : num 4
..$ disp: num 75.7
..$ hp : num 52
..$ drat: num 4.93
..$ wt : num 1.61
..$ qsec: num 18.5
..$ vs : num 1
..$ am : num 1
..$ gear: num 4
..$ carb: num 2
$ :List of 12
..$ car : chr "Toyota Corolla"
..$ mpg : num 33.9
..$ cyl : num 4
..$ disp: num 71.1
..$ hp : num 65
..$ drat: num 4.22
..$ wt : num 1.83
..$ qsec: num 19.9
..$ vs : num 1
..$ am : num 1
..$ gear: num 4
..$ carb: num 1
$ :List of 12
..$ car : chr "Toyota Corona"
..$ mpg : num 21.5
..$ cyl : num 4
..$ disp: num 120
..$ hp : num 97
..$ drat: num 3.7
..$ wt : num 2.46
..$ qsec: num 20
..$ vs : num 1
..$ am : num 0
..$ gear: num 3
..$ carb: num 1
$ :List of 12
..$ car : chr "Dodge Challenger"
..$ mpg : num 15.5
..$ cyl : num 8
..$ disp: num 318
..$ hp : num 150
..$ drat: num 2.76
..$ wt : num 3.52
..$ qsec: num 16.9
..$ vs : num 0
..$ am : num 0
..$ gear: num 3
..$ carb: num 2
$ :List of 12
..$ car : chr "AMC Javelin"
..$ mpg : num 15.2
..$ cyl : num 8
..$ disp: num 304
..$ hp : num 150
..$ drat: num 3.15
..$ wt : num 3.44
..$ qsec: num 17.3
..$ vs : num 0
..$ am : num 0
..$ gear: num 3
..$ carb: num 2
$ :List of 12
..$ car : chr "Camaro Z28"
..$ mpg : num 13.3
..$ cyl : num 8
..$ disp: num 350
..$ hp : num 245
..$ drat: num 3.73
..$ wt : num 3.84
..$ qsec: num 15.4
..$ vs : num 0
..$ am : num 0
..$ gear: num 3
..$ carb: num 4
$ :List of 12
..$ car : chr "Pontiac Firebird"
..$ mpg : num 19.2
..$ cyl : num 8
..$ disp: num 400
..$ hp : num 175
..$ drat: num 3.08
..$ wt : num 3.85
..$ qsec: num 17.1
..$ vs : num 0
..$ am : num 0
..$ gear: num 3
..$ carb: num 2
$ :List of 12
..$ car : chr "Fiat X1-9"
..$ mpg : num 27.3
..$ cyl : num 4
..$ disp: num 79
..$ hp : num 66
..$ drat: num 4.08
..$ wt : num 1.94
..$ qsec: num 18.9
..$ vs : num 1
..$ am : num 1
..$ gear: num 4
..$ carb: num 1
$ :List of 12
..$ car : chr "Porsche 914-2"
..$ mpg : num 26
..$ cyl : num 4
..$ disp: num 120
..$ hp : num 91
..$ drat: num 4.43
..$ wt : num 2.14
..$ qsec: num 16.7
..$ vs : num 0
..$ am : num 1
..$ gear: num 5
..$ carb: num 2
$ :List of 12
..$ car : chr "Lotus Europa"
..$ mpg : num 30.4
..$ cyl : num 4
..$ disp: num 95.1
..$ hp : num 113
..$ drat: num 3.77
..$ wt : num 1.51
..$ qsec: num 16.9
..$ vs : num 1
..$ am : num 1
..$ gear: num 5
..$ carb: num 2
$ :List of 12
..$ car : chr "Ford Pantera L"
..$ mpg : num 15.8
..$ cyl : num 8
..$ disp: num 351
..$ hp : num 264
..$ drat: num 4.22
..$ wt : num 3.17
..$ qsec: num 14.5
..$ vs : num 0
..$ am : num 1
..$ gear: num 5
..$ carb: num 4
$ :List of 12
..$ car : chr "Ferrari Dino"
..$ mpg : num 19.7
..$ cyl : num 6
..$ disp: num 145
..$ hp : num 175
..$ drat: num 3.62
..$ wt : num 2.77
..$ qsec: num 15.5
..$ vs : num 0
..$ am : num 1
..$ gear: num 5
..$ carb: num 6
$ :List of 12
..$ car : chr "Maserati Bora"
..$ mpg : num 15
..$ cyl : num 8
..$ disp: num 301
..$ hp : num 335
..$ drat: num 3.54
..$ wt : num 3.57
..$ qsec: num 14.6
..$ vs : num 0
..$ am : num 1
..$ gear: num 5
..$ carb: num 8
$ :List of 12
..$ car : chr "Volvo 142E"
..$ mpg : num 21.4
..$ cyl : num 4
..$ disp: num 121
..$ hp : num 109
..$ drat: num 4.11
..$ wt : num 2.78
..$ qsec: num 18.6
..$ vs : num 1
..$ am : num 1
..$ gear: num 4
..$ carb: num 2
typeof(tibble(mtcars))
[1] "list"
class(tibble(mtcars))
[1] "tbl_df" "tbl" "data.frame"
str(data_raw_2)
List of 32
$ :List of 12
..$ car : chr "Mazda RX4"
..$ mpg : num 21
..$ cyl : num 6
..$ disp: num 160
..$ hp : num 110
..$ drat: num 3.9
..$ wt : num 2.62
..$ qsec: num 16.5
..$ vs : num 0
..$ am : num 1
..$ gear: num 4
..$ carb: num 4
$ :List of 12
..$ car : chr "Mazda RX4 Wag"
..$ mpg : num 21
..$ cyl : num 6
..$ disp: num 160
..$ hp : num 110
..$ drat: num 3.9
..$ wt : num 2.88
..$ qsec: num 17
..$ vs : num 0
..$ am : num 1
..$ gear: num 4
..$ carb: num 4
$ :List of 12
..$ car : chr "Datsun 710"
..$ mpg : num 22.8
..$ cyl : num 4
..$ disp: num 108
..$ hp : num 93
..$ drat: num 3.85
..$ wt : num 2.32
..$ qsec: num 18.6
..$ vs : num 1
..$ am : num 1
..$ gear: num 4
..$ carb: num 1
$ :List of 12
..$ car : chr "Hornet 4 Drive"
..$ mpg : num 21.4
..$ cyl : num 6
..$ disp: num 258
..$ hp : num 110
..$ drat: num 3.08
..$ wt : num 3.21
..$ qsec: num 19.4
..$ vs : num 1
..$ am : num 0
..$ gear: num 3
..$ carb: num 1
$ :List of 12
..$ car : chr "Hornet Sportabout"
..$ mpg : num 18.7
..$ cyl : num 8
..$ disp: num 360
..$ hp : num 175
..$ drat: num 3.15
..$ wt : num 3.44
..$ qsec: num 17
..$ vs : num 0
..$ am : num 0
..$ gear: num 3
..$ carb: num 2
$ :List of 12
..$ car : chr "Valiant"
..$ mpg : num 18.1
..$ cyl : num 6
..$ disp: num 225
..$ hp : num 105
..$ drat: num 2.76
..$ wt : num 3.46
..$ qsec: num 20.2
..$ vs : num 1
..$ am : num 0
..$ gear: num 3
..$ carb: num 1
$ :List of 12
..$ car : chr "Duster 360"
..$ mpg : num 14.3
..$ cyl : num 8
..$ disp: num 360
..$ hp : num 245
..$ drat: num 3.21
..$ wt : num 3.57
..$ qsec: num 15.8
..$ vs : num 0
..$ am : num 0
..$ gear: num 3
..$ carb: num 4
$ :List of 12
..$ car : chr "Merc 240D"
..$ mpg : num 24.4
..$ cyl : num 4
..$ disp: num 147
..$ hp : num 62
..$ drat: num 3.69
..$ wt : num 3.19
..$ qsec: num 20
..$ vs : num 1
..$ am : num 0
..$ gear: num 4
..$ carb: num 2
$ :List of 12
..$ car : chr "Merc 230"
..$ mpg : num 22.8
..$ cyl : num 4
..$ disp: num 141
..$ hp : num 95
..$ drat: num 3.92
..$ wt : num 3.15
..$ qsec: num 22.9
..$ vs : num 1
..$ am : num 0
..$ gear: num 4
..$ carb: num 2
$ :List of 12
..$ car : chr "Merc 280"
..$ mpg : num 19.2
..$ cyl : num 6
..$ disp: num 168
..$ hp : num 123
..$ drat: num 3.92
..$ wt : num 3.44
..$ qsec: num 18.3
..$ vs : num 1
..$ am : num 0
..$ gear: num 4
..$ carb: num 4
$ :List of 12
..$ car : chr "Merc 280C"
..$ mpg : num 17.8
..$ cyl : num 6
..$ disp: num 168
..$ hp : num 123
..$ drat: num 3.92
..$ wt : num 3.44
..$ qsec: num 18.9
..$ vs : num 1
..$ am : num 0
..$ gear: num 4
..$ carb: num 4
$ :List of 12
..$ car : chr "Merc 450SE"
..$ mpg : num 16.4
..$ cyl : num 8
..$ disp: num 276
..$ hp : num 180
..$ drat: num 3.07
..$ wt : num 4.07
..$ qsec: num 17.4
..$ vs : num 0
..$ am : num 0
..$ gear: num 3
..$ carb: num 3
$ :List of 12
..$ car : chr "Merc 450SL"
..$ mpg : num 17.3
..$ cyl : num 8
..$ disp: num 276
..$ hp : num 180
..$ drat: num 3.07
..$ wt : num 3.73
..$ qsec: num 17.6
..$ vs : num 0
..$ am : num 0
..$ gear: num 3
..$ carb: num 3
$ :List of 12
..$ car : chr "Merc 450SLC"
..$ mpg : num 15.2
..$ cyl : num 8
..$ disp: num 276
..$ hp : num 180
..$ drat: num 3.07
..$ wt : num 3.78
..$ qsec: num 18
..$ vs : num 0
..$ am : num 0
..$ gear: num 3
..$ carb: num 3
$ :List of 12
..$ car : chr "Cadillac Fleetwood"
..$ mpg : num 10.4
..$ cyl : num 8
..$ disp: num 472
..$ hp : num 205
..$ drat: num 2.93
..$ wt : num 5.25
..$ qsec: num 18
..$ vs : num 0
..$ am : num 0
..$ gear: num 3
..$ carb: num 4
$ :List of 12
..$ car : chr "Lincoln Continental"
..$ mpg : num 10.4
..$ cyl : num 8
..$ disp: num 460
..$ hp : num 215
..$ drat: num 3
..$ wt : num 5.42
..$ qsec: num 17.8
..$ vs : num 0
..$ am : num 0
..$ gear: num 3
..$ carb: num 4
$ :List of 12
..$ car : chr "Chrysler Imperial"
..$ mpg : num 14.7
..$ cyl : num 8
..$ disp: num 440
..$ hp : num 230
..$ drat: num 3.23
..$ wt : num 5.34
..$ qsec: num 17.4
..$ vs : num 0
..$ am : num 0
..$ gear: num 3
..$ carb: num 4
$ :List of 12
..$ car : chr "Fiat 128"
..$ mpg : num 32.4
..$ cyl : num 4
..$ disp: num 78.7
..$ hp : num 66
..$ drat: num 4.08
..$ wt : num 2.2
..$ qsec: num 19.5
..$ vs : num 1
..$ am : num 1
..$ gear: num 4
..$ carb: num 1
$ :List of 12
..$ car : chr "Honda Civic"
..$ mpg : num 30.4
..$ cyl : num 4
..$ disp: num 75.7
..$ hp : num 52
..$ drat: num 4.93
..$ wt : num 1.61
..$ qsec: num 18.5
..$ vs : num 1
..$ am : num 1
..$ gear: num 4
..$ carb: num 2
$ :List of 12
..$ car : chr "Toyota Corolla"
..$ mpg : num 33.9
..$ cyl : num 4
..$ disp: num 71.1
..$ hp : num 65
..$ drat: num 4.22
..$ wt : num 1.83
..$ qsec: num 19.9
..$ vs : num 1
..$ am : num 1
..$ gear: num 4
..$ carb: num 1
$ :List of 12
..$ car : chr "Toyota Corona"
..$ mpg : num 21.5
..$ cyl : num 4
..$ disp: num 120
..$ hp : num 97
..$ drat: num 3.7
..$ wt : num 2.46
..$ qsec: num 20
..$ vs : num 1
..$ am : num 0
..$ gear: num 3
..$ carb: num 1
$ :List of 12
..$ car : chr "Dodge Challenger"
..$ mpg : num 15.5
..$ cyl : num 8
..$ disp: num 318
..$ hp : num 150
..$ drat: num 2.76
..$ wt : num 3.52
..$ qsec: num 16.9
..$ vs : num 0
..$ am : num 0
..$ gear: num 3
..$ carb: num 2
$ :List of 12
..$ car : chr "AMC Javelin"
..$ mpg : num 15.2
..$ cyl : num 8
..$ disp: num 304
..$ hp : num 150
..$ drat: num 3.15
..$ wt : num 3.44
..$ qsec: num 17.3
..$ vs : num 0
..$ am : num 0
..$ gear: num 3
..$ carb: num 2
$ :List of 12
..$ car : chr "Camaro Z28"
..$ mpg : num 13.3
..$ cyl : num 8
..$ disp: num 350
..$ hp : num 245
..$ drat: num 3.73
..$ wt : num 3.84
..$ qsec: num 15.4
..$ vs : num 0
..$ am : num 0
..$ gear: num 3
..$ carb: num 4
$ :List of 12
..$ car : chr "Pontiac Firebird"
..$ mpg : num 19.2
..$ cyl : num 8
..$ disp: num 400
..$ hp : num 175
..$ drat: num 3.08
..$ wt : num 3.85
..$ qsec: num 17.1
..$ vs : num 0
..$ am : num 0
..$ gear: num 3
..$ carb: num 2
$ :List of 12
..$ car : chr "Fiat X1-9"
..$ mpg : num 27.3
..$ cyl : num 4
..$ disp: num 79
..$ hp : num 66
..$ drat: num 4.08
..$ wt : num 1.94
..$ qsec: num 18.9
..$ vs : num 1
..$ am : num 1
..$ gear: num 4
..$ carb: num 1
$ :List of 12
..$ car : chr "Porsche 914-2"
..$ mpg : num 26
..$ cyl : num 4
..$ disp: num 120
..$ hp : num 91
..$ drat: num 4.43
..$ wt : num 2.14
..$ qsec: num 16.7
..$ vs : num 0
..$ am : num 1
..$ gear: num 5
..$ carb: num 2
$ :List of 12
..$ car : chr "Lotus Europa"
..$ mpg : num 30.4
..$ cyl : num 4
..$ disp: num 95.1
..$ hp : num 113
..$ drat: num 3.77
..$ wt : num 1.51
..$ qsec: num 16.9
..$ vs : num 1
..$ am : num 1
..$ gear: num 5
..$ carb: num 2
$ :List of 12
..$ car : chr "Ford Pantera L"
..$ mpg : num 15.8
..$ cyl : num 8
..$ disp: num 351
..$ hp : num 264
..$ drat: num 4.22
..$ wt : num 3.17
..$ qsec: num 14.5
..$ vs : num 0
..$ am : num 1
..$ gear: num 5
..$ carb: num 4
$ :List of 12
..$ car : chr "Ferrari Dino"
..$ mpg : num 19.7
..$ cyl : num 6
..$ disp: num 145
..$ hp : num 175
..$ drat: num 3.62
..$ wt : num 2.77
..$ qsec: num 15.5
..$ vs : num 0
..$ am : num 1
..$ gear: num 5
..$ carb: num 6
$ :List of 12
..$ car : chr "Maserati Bora"
..$ mpg : num 15
..$ cyl : num 8
..$ disp: num 301
..$ hp : num 335
..$ drat: num 3.54
..$ wt : num 3.57
..$ qsec: num 14.6
..$ vs : num 0
..$ am : num 1
..$ gear: num 5
..$ carb: num 8
$ :List of 12
..$ car : chr "Volvo 142E"
..$ mpg : num 21.4
..$ cyl : num 4
..$ disp: num 121
..$ hp : num 109
..$ drat: num 4.11
..$ wt : num 2.78
..$ qsec: num 18.6
..$ vs : num 1
..$ am : num 1
..$ gear: num 4
..$ carb: num 2
Expose to JS
ojs_define(data_raw)
JS Table from R data
dropdown with var names for dynamic sorting
pre-pendingnull
to allow no choice as inital value
= Inputs.select([null].concat(Object.keys(data_raw[0]).sort()),
viewof dropdown value: null, label: "Sort by",
{<!-- sort: true, // or sort: "car"-->
unique: true}
)
= Inputs.table(data_raw,
viewof tableData sort: dropdown, required: false,
{format: {
mpg: sparkbar(d3.max(data_raw, d => d.mpg)),
cyl: sparkbar(d3.max(data_raw, d => d.cyl)),
disp: sparkbar(d3.max(data_raw, d => d.disp)),
hp: sparkbar(d3.max(data_raw, d => d.hp)),
qsec: sparkbar(d3.max(data_raw, d => d.qsec))
}
} )
tableData
Bonus: Mean HP from seleted rows
Plot
min/max hp with R
Just a proof-of-concept; can be solved with ojs Plot generics
<- min(mtcars$hp)
min <- max(mtcars$hp) max
ojs_define(min)
ojs_define(max)
= Plot.plot({
chart inset: 8,
grid: true,
facet: {
data: data_raw,
y: doFacet && "cyl"
,
}color: {
legend: true,
,
}marks: [
.dot(data_raw,{filter: d => d.hp <= minimum, x: "cyl", y: "mpg", stroke: "car"})
Plot
] })
= Inputs.range([min, max], { value: max, step: 1, label: "hp filter" })
viewof minimum = Inputs.toggle({label: "Facet", value: true}) viewof doFacet
import {serialize} from "@mbostock/saving-svg"
<!-- rasterize -->
.download(() => serialize(chart), undefined, "Save as SVG")
DOM<!-- DOM.download(() => rasterize(chart), undefined, "Save as PNG") -->
Helper Functions
Sparkline for table
<!-- from https://observablehq.com/@observablehq/input-table#sparkbar -->
<!-- import {sparkbar} from "@observablehq/input-table" -->
function sparkbar(max) {
return x => htl.html`<div style="
background: lightblue;
width: ${100 * x / max}%;
float: right;
padding-right: 3px;
box-sizing: border-box;
overflow: visible;
display: flex;
justify-content: end;">${x.toLocaleString("en")}`
}