Dynamic Datasets

Using derived variables to easily create reactive views of data in Idyll.

Thu May 30 2019

This article covers how to use datasets and derived variables to easily create derived views of data. To learn more about datasets in Idyll, see the documentation page.

In this article I’ve downloaded a CSV file that I found on GitHub and have placed it locally in the data/ folder in my Idyll project.


Loading data

To load this into Idyll, declare a dataset:

[data name:"cars" source:"cars.csv" /]

In this case a CSV file where each row represents a car. All cars:

make
mpg
cyl
disp
hp
drat
wt
qsec
vs
am
gear
carb
Mazda RX4
21
6
160
110
3.9
2.62
16.46
0
1
4
4
Mazda RX4 Wag
21
6
160
110
3.9
2.875
17.02
0
1
4
4
Datsun 710
22.8
4
108
93
3.85
2.32
18.61
1
1
4
1
Hornet 4 Drive
21.4
6
258
110
3.08
3.215
19.44
1
0
3
1
Hornet Sportabout
18.7
8
360
175
3.15
3.44
17.02
0
0
3
2
Page 1 of 7
Loading...
[Table data:cars defaultPageSize:5 /]

Derived variables

Next, create a derived variable. Here I select only those cars that get less than twenty miles per gallon:

[derived name:"carsLowMPG" value:`cars.filter(c => c.mpg < 20)` /]

I’m using the native JavaScript array filter method. You can use any JavaScript in the value expression, other useful array functions include map and reduce.

This works and can be used to create a new table with only these cars:

make
mpg
cyl
disp
hp
drat
wt
qsec
vs
am
gear
carb
Hornet Sportabout
18.7
8
360
175
3.15
3.44
17.02
0
0
3
2
Valiant
18.1
6
225
105
2.76
3.46
20.22
1
0
3
1
Duster 360
14.3
8
360
245
3.21
3.57
15.84
0
0
3
4
Merc 280
19.2
6
167.6
123
3.92
3.44
18.3
1
0
4
4
Merc 280C
17.8
6
167.6
123
3.92
3.44
18.9
1
0
4
4
Page 1 of 4
Loading...
[Table data:carsLowMPGHardCoded defaultPageSize:5 /]

But that 20 is hard coded... make it a variable instead:

[var name:"cutoff" value:20 /]
[derived name:"carsLowMPG" value:`cars.filter(c => c.mpg < cutoff)` /]

And add a range slider to control it:

[Range value:cutoff min:0 max:40 /]

And voilà, a filterable table using derived variable:

MPG Cutoff: 20.00
make
mpg
cyl
disp
hp
drat
wt
qsec
vs
am
gear
carb
Hornet Sportabout
18.7
8
360
175
3.15
3.44
17.02
0
0
3
2
Valiant
18.1
6
225
105
2.76
3.46
20.22
1
0
3
1
Duster 360
14.3
8
360
245
3.21
3.57
15.84
0
0
3
4
Merc 280
19.2
6
167.6
123
3.92
3.44
18.3
1
0
4
4
Merc 280C
17.8
6
167.6
123
3.92
3.44
18.9
1
0
4
4
Page 1 of 4
Loading...


Custom components

You don’t have to just the table component. For example, I could pass the filtered data into a [VegaLite /] component just as easily:

MPG Cutoff: 20.00
[VegaLite
   data:carsLowMPG
   width:500
   spec:`{
      "mark": "point",
      "encoding": {
         "x": {"field": "hp","type": "quantitative"},
         "y": {"field": "mpg","type": "quantitative"}
      }}`
   /]

Learn more about the available components.