Dynamic Datasets

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:

[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:

[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:

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:

[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.