diff --git a/_data/sidebars/home_sidebar.yml b/_data/sidebars/home_sidebar.yml
index 0af4ed1..79089a7 100644
--- a/_data/sidebars/home_sidebar.yml
+++ b/_data/sidebars/home_sidebar.yml
@@ -1,19 +1,22 @@
-# This is your sidebar TOC. The sidebar code loops through sections here and provides the appropriate formatting.
-
-entries:
-- title: Sidebar
- levels: one
- folders:
-
- - title: Tutorials
- output: web
- folderitems:
- - title: Vega-Lite
- url: /vegalite_landing_page.html
- output: web
- - title: Vega
- url: /vega_landing_page.html
- output: web
- - title: HoloViz
- url: /holoviz_landing_page.html
- output: web
+# This is your sidebar TOC. The sidebar code loops through sections here and provides the appropriate formatting.
+
+entries:
+- title: Sidebar
+ levels: one
+ folders:
+
+ - title: Tutorials
+ output: web
+ folderitems:
+ - title: Vega-Lite
+ url: /vegalite_landing_page.html
+ output: web
+ - title: Vega
+ url: /vega_landing_page.html
+ output: web
+ - title: HoloViz
+ url: /holoviz_landing_page.html
+ output: web
+ - title: Vega in R
+ url: /vega-in-r_landing_page.html
+ output: web
diff --git a/_data/sidebars/vega-in-r_sidebar.yml b/_data/sidebars/vega-in-r_sidebar.yml
new file mode 100644
index 0000000..9b6df26
--- /dev/null
+++ b/_data/sidebars/vega-in-r_sidebar.yml
@@ -0,0 +1,79 @@
+entries:
+- title: sidebar
+ product: Vega in R tutorial
+ folders:
+
+ - title:
+ output: pdf
+ type: frontmatter
+ folderitems:
+ - title:
+ url: /titlepage.html
+ output: pdf
+ type: frontmatter
+ - title:
+ url: /tocpage.html
+ output: pdf
+ type: frontmatter
+
+ - title: Vega in R landing page
+ output: web, pdf
+ folderitems:
+ - title: Vega in R landing page
+ url: /vega-in-r_landing_page.html
+ output: web, pdf
+ - title: Setting things up
+ url: /vega-in-r-setting-things-up.html
+ output: web, pdf
+ - title: Creating static images
+ output: web, pdf
+ folderitems:
+ - title: A simple barchart
+ url: /vega-in-r-simple-barchart.html
+ output: web, pdf
+ - title: Changing the data
+ url: /vega-in-r-changing-data.html
+ output: web, pdf
+ - title: Simple Interaction
+ output: web, pdf
+ folderitems:
+ - title: Simple interaction
+ url: /vega-in-r-simple-interaction.html
+ output: web, pdf
+ - title: Transforms
+ output: web, pdf
+ folderitems:
+ - title: Field transform
+ url: /vega-in-r-field-transform.html
+ output: web, pdf
+ - title: Data transform
+ url: /vega-in-r-data-transformations.html
+ output: web, pdf
+ - title: Combine Charts
+ output: web, pdf
+ folderitems:
+ - title: Layered chart
+ url: /vega-in-r-layered-chart.html
+ output: web, pdf
+ - title: Concatenated chart
+ url: /vega-in-r-concatenated-chart.html
+ output: web, pdf
+ - title: Faceted chart
+ url: /vega-in-r-faceted-chart.html
+ output: web, pdf
+ - title: Brush and link
+ output: web, pdf
+ folderitems:
+ - title: Brush and link
+ url: /vega-in-r-brush-and-link.html
+ output: web, pdf
+ - title: Widgets
+ output: web, pdf
+ folderitems:
+ - title: Widgets for selections
+ url: /vega-in-r-widgets.html
+ output: web, pdf
+
+
+
+
diff --git a/_data/topnav.yml b/_data/topnav.yml
index 63a6b76..e142883 100644
--- a/_data/topnav.yml
+++ b/_data/topnav.yml
@@ -1,20 +1,23 @@
-## Topnav single links
-## if you want to list an external url, use external_url instead of url. the theme will apply a different link base.
-topnav:
-- title: Topnav
- items:
- - title: GitHub
- external_url: https://github.com/vda-lab/visualisation-tutorial
-
-#Topnav dropdowns
-topnav_dropdowns:
-- title: Topnav dropdowns
- folders:
- - title: Tutorials
- folderitems:
- - title: Vega-lite
- url: /vegalite_landing_page.html
- - title: Vega
- url: /vega_landing_page.html
- - title: HoloViz
- url: /holoviz_landing_page.html
+## Topnav single links
+## if you want to list an external url, use external_url instead of url. the theme will apply a different link base.
+topnav:
+- title: Topnav
+ items:
+ - title: GitHub
+ external_url: https://github.com/vda-lab/visualisation-tutorial
+
+#Topnav dropdowns
+topnav_dropdowns:
+- title: Topnav dropdowns
+ folders:
+ - title: Tutorials
+ folderitems:
+ - title: Vega-lite
+ url: /vegalite_landing_page.html
+ - title: Vega
+ url: /vega_landing_page.html
+ - title: HoloViz
+ url: /holoviz_landing_page.html
+ - title: Vega in R
+ url: /vega-in-r_landing_page.html
+
diff --git a/assets/cranR.PNG b/assets/cranR.PNG
new file mode 100644
index 0000000..07fa2de
Binary files /dev/null and b/assets/cranR.PNG differ
diff --git a/assets/screenshot_code.PNG b/assets/screenshot_code.PNG
new file mode 100644
index 0000000..02330c6
Binary files /dev/null and b/assets/screenshot_code.PNG differ
diff --git a/brush-and-link.md b/brush-and-link.md
new file mode 100644
index 0000000..4404489
--- /dev/null
+++ b/brush-and-link.md
@@ -0,0 +1,21526 @@
+---
+title: Brush and link
+keywords: vega-in-r
+sidebar: vega-in-r_sidebar
+permalink: /vega-in-r-brush-and-link.html
+folder: vega-in-r
+series: vega-in-r-series
+weight: 10
+---
+
+We have seen how to concatenate charts, we may now see how to connect them interactively. The steps described here are based on the [Interactive Examples article](https://vegawidget.github.io/altair/articles/interactive.html).
+- To get started, we create a static chart using the step 1 of the code below.
+- The second step is to add a selection. Here we add a selection of type `interval` but a selection can also be `single` or `multi` [altair.selection reference](https://altair-viz.github.io/user_guide/generated/api/altair.selection.html?highlight=selection#altair.selection). In step 2, we also name the selection 'brush' and we update the static chart by including the selection function.
+- Finally, in step 3, we update the color encoding of the data, so that every time the chart is brused the data inside the selection are colored, based on the nominal variable `Missing`, and the rest are colored lightgray.
+
+```R
+data_source_modified_subset = subset(data_source_modified, data_source_modified$Entity != "All natural disasters")
+
+# step1
+domain_color = c("0", "1")
+range_color = c('black', 'red')
+
+chart_static = alt$Chart(data_source_modified_subset)$
+ mark_circle(
+ opacity = 0.8,
+ size = 50
+ )$
+ encode(
+ x = 'Year:O',
+ y = 'Deaths:Q',
+ color = alt$Color('Missing', scale=alt$Scale(domain = domain_color, range = range_color))
+ )$
+ properties(
+ height = 300,
+ width = 600
+ )
+
+# step2
+brush = alt$selection_interval()
+chart_brush = chart_static$add_selection(brush)
+
+# step3
+chart_1 = chart_brush$encode(
+ color = alt$condition(brush, "Missing:N", alt$value("lightgray"))
+ )
+```
+
+
+
+
+
+
+Now that we have created our brushable chart, we may decrease the size of the first chart, so that we can easily display two charts in the screen.
+If we now make a second chart that inherits all the properties of the first chart but we only change the x position encoding to `Entity`, we get the two-way brushable and linkable visalisation below.
+
+```R
+chart_2a = chart_1$properties(width = 300, height = 300)
+chart_2b = chart_2a$encode(x = "Entity:N")
+
+chart_disasters = (chart_2a | chart_2b)
+```
+
+
+
+
+
+
+{:.exercise}
+**Exercise** - Make a one-way brushable and linkable chart of the deaths versus time per entity. The interval selection appears in a barchart below. Hint: Check the [altair R gallery of interactive charts](https://vegawidget.github.io/altair/articles/example-gallery-08-interactive-charts.html)
+
+
+
+
+
+
+
+{% include custom/series_vega-in-r_next.html %}
diff --git a/changing-data.md b/changing-data.md
new file mode 100644
index 0000000..18a21e3
--- /dev/null
+++ b/changing-data.md
@@ -0,0 +1,284 @@
+---
+title: Changing data
+keywords: vega-in-r
+sidebar: vega-in-r_sidebar
+permalink: /vega-in-r-changing-data.html
+folder: vega-in-r
+series: vega-in-r-series
+weight: 3
+---
+Let's now use a more realistic example and visualize a dataset included in the `vega_datasets` package [https://github.com/vega/vega-datasets.html](https://github.com/vega/vega-datasets.html).
+
+We can import the vega datasets using the altair library.
+```R
+vega_data = altair::import_vega_data()
+```
+
+Check out the list of the available datasets:
+```R
+vega_data$list_datasets()
+```
+
+and select the one you want to work with. Here, we are using the dataset for [Natural Disasters from Our World in Data](https://ourworldindata.org/natural-disasters.html).
+```R
+data_source = vega_data$disasters()
+```
+
+Alternatively, you may load data from a local file using standard R code, or read the data from a url using:
+```R
+data_source = read.csv(url("https://raw.githubusercontent.com/vega/vega-datasets/master/data/disasters.csv"))
+```
+
+After importing the data, we can take a first look using standard R code:
+
+```R
+str(data_source)
+summary(data_source)
+head(data_source); tail(data_source)
+```
+
+```R
+> str(data_source)
+'data.frame': 803 obs. of 3 variables:
+ $ Entity: Factor w/ 11 levels "All natural disasters",..: 1 1 1 1 1 1 1 1 1 1 ...
+ $ Year : int 1900 1901 1902 1903 1905 1906 1907 1908 1909 1910 ...
+ $ Deaths: int 1267360 200018 46037 6506 22758 42970 1325641 75033 1511524 148233 ...
+> summary(data_source)
+ Entity Year Deaths
+ All natural disasters:117 Min. :1900 Min. : 1
+ Earthquake :111 1st Qu.:1946 1st Qu.: 270
+ Extreme weather :111 Median :1975 Median : 1893
+ Flood : 89 Mean :1969 Mean : 81213
+ Landslide : 79 3rd Qu.:1996 3rd Qu.: 10362
+ Epidemic : 69 Max. :2017 Max. :3706227
+ (Other) :227
+> head(data_source)
+ Entity Year Deaths
+1 All natural disasters 1900 1267360
+2 All natural disasters 1901 200018
+3 All natural disasters 1902 46037
+4 All natural disasters 1903 6506
+5 All natural disasters 1905 22758
+6 All natural disasters 1906 42970
+> tail(data_source)
+ Entity Year Deaths
+798 Wildfire 2012 21
+799 Wildfire 2013 35
+800 Wildfire 2014 16
+801 Wildfire 2015 67
+802 Wildfire 2016 39
+803 Wildfire 2017 75
+```
+
+We can now make an altair R plot similar to the one at altair Python [https://altair-viz.github.io/gallery/natural_disasters.html](https://altair-viz.github.io/gallery/natural_disasters.html)
+For now, we may filter the data in R and use the subset of the data to make the chart. On the data transform section we will see how to do the filtering inside the chart specification.
+
+
+
+
+
+
+
+Below is the code to make this plot.
+```R
+data_source_subset = subset(data_source, data_source$Entity != "All natural disasters")
+
+chart_disasters = alt$Chart(data_source_subset)$
+ mark_circle(
+ opacity=0.8,
+ stroke='black',
+ strokeWidth=1
+ )$
+ encode(
+ x = "Year:O",
+ y = "Entity:N",
+ color = "Entity:N",
+ size = "Deaths:Q"
+ )$
+ properties(
+ height=200,
+ width=500
+ )
+```
+Here, the global properties of the circles are specified inside the mark attribute while the properties that depend on the data inside the encoding.
+Using the mark type `rect` with `color` and `opacity` channels we can make a heatmap plot.
+
+
+```R
+chart_disasters = alt$Chart(data_source_subset)$
+ mark_rect()$
+ encode(
+ x = "Entity:O",
+ y = "Year:O",
+ color = "Entity:N",
+ opacity = 'Deaths:Q'
+ )$
+ properties(
+ height=600,
+ width=200
+ )
+```
+
+
+
+
+
+Next, using the code below, we can make a time series plot of deaths from all natural disasters from 1900 until 2017.
+
+```R
+data_source_subset = subset(data_source, data_source$Entity == "All natural disasters")
+
+chart_disasters = alt$Chart(data_source_subset)$
+ mark_line()$
+ encode(
+ x='Year:Q',
+ y='Deaths:Q',
+ tooltip = c("Year", "Deaths")
+ )$
+ properties(
+ height=300,
+ width=600
+ )
+```
+
+
+
+
+
+{:.exercise}
+**Exercise** - Use the `color` channel to make a time series plot per Entity.
+
+{:.exercise}
+**Exercise** - Change the field types. What is the result?
+
+
+{% include custom/series_vega-in-r_next.html %}
diff --git a/data-transformations.md b/data-transformations.md
new file mode 100644
index 0000000..4a13fe0
--- /dev/null
+++ b/data-transformations.md
@@ -0,0 +1,205 @@
+---
+title: Data Transform
+keywords: vega-in-r
+sidebar: vega-in-r_sidebar
+permalink: /vega-in-r-data-transformations.html
+folder: vega-in-r
+series: vega-in-r-series
+weight: 6
+---
+
+As mentioned in the [data transformations documentation](https://altair-viz.github.io/user_guide/transform/index.html) of altair, in most cases, it is suggested to perform transformations outside the chart definition, so in our case using R. Of course, data transforms inside the chart can also be useful in some cases.
+So far, we have been filtering the data in R and then using the modified data in the chart specification. Now, we use the `transform_filter()` to subset the data inside the chart. [Here](https://altair-viz.github.io/user_guide/transform/filter.html#user-guide-filter-transform) is the filter transfrom documentation. We make the linechart we have seen in a previous section using the code below:
+
+```R
+chart_disasters = alt$Chart("https://raw.githubusercontent.com/vega/vega-datasets/master/data/disasters.csv")$
+ mark_line()$
+ encode(
+ x = 'Year:Q',
+ y = 'Deaths:Q',
+ tooltip = c("Year", "Deaths")
+ )$
+ properties(
+ height = 300,
+ width = 600
+ )$
+ transform_filter(
+ alt$FieldEqualPredicate(field = "Entity", equal = "All natural disasters")
+ )
+```
+
+
+
+
+
+
+We use the field predicates to assess whether a data point satisfied certain conditions. As mentioned in the [field predicates reference](https://altair-viz.github.io/user_guide/transform/filter.html#field-predicates) the `FieldEqualPredicate` evaluates whether a field is equal to a particular value. The variable is the first argument and the condition is the second argument. Go through the field predicates altair documentation and [vega-lite documentation](https://vega.github.io/vega-lite/docs/predicate.html#field-predicate) and use the `FieldOneOfPredicate` for the exercise below.
+
+
+{:.exercise}
+**Exercise** - Use the filter transform to obtain the data related to volcanic activity and earthquake and make an area chart like the one below.
+
+
+
+
+
+
+We now also use the `transform_window()` for data transformation to compute and plot a windowed aggregation of the deaths over all available years. [Here](https://altair-viz.github.io/user_guide/transform/window.html#user-guide-window-transform) is the window transform documentation.
+
+
+```R
+chart_disasters = alt$Chart("https://raw.githubusercontent.com/vega/vega-datasets/master/data/disasters.csv")$
+ transform_window(
+ cumulative_count='sum(Deaths)'
+ )$
+ mark_area()$
+ encode(
+ x = 'Year:O',
+ y = 'cumulative_count:Q',
+ tooltip = c("Year:Q", 'cumulative_count:Q')
+ )$transform_filter(
+ alt$FieldEqualPredicate(field = "Entity", equal = "All natural disasters")
+ )$
+ properties(
+ height = 300,
+ width = 600
+ )
+```
+
+
+
+
+
+
+{% include custom/series_vega-in-r_next.html %}
diff --git a/index.md b/index.md
index efd10b7..86c0e9d 100644
--- a/index.md
+++ b/index.md
@@ -1,66 +1,67 @@
----
-title: "Data Visualisation in Data Science"
-keywords: homepage
-permalink: index.html
----
-
-
-Welcome to this set of tutorials for data visualisation. These were created to serve as teaching material for the EBI workshop [Data Visualisation for Biology: A Practical Workshop on Design, Techniques and Tools](https://www.ebi.ac.uk/training/events/2020/data-visualisation-biology-practical-workshop-design-techniques-and-tools-1) as well as the course material for the Data Visualisation for Data Science courses at [UHasselt](https://www.uhasselt.be/studiegids?n=4&a=2019&i=4142) and [KU Leuven](https://onderwijsaanbod.kuleuven.be/syllabi/e/G0R72AE.htm#activetab=doelstellingen_idm480336).
-
-The contents of these tutorials is licensed as CC-BY: feel free to copy/remix/tweak/... it, but please credit your source.
-
-
-
-In these tutorial, we will work in different phases, looking at vega-lite, vega, and Holoviz. We'll start with vega-lite and vega in the [online editor](https://vega.github.io/editor/) that they provide, and move on to using HoloViz at a later stage.
-
-This tutorial is based on material provided on the vega-lite, vega and holoviz websites, as well as teaching material collected by Ryo Sakai.
-
-## Preamble
-### What are vega-lite and vega?
-You might have heard of [D3](http://d3js.org) as a library to create interactive data visualisations. Indeed, this library is considered the standard in the field. Unfortunately, it does have quite a steep learning curve which makes it not ideal if you have to learn it in 2-3 days without a background in javascript programming. In this course, we'll use vega and vega-lite instead. Both are so-called _declarative_ languages, where you tell the computer _what_ you need, not _how_ to do it. Vega and vega-lite are expressed in _JSON_ ("javascript object notation").
-
-This image by [Eric Marty](https://blog.ericmarty.com/the-d3-/-vega-stack) provides a good overview how D3, vega and vega-lite are related:
-
-
-
-To give you an idea, here's a small vega-lite script that shows a barchart.
-
-```json
-{
- "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
- "data": {
- "values": [
- {"a": "A", "b": 28}, {"a": "B", "b": 55}, {"a": "C", "b": 43}
- ]
- },
- "mark": "bar",
- "encoding": {
- "x": {"field": "b", "type": "quantitative"},
- "y": {"field": "a", "type": "ordinal"}
- }
-}
-```
-
-The resulting barchart:
-
-
-
-### JSON
-The above code is nothing more than a JSON (JavaScript Object Notation) data structure. It is similar to XML, but more readable:
-
-- strings are put between double quotes `"`
-- numbers are _not_ put between quotes
-- lists (aka arrays) are put between square brackets `[]`
-- objects (aka hashes, aka dictionaries, aka key-value pairs) are put between curly brackets `{}`, and key and value are separated with a colon `:`
-
-Also, these objects can be nested. In the example above, the whole thing is a single JSON object, consisting of key-value pairs (keys being `"$schema"`, `"data"`, `"mark"` and `"encoding"`). The `"data"` key itself holds an object `{ "values": [ ... ]}`. The `"values"` key in its place is an array of objects again.
-
-Different elements in a JSON object or array have to be separated by a comma `,`.
-
-That's the preamble finished. Let's start with...
-
-## The actual tutorials
-
-* [Vega-Lite]({{ site.baseurl }}/vegalite_landing_page.html)
-* [Vega]({{ site.baseurl }}/vega_landing_page.html)
-* [Holoviz]({{ site.baseurl }}/holoviz_landing_page.html)
+---
+title: "Data Visualisation in Data Science"
+keywords: homepage
+permalink: index.html
+---
+
+
+Welcome to this set of tutorials for data visualisation. These were created to serve as teaching material for the EBI workshop [Data Visualisation for Biology: A Practical Workshop on Design, Techniques and Tools](https://www.ebi.ac.uk/training/events/2020/data-visualisation-biology-practical-workshop-design-techniques-and-tools-1) as well as the course material for the Data Visualisation for Data Science courses at [UHasselt](https://www.uhasselt.be/studiegids?n=4&a=2019&i=4142) and [KU Leuven](https://onderwijsaanbod.kuleuven.be/syllabi/e/G0R72AE.htm#activetab=doelstellingen_idm480336).
+
+The contents of these tutorials is licensed as CC-BY: feel free to copy/remix/tweak/... it, but please credit your source.
+
+
+
+In these tutorial, we will work in different phases, looking at vega-lite, vega, and Holoviz. We'll start with vega-lite and vega in the [online editor](https://vega.github.io/editor/) that they provide, and move on to using HoloViz at a later stage.
+
+This tutorial is based on material provided on the vega-lite, vega and holoviz websites, as well as teaching material collected by Ryo Sakai.
+
+## Preamble
+### What are vega-lite and vega?
+You might have heard of [D3](http://d3js.org) as a library to create interactive data visualisations. Indeed, this library is considered the standard in the field. Unfortunately, it does have quite a steep learning curve which makes it not ideal if you have to learn it in 2-3 days without a background in javascript programming. In this course, we'll use vega and vega-lite instead. Both are so-called _declarative_ languages, where you tell the computer _what_ you need, not _how_ to do it. Vega and vega-lite are expressed in _JSON_ ("javascript object notation").
+
+This image by [Eric Marty](https://blog.ericmarty.com/the-d3-/-vega-stack) provides a good overview how D3, vega and vega-lite are related:
+
+
+
+To give you an idea, here's a small vega-lite script that shows a barchart.
+
+```json
+{
+ "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
+ "data": {
+ "values": [
+ {"a": "A", "b": 28}, {"a": "B", "b": 55}, {"a": "C", "b": 43}
+ ]
+ },
+ "mark": "bar",
+ "encoding": {
+ "x": {"field": "b", "type": "quantitative"},
+ "y": {"field": "a", "type": "ordinal"}
+ }
+}
+```
+
+The resulting barchart:
+
+
+
+### JSON
+The above code is nothing more than a JSON (JavaScript Object Notation) data structure. It is similar to XML, but more readable:
+
+- strings are put between double quotes `"`
+- numbers are _not_ put between quotes
+- lists (aka arrays) are put between square brackets `[]`
+- objects (aka hashes, aka dictionaries, aka key-value pairs) are put between curly brackets `{}`, and key and value are separated with a colon `:`
+
+Also, these objects can be nested. In the example above, the whole thing is a single JSON object, consisting of key-value pairs (keys being `"$schema"`, `"data"`, `"mark"` and `"encoding"`). The `"data"` key itself holds an object `{ "values": [ ... ]}`. The `"values"` key in its place is an array of objects again.
+
+Different elements in a JSON object or array have to be separated by a comma `,`.
+
+That's the preamble finished. Let's start with...
+
+## The actual tutorials
+
+* [Vega-Lite]({{ site.baseurl }}/vegalite_landing_page.html)
+* [Vega]({{ site.baseurl }}/vega_landing_page.html)
+* [Holoviz]({{ site.baseurl }}/holoviz_landing_page.html)
+* [Vega in R]({{ site.baseurl }}/vega-in-r_landing_page.html)
diff --git a/layered-chart.md b/layered-chart.md
new file mode 100644
index 0000000..6f8b153
--- /dev/null
+++ b/layered-chart.md
@@ -0,0 +1,8000 @@
+---
+title: Layered chart
+keywords: vega-in-r
+sidebar: vega-in-r_sidebar
+permalink: /vega-in-r-layered-chart.html
+folder: vega-in-r
+series: vega-in-r-series
+weight: 7
+---
+
+We are now looking at how we can combine charts in one canvas in altair R. This section on how to combine charts, is based on the [View Composition article](https://vegawidget.github.io/altair/articles/view-composition.html).
+
+First, we are discussing a layered chart example. Each chart can be made separately and combined uisng the `+` operator: `chart_layer_1 + chart_layer_2`.
+Below, we make a chart that consists of a line layer and a point layer. The tooltip should be added to the top layer so that it is visible in the final chart.
+
+```R
+chart_disasters_L1 = alt$Chart("https://raw.githubusercontent.com/vega/vega-datasets/master/data/disasters.csv")$
+ mark_line()$
+ encode(
+ x = 'Year:O',
+ y = 'Deaths:Q'
+ )$
+ transform_filter(
+ alt$FieldEqualPredicate(field = "Entity", equal = "All natural disasters")
+ )$
+ properties(
+ height = 400,
+ width = 600
+ )
+
+chart_disasters_L2 = alt$Chart("https://raw.githubusercontent.com/vega/vega-datasets/master/data/disasters.csv")$
+ mark_point()$
+ encode(
+ x = 'Year:O',
+ y = 'Deaths:Q',
+ tooltip = "Deaths:Q"
+ )$
+ transform_filter(
+ alt$FieldEqualPredicate(field = "Entity", equal = "All natural disasters")
+ )$
+ properties(
+ height = 400,
+ width = 600
+ )
+
+chart_disasters = (chart_disasters_L1 + chart_disasters_L2)
+```
+
+
+
+
+
+
+
+To produce the same chart we may also follow the procedure below.
+Use the R code provided above for `chart_disasters_L2` and then make the first layer using:
+
+```R
+chart_disasters_L1 = chart_disasters_L2$mark_line()
+```
+
+Then superimpose the charts as before:
+```R
+chart_disasters = (chart_disasters_L1 + chart_disasters_L2)
+```
+
+{:.exercise}
+**Exercise** - Make a layered chart, which consists of one layer for the bar mark and one for the text mark, to produce the chart below.
+
+
+
+
+
+
+
+{% include custom/series_vega-in-r_next.html %}
diff --git a/pages/vega-in-r/brush-and-link.md b/pages/vega-in-r/brush-and-link.md
new file mode 100644
index 0000000..4404489
--- /dev/null
+++ b/pages/vega-in-r/brush-and-link.md
@@ -0,0 +1,21526 @@
+---
+title: Brush and link
+keywords: vega-in-r
+sidebar: vega-in-r_sidebar
+permalink: /vega-in-r-brush-and-link.html
+folder: vega-in-r
+series: vega-in-r-series
+weight: 10
+---
+
+We have seen how to concatenate charts, we may now see how to connect them interactively. The steps described here are based on the [Interactive Examples article](https://vegawidget.github.io/altair/articles/interactive.html).
+- To get started, we create a static chart using the step 1 of the code below.
+- The second step is to add a selection. Here we add a selection of type `interval` but a selection can also be `single` or `multi` [altair.selection reference](https://altair-viz.github.io/user_guide/generated/api/altair.selection.html?highlight=selection#altair.selection). In step 2, we also name the selection 'brush' and we update the static chart by including the selection function.
+- Finally, in step 3, we update the color encoding of the data, so that every time the chart is brused the data inside the selection are colored, based on the nominal variable `Missing`, and the rest are colored lightgray.
+
+```R
+data_source_modified_subset = subset(data_source_modified, data_source_modified$Entity != "All natural disasters")
+
+# step1
+domain_color = c("0", "1")
+range_color = c('black', 'red')
+
+chart_static = alt$Chart(data_source_modified_subset)$
+ mark_circle(
+ opacity = 0.8,
+ size = 50
+ )$
+ encode(
+ x = 'Year:O',
+ y = 'Deaths:Q',
+ color = alt$Color('Missing', scale=alt$Scale(domain = domain_color, range = range_color))
+ )$
+ properties(
+ height = 300,
+ width = 600
+ )
+
+# step2
+brush = alt$selection_interval()
+chart_brush = chart_static$add_selection(brush)
+
+# step3
+chart_1 = chart_brush$encode(
+ color = alt$condition(brush, "Missing:N", alt$value("lightgray"))
+ )
+```
+
+
+
+
+
+
+Now that we have created our brushable chart, we may decrease the size of the first chart, so that we can easily display two charts in the screen.
+If we now make a second chart that inherits all the properties of the first chart but we only change the x position encoding to `Entity`, we get the two-way brushable and linkable visalisation below.
+
+```R
+chart_2a = chart_1$properties(width = 300, height = 300)
+chart_2b = chart_2a$encode(x = "Entity:N")
+
+chart_disasters = (chart_2a | chart_2b)
+```
+
+
+
+
+
+
+{:.exercise}
+**Exercise** - Make a one-way brushable and linkable chart of the deaths versus time per entity. The interval selection appears in a barchart below. Hint: Check the [altair R gallery of interactive charts](https://vegawidget.github.io/altair/articles/example-gallery-08-interactive-charts.html)
+
+
+
+
+
+
+
+{% include custom/series_vega-in-r_next.html %}
diff --git a/pages/vega-in-r/changing-data.md b/pages/vega-in-r/changing-data.md
new file mode 100644
index 0000000..18a21e3
--- /dev/null
+++ b/pages/vega-in-r/changing-data.md
@@ -0,0 +1,284 @@
+---
+title: Changing data
+keywords: vega-in-r
+sidebar: vega-in-r_sidebar
+permalink: /vega-in-r-changing-data.html
+folder: vega-in-r
+series: vega-in-r-series
+weight: 3
+---
+Let's now use a more realistic example and visualize a dataset included in the `vega_datasets` package [https://github.com/vega/vega-datasets.html](https://github.com/vega/vega-datasets.html).
+
+We can import the vega datasets using the altair library.
+```R
+vega_data = altair::import_vega_data()
+```
+
+Check out the list of the available datasets:
+```R
+vega_data$list_datasets()
+```
+
+and select the one you want to work with. Here, we are using the dataset for [Natural Disasters from Our World in Data](https://ourworldindata.org/natural-disasters.html).
+```R
+data_source = vega_data$disasters()
+```
+
+Alternatively, you may load data from a local file using standard R code, or read the data from a url using:
+```R
+data_source = read.csv(url("https://raw.githubusercontent.com/vega/vega-datasets/master/data/disasters.csv"))
+```
+
+After importing the data, we can take a first look using standard R code:
+
+```R
+str(data_source)
+summary(data_source)
+head(data_source); tail(data_source)
+```
+
+```R
+> str(data_source)
+'data.frame': 803 obs. of 3 variables:
+ $ Entity: Factor w/ 11 levels "All natural disasters",..: 1 1 1 1 1 1 1 1 1 1 ...
+ $ Year : int 1900 1901 1902 1903 1905 1906 1907 1908 1909 1910 ...
+ $ Deaths: int 1267360 200018 46037 6506 22758 42970 1325641 75033 1511524 148233 ...
+> summary(data_source)
+ Entity Year Deaths
+ All natural disasters:117 Min. :1900 Min. : 1
+ Earthquake :111 1st Qu.:1946 1st Qu.: 270
+ Extreme weather :111 Median :1975 Median : 1893
+ Flood : 89 Mean :1969 Mean : 81213
+ Landslide : 79 3rd Qu.:1996 3rd Qu.: 10362
+ Epidemic : 69 Max. :2017 Max. :3706227
+ (Other) :227
+> head(data_source)
+ Entity Year Deaths
+1 All natural disasters 1900 1267360
+2 All natural disasters 1901 200018
+3 All natural disasters 1902 46037
+4 All natural disasters 1903 6506
+5 All natural disasters 1905 22758
+6 All natural disasters 1906 42970
+> tail(data_source)
+ Entity Year Deaths
+798 Wildfire 2012 21
+799 Wildfire 2013 35
+800 Wildfire 2014 16
+801 Wildfire 2015 67
+802 Wildfire 2016 39
+803 Wildfire 2017 75
+```
+
+We can now make an altair R plot similar to the one at altair Python [https://altair-viz.github.io/gallery/natural_disasters.html](https://altair-viz.github.io/gallery/natural_disasters.html)
+For now, we may filter the data in R and use the subset of the data to make the chart. On the data transform section we will see how to do the filtering inside the chart specification.
+
+
+
+
+
+
+
+Below is the code to make this plot.
+```R
+data_source_subset = subset(data_source, data_source$Entity != "All natural disasters")
+
+chart_disasters = alt$Chart(data_source_subset)$
+ mark_circle(
+ opacity=0.8,
+ stroke='black',
+ strokeWidth=1
+ )$
+ encode(
+ x = "Year:O",
+ y = "Entity:N",
+ color = "Entity:N",
+ size = "Deaths:Q"
+ )$
+ properties(
+ height=200,
+ width=500
+ )
+```
+Here, the global properties of the circles are specified inside the mark attribute while the properties that depend on the data inside the encoding.
+Using the mark type `rect` with `color` and `opacity` channels we can make a heatmap plot.
+
+
+```R
+chart_disasters = alt$Chart(data_source_subset)$
+ mark_rect()$
+ encode(
+ x = "Entity:O",
+ y = "Year:O",
+ color = "Entity:N",
+ opacity = 'Deaths:Q'
+ )$
+ properties(
+ height=600,
+ width=200
+ )
+```
+
+
+
+
+
+Next, using the code below, we can make a time series plot of deaths from all natural disasters from 1900 until 2017.
+
+```R
+data_source_subset = subset(data_source, data_source$Entity == "All natural disasters")
+
+chart_disasters = alt$Chart(data_source_subset)$
+ mark_line()$
+ encode(
+ x='Year:Q',
+ y='Deaths:Q',
+ tooltip = c("Year", "Deaths")
+ )$
+ properties(
+ height=300,
+ width=600
+ )
+```
+
+
+
+
+
+{:.exercise}
+**Exercise** - Use the `color` channel to make a time series plot per Entity.
+
+{:.exercise}
+**Exercise** - Change the field types. What is the result?
+
+
+{% include custom/series_vega-in-r_next.html %}
diff --git a/pages/vega-in-r/concatenated-chart.md b/pages/vega-in-r/concatenated-chart.md
new file mode 100644
index 0000000..8eb5148
--- /dev/null
+++ b/pages/vega-in-r/concatenated-chart.md
@@ -0,0 +1,278 @@
+---
+title: Concatenated chart
+keywords: vega-in-r
+sidebar: vega-in-r_sidebar
+permalink: /vega-in-r-concatenated-chart.html
+folder: vega-in-r
+series: vega-in-r-series
+weight: 8
+---
+
+To concatenate charts horizontally we can use the `|` operator: `chart_1 | chart_2`.
+For vertical concatenation the operator `&` can be used: `chart_1 & chart_2`.
+Below, we are combining four charts to create a 2x2 visualisation using `(chart_1 | chart_2) & (chart_3 | chart_4)`.
+To specify a title in each plot, we use `title = 'The Title'` inside `$properties()`.
+
+```R
+chart_disasters_1 = alt$Chart("https://raw.githubusercontent.com/vega/vega-datasets/master/data/disasters.csv")$
+ mark_line()$
+ encode(
+ x = 'Year:O',
+ y = 'Deaths:Q',
+ tooltip = 'Deaths:Q'
+ )$
+ transform_filter(
+ alt$FieldEqualPredicate(field = "Entity", equal = "Landslide")
+ )$
+ properties(
+ width = 400,
+ height = 200,
+ title = 'Landslide'
+ )$
+ interactive()
+
+chart_disasters_2 = alt$Chart("https://raw.githubusercontent.com/vega/vega-datasets/master/data/disasters.csv")$
+ mark_line()$
+ encode(
+ x = 'Year:O',
+ y = 'Deaths:Q',
+ tooltip = 'Deaths:Q'
+ )$
+ transform_filter(
+ alt$FieldEqualPredicate(field = "Entity", equal = "Volcanic activity")
+ )$
+ properties(
+ width = 400,
+ height = 200,
+ title = 'Volcanic activity'
+ )$
+ interactive()
+
+chart_disasters_3 = alt$Chart("https://raw.githubusercontent.com/vega/vega-datasets/master/data/disasters.csv")$
+ mark_line()$
+ encode(
+ x = 'Year:O',
+ y = 'Deaths:Q',
+ tooltip = 'Deaths:Q'
+ )$
+ transform_filter(
+ alt$FieldEqualPredicate(field = "Entity", equal = "Wildfire")
+ )$
+ properties(
+ width = 400,
+ height = 200,
+ title = 'Wildfire'
+ )$
+ interactive()
+
+chart_disasters_4 = alt$Chart("https://raw.githubusercontent.com/vega/vega-datasets/master/data/disasters.csv")$
+ mark_line()$
+ encode(
+ x = 'Year:O',
+ y = 'Deaths:Q',
+ tooltip = 'Deaths:Q'
+ )$
+ transform_filter(
+ alt$FieldEqualPredicate(field = "Entity", equal = "Mass movement (dry)")
+ )$
+ properties(
+ width = 400,
+ height = 200,
+ title = 'Mass movement (dry)'
+ )$
+ interactive()
+
+chart_combined = (chart_disasters_1 | chart_disasters_2) & (chart_disasters_3 | chart_disasters_4)
+```
+
+
+
+
+
+
+{% include custom/series_vega-in-r_next.html %}
diff --git a/pages/vega-in-r/data-transformations.md b/pages/vega-in-r/data-transformations.md
new file mode 100644
index 0000000..4a13fe0
--- /dev/null
+++ b/pages/vega-in-r/data-transformations.md
@@ -0,0 +1,205 @@
+---
+title: Data Transform
+keywords: vega-in-r
+sidebar: vega-in-r_sidebar
+permalink: /vega-in-r-data-transformations.html
+folder: vega-in-r
+series: vega-in-r-series
+weight: 6
+---
+
+As mentioned in the [data transformations documentation](https://altair-viz.github.io/user_guide/transform/index.html) of altair, in most cases, it is suggested to perform transformations outside the chart definition, so in our case using R. Of course, data transforms inside the chart can also be useful in some cases.
+So far, we have been filtering the data in R and then using the modified data in the chart specification. Now, we use the `transform_filter()` to subset the data inside the chart. [Here](https://altair-viz.github.io/user_guide/transform/filter.html#user-guide-filter-transform) is the filter transfrom documentation. We make the linechart we have seen in a previous section using the code below:
+
+```R
+chart_disasters = alt$Chart("https://raw.githubusercontent.com/vega/vega-datasets/master/data/disasters.csv")$
+ mark_line()$
+ encode(
+ x = 'Year:Q',
+ y = 'Deaths:Q',
+ tooltip = c("Year", "Deaths")
+ )$
+ properties(
+ height = 300,
+ width = 600
+ )$
+ transform_filter(
+ alt$FieldEqualPredicate(field = "Entity", equal = "All natural disasters")
+ )
+```
+
+
+
+
+
+
+We use the field predicates to assess whether a data point satisfied certain conditions. As mentioned in the [field predicates reference](https://altair-viz.github.io/user_guide/transform/filter.html#field-predicates) the `FieldEqualPredicate` evaluates whether a field is equal to a particular value. The variable is the first argument and the condition is the second argument. Go through the field predicates altair documentation and [vega-lite documentation](https://vega.github.io/vega-lite/docs/predicate.html#field-predicate) and use the `FieldOneOfPredicate` for the exercise below.
+
+
+{:.exercise}
+**Exercise** - Use the filter transform to obtain the data related to volcanic activity and earthquake and make an area chart like the one below.
+
+
+
+
+
+
+We now also use the `transform_window()` for data transformation to compute and plot a windowed aggregation of the deaths over all available years. [Here](https://altair-viz.github.io/user_guide/transform/window.html#user-guide-window-transform) is the window transform documentation.
+
+
+```R
+chart_disasters = alt$Chart("https://raw.githubusercontent.com/vega/vega-datasets/master/data/disasters.csv")$
+ transform_window(
+ cumulative_count='sum(Deaths)'
+ )$
+ mark_area()$
+ encode(
+ x = 'Year:O',
+ y = 'cumulative_count:Q',
+ tooltip = c("Year:Q", 'cumulative_count:Q')
+ )$transform_filter(
+ alt$FieldEqualPredicate(field = "Entity", equal = "All natural disasters")
+ )$
+ properties(
+ height = 300,
+ width = 600
+ )
+```
+
+
+
+
+
+
+{% include custom/series_vega-in-r_next.html %}
diff --git a/pages/vega-in-r/faceted-chart.md b/pages/vega-in-r/faceted-chart.md
new file mode 100644
index 0000000..0c4b902
--- /dev/null
+++ b/pages/vega-in-r/faceted-chart.md
@@ -0,0 +1,7894 @@
+---
+title: Faceted chart
+keywords: vega-in-r
+sidebar: vega-in-r_sidebar
+permalink: /vega-in-r-faceted-chart.html
+folder: vega-in-r
+series: vega-in-r-series
+weight: 9
+---
+
+For faceting, we can use `facet` inside `$encode()`. The height and width we specify, refer to each individual plot.
+If we do not specify the number of columns `columns = 3` all individual charts are concatenated horizontally.
+We also see that with the `facet` function, a title of each chart is automatically displayed for each level of the variable we are faceting.
+
+```R
+chart_disasters = alt$Chart(data_source_modified)$
+ mark_circle(
+ opacity = 0.8,
+ size = 20
+ )$
+ encode(
+ x = 'Year:O',
+ y = 'Missing:N',
+ color = 'Missing:N',
+ facet = alt$Facet('Entity:N', columns = 3),
+ tooltip = "Year:Q"
+ )$
+ properties(
+ width = 180,
+ height = 90
+ )$
+ interactive()
+```
+
+
+
+
+
+
+
+{:.exercise}
+**Exercise** - Make a faceted chart for the time series per natural disaster.
+
+{:.exercise}
+**Exercise** - What is the problem with the chart made above and how could you remake it without using `facet`?
+
+
+{% include custom/series_vega-in-r_next.html %}
diff --git a/pages/vega-in-r/field-transform.md b/pages/vega-in-r/field-transform.md
new file mode 100644
index 0000000..6e5946a
--- /dev/null
+++ b/pages/vega-in-r/field-transform.md
@@ -0,0 +1,1103 @@
+---
+title: Field Transform
+keywords: vega-in-r
+sidebar: vega-in-r_sidebar
+permalink: /vega-in-r-field-transform.html
+folder: vega-in-r
+series: vega-in-r-series
+weight: 5
+---
+
+Since we are wokring in R, we can modify the data outside the plot specification and then use the modified dataset inside the plot encoding.
+However, using the altair package, calculations inside the plot specification can be sometimes easier. In this section, we are discussing field trasforms that can be done inside encoding.
+As we have seen from the beginning of this tutorial, the `encoding` determines the mapping between the channels and the data. We have already used encoding channels such as position channels `x` and `y` and mark property channels, for instance, `color` and `opacity`.
+We only need to add `bin = TRUE` in the `x` position channel of a quantitative field to use the binned version of the field in the plot.
+Below, there is the code to produce a barchart of the sum of deaths versus the binned years.
+
+```R
+data_source_subset = subset(data_source, data_source$Entity == "All natural disasters")
+
+chart_disasters = alt$Chart(data_source_subset)$
+ mark_bar()$
+ encode(
+ x = alt$X("Year:Q", bin = TRUE),
+ y = 'sum(Deaths):Q',
+ tooltip = 'sum(Deaths):Q'
+ )
+```
+
+
+
+
+
+
+Mind the difference in the syntax here. We used the long form `x = alt$X()`, we have seen in the simple barchart section, so that we can specify the binning inside encoding. Other adjustments can be related to scale or axis.
+
+
+
+{:.exercise}
+**Exercise** - Check the documentation of the binning parameters [https://altair-viz.github.io/user_guide/generated/core/altair.BinParams.html](https://altair-viz.github.io/user_guide/generated/core/altair.BinParams.html) and increase the value of the maximum number of bins.
+
+
+
+
+
+
+{:.exercise}
+**Exercise** - Using `data_source_subset = subset(data_source, data_source$Entity != "All natural disasters")` make a heatmap that shows the count of disasters per year, like the one below.
+
+
+
+
+
+
+
+
+Another filed transformation is the one that scales the original field domain to the custom range we specify.
+For instance, we can transform a quantitative field using the log scale, as we can see below.
+
+
+```R
+chart_disasters = alt$Chart("https://raw.githubusercontent.com/vega/vega-datasets/master/data/disasters.csv")$
+ mark_bar()$
+ encode(
+ x = 'Entity:N',
+ y = alt$Y('sum(Deaths):Q', scale=alt$Scale(type='log'))
+ )$
+ properties(
+ height = 300,
+ width = 600
+ )
+```
+
+
+
+
+
+
+Fortunately, not in all years from 1900 to 2017 all types of registered disasters occured. Did you notice that in 1904 there is no natural disaster registered?
+Let's enrich the dataset in R with a variable for missing values based on the year.
+
+```R
+data_source = read.csv(url("https://raw.githubusercontent.com/vega/vega-datasets/master/data/disasters.csv")) # original data
+Year = seq(1900, 2017, 1) # create year vector
+Entity = sort(rep(unique(data_source$Entity), 118)) # create entity vector
+data_mod = cbind.data.frame(Year, Entity) # create dataframe with complete set of year and entity
+data_source_modified = merge(data_source, data_mod, by = c("Year", "Entity"), all = T) # merge df with original data
+data_source_modified[is.na(data_source_modified$Deaths),"Deaths"] = 0 # replace NA with zero
+data_source_modified$Missing = NULL # create new variable
+data_source_modified[data_source_modified$Deaths == 0,"Missing"] = "1" # the value for missing
+data_source_modified[data_source_modified$Deaths != 0,"Missing"] = "0" # the value for non-missing
+str(data_source_modified) # look at the new data structure
+rm(Year, Entity, data_mod) # remove objects that are not needed
+```
+
+Now we can plot the full time series, and specify a custom color scale for the presence of absence of the year in the data.
+So, the domain of the data is `0` for Non-Missing, `1` for Missing and the custom range is the two colors of our preference, here black and red.
+
+```R
+domain_var = c("0", "1")
+range_color = c('black', 'red')
+range_size = c(50, 150)
+
+data_source_subset = subset(data_source_modified, data_source_modified$Entity == "All natural disasters")
+
+chart_disasters = alt$Chart(data_source_subset)$
+ mark_circle(
+ opacity = 0.8
+ )$
+ encode(
+ x = 'Year:O',
+ y = 'Deaths:Q',
+ color = alt$Color('Missing', scale = alt$Scale(domain = domain_var, range = range_color)),
+ size = alt$Size('Missing', scale = alt$Scale(domain = domain_var, range = range_size)),
+ tooltip = c("Year", "Deaths")
+ )$
+ properties(
+ height = 300,
+ width = 600
+ )$
+ interactive()
+```
+
+
+
+
+
+
+
+{% include custom/series_vega-in-r_next.html %}
diff --git a/pages/vega-in-r/installation.md b/pages/vega-in-r/installation.md
deleted file mode 100644
index c50f57c..0000000
--- a/pages/vega-in-r/installation.md
+++ /dev/null
@@ -1,84 +0,0 @@
----
-title: Installation
-keywords: vega-in-r
-sidebar: vega-in-r_sidebar
-permalink: /vega-in-r-installation.html
-folder: vega-in-r
-series: vega-in-r-series
-weight: 1
----
-We've now seen how to do brushing and linking across different plots. One of the typical use cases is the scatterplot matrix. Based on what we've seen above, we can already create this, just by adding specifications to the `concat` section.
-
-{:.exercise}
-**Exercise** - Create a scatterplot matrix of the features `Weight_in_lbs`, `Miles_per_Gallon` and `Acceleration` with linking and brushing as we did above.
-
-When doing the exercise, you'll notice that there is a lot of repetition, as the `selection`, `marks` and `encoding` are repeated for each plot. For this use case, vega-lite provides the `repeat` keyword. It allows you to extract the variable part of the specification into a separate array. When you do this, you'll have to put the `selection`, `marks` and `encoding` within a separate `spec` again.
-
-```json
-{
- "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
- "title": "Scatterplot matrix",
- "data": {
- "url": "https://raw.githubusercontent.com/vega/vega/master/docs/data/cars.json"
- },
- "repeat": {
- "column": [ "Weight_in_lbs", "Miles_per_Gallon", "Acceleration" ],
- "row": [ "Weight_in_lbs", "Miles_per_Gallon", "Acceleration" ]
- },
- "spec": {
- "selection": {
- "my_selection": {"type": "interval", "empty": "none"}
- },
- "mark": "circle",
- "encoding": {
- "x": {"field": {"repeat": "column"}, "type": "quantitative"},
- "y": {"field": {"repeat": "row"}, "type": "quantitative"},
- "color": {
- "condition": {
- "selection": "my_selection",
- "value": "red"
- },
- "value": "lightgrey"
- }
- }
- }
-}
-```
-
-This will give you this image. Try selecting a group of datapoints.
-
-
-
-
-
-{% include custom/series_vega-in-r_next.html %}
diff --git a/pages/vega-in-r/layered-chart.md b/pages/vega-in-r/layered-chart.md
new file mode 100644
index 0000000..6f8b153
--- /dev/null
+++ b/pages/vega-in-r/layered-chart.md
@@ -0,0 +1,8000 @@
+---
+title: Layered chart
+keywords: vega-in-r
+sidebar: vega-in-r_sidebar
+permalink: /vega-in-r-layered-chart.html
+folder: vega-in-r
+series: vega-in-r-series
+weight: 7
+---
+
+We are now looking at how we can combine charts in one canvas in altair R. This section on how to combine charts, is based on the [View Composition article](https://vegawidget.github.io/altair/articles/view-composition.html).
+
+First, we are discussing a layered chart example. Each chart can be made separately and combined uisng the `+` operator: `chart_layer_1 + chart_layer_2`.
+Below, we make a chart that consists of a line layer and a point layer. The tooltip should be added to the top layer so that it is visible in the final chart.
+
+```R
+chart_disasters_L1 = alt$Chart("https://raw.githubusercontent.com/vega/vega-datasets/master/data/disasters.csv")$
+ mark_line()$
+ encode(
+ x = 'Year:O',
+ y = 'Deaths:Q'
+ )$
+ transform_filter(
+ alt$FieldEqualPredicate(field = "Entity", equal = "All natural disasters")
+ )$
+ properties(
+ height = 400,
+ width = 600
+ )
+
+chart_disasters_L2 = alt$Chart("https://raw.githubusercontent.com/vega/vega-datasets/master/data/disasters.csv")$
+ mark_point()$
+ encode(
+ x = 'Year:O',
+ y = 'Deaths:Q',
+ tooltip = "Deaths:Q"
+ )$
+ transform_filter(
+ alt$FieldEqualPredicate(field = "Entity", equal = "All natural disasters")
+ )$
+ properties(
+ height = 400,
+ width = 600
+ )
+
+chart_disasters = (chart_disasters_L1 + chart_disasters_L2)
+```
+
+
+
+
+
+
+
+To produce the same chart we may also follow the procedure below.
+Use the R code provided above for `chart_disasters_L2` and then make the first layer using:
+
+```R
+chart_disasters_L1 = chart_disasters_L2$mark_line()
+```
+
+Then superimpose the charts as before:
+```R
+chart_disasters = (chart_disasters_L1 + chart_disasters_L2)
+```
+
+{:.exercise}
+**Exercise** - Make a layered chart, which consists of one layer for the bar mark and one for the text mark, to produce the chart below.
+
+
+
+
+
+
+
+{% include custom/series_vega-in-r_next.html %}
diff --git a/pages/vega-in-r/setting-things-up.md b/pages/vega-in-r/setting-things-up.md
new file mode 100644
index 0000000..41fcc35
--- /dev/null
+++ b/pages/vega-in-r/setting-things-up.md
@@ -0,0 +1,60 @@
+---
+title: Setting things up
+keywords: vega-in-r
+sidebar: vega-in-r_sidebar
+permalink: /vega-in-r-setting-things-up.html
+folder: vega-in-r
+series: vega-in-r-series
+weight: 1
+---
+
+To get this tutorial started, we need, first, to install anaconda, and second, activate an r-reticulate environment using conda. We also need to install vega_datasets using pip and finally, install the R packages reticulate and altair using install.packages() in Rstudio.
+Most of the steps described here are taken from [altair R installation](https://vegawidget.github.io/altair/articles/installation.html). Make sure you are using Python version 3.5 or higher to comply to the system requirements of the altair R package [altair CRAN](https://cran.r-project.org/web/packages/altair/altair.pdf).
+
+First, [install Anaconda](https://www.anaconda.com/distribution/) and after installing Anaconda, open the Anaconda Prompt.
+Update conda:
+``` C
+conda -V
+conda update conda
+````
+
+Install the vega datasets that we will be used in this tutorial:
+``` C
+pip install vega_datasets
+```
+
+Next, create and activate a conda environmnet called `r-reticulate`:
+``` C
+conda create -n r-reticulate
+conda activate r-reticulate
+```
+
+Open Rstudio IDE and install reticulate. Then, use the conda environment `r-reticulate`:
+``` R
+install.packages("reticulate")
+reticulate::use_condaenv("r-reticulate")
+```
+
+Restart Rstudio and then install the altair package:
+``` R
+install.packages("altair")
+```
+
+In Rstudio, use the code below to install the Python packages altair and vega_datasets:
+``` R
+altair::install_altair()
+```
+
+Verify the installation using:
+``` R
+altair::check_altair()
+```
+
+If there is no error on the verification, we are ready to start!
+
+The procedure described above should be run only in the beginning. The following times you want to use altair in Rstudio, you only need to call `library("altair")`.
+
+
+
+
+{% include custom/series_vega-in-r_next.html %}
diff --git a/pages/vega-in-r/simple-barchart.md b/pages/vega-in-r/simple-barchart.md
new file mode 100644
index 0000000..e6d8ba3
--- /dev/null
+++ b/pages/vega-in-r/simple-barchart.md
@@ -0,0 +1,193 @@
+---
+title: A simple barchart
+keywords: vega-in-r
+sidebar: vega-in-r_sidebar
+permalink: /vega-in-r-simple-barchart.html
+folder: vega-in-r
+series: vega-in-r-series
+weight: 2
+---
+Here is a very simple barchart defined in altair R.
+
+
+
+
+The dataset used for this chart is:
+
+```R
+Var1 = c("a","b","c","d","e")
+Var2 = c(11, 19, 22, 8, 14)
+Var3 = c("type1","type1","type2","type1","type2")
+dataset = data.frame(Var1, Var2, Var3)
+```
+
+and below is the code to generate it:
+
+
+```R
+chart_1 = alt$Chart(dataset)$
+ mark_bar()$
+ encode(
+ x = "Var1:O",
+ y = "Var2:Q"
+ )$
+ properties(
+ height=200,
+ width=400
+ )
+```
+
+What is the syntax in altair R? It is similar to the altair Python with the major difference the usage of the operator `$` to access attributes, instead of `.`. We should note that there are some other differences of the Python and the R package described at the [Field Guide to Python Issues](https://vegawidget.github.io/altair/articles/field-guide-python.html) together with examples. Below, are the most common properties of the chart syntax:
+- We first need to use the object `alt` to access the Altair API and create a chart using `alt$Chart`.
+- The `data` to be visualised is called inside the `alt$Chart`.
+- The `mark` used is specifed after `mark_`. Values as properties of the marks, for instance a hard-coded size or color, can be specified here.
+- The `encode` determines the mapping between the channels and the data fields. The encoding that is dependent on the fields is specified here, not the encoding that has to do with values of the marks. Here, `x` and `y` are the position channels. The field type is specified after the field name. `O` stands for ordinal and `Q` for quantitative. Other types are `N` for nominal, `T` for temporal and `G` for goejson. The `x = "Var1:O"` is the short form of `x = alt$X("Var1", type = "ordinal")`. The two forms are equivalent but the long form is used when doing more adjustments unside encoding. We will see an example in the field transform section.
+- The height and width of the plot is specified inside `properties`.
+
+For more detailed references in Altair classes and functions, we may look to the [API reference](https://altair-viz.github.io/user_guide/API.html).
+
+Now, to display the chart in Rstudio we may use `vegawidget(chart_1)` or `chart_1`. Alternatively, we can also save the chart using:
+```R
+htmlwidgets::saveWidget(vegawidget(chart_1),'chart_1.html')
+```
+and display it in the browser by opening the `chart_1.html` file.
+
+To examine the chart specification in R we can install the package listviewer using `install.packages("listviewer")` and use:
+```R
+vegawidget::vw_examine(chart_1, mode = "code")
+```
+The output is below:
+
+
+
+
+{:.exercise}
+**Exercise** - Make yourself comfortable with the basic syntax of the chart in the altair R. Use the color channel for `Var3` to make the chart below. Change the height and width of the panel.
+
+
+
+
+
+
+{:.exercise}
+**Exercise** - Visualise the same data, using a point as the mark, change the color for all points to black and visualise Var3 using size. Format the axes.
+
+
+
+{% include custom/series_vega-in-r_next.html %}
diff --git a/pages/vega-in-r/simple-interaction.md b/pages/vega-in-r/simple-interaction.md
new file mode 100644
index 0000000..ce49ff0
--- /dev/null
+++ b/pages/vega-in-r/simple-interaction.md
@@ -0,0 +1,191 @@
+---
+title: Simple Interaction
+keywords: vega-in-r
+sidebar: vega-in-r_sidebar
+permalink: /vega-in-r-simple-interaction.html
+folder: vega-in-r
+series: vega-in-r-series
+weight: 4
+---
+
+One of the main advantages to use the altair package is the fact that supports the generation of interactive graphics. The code required for adding a simple interaction is relatively short.
+
+## Tooltip
+
+A tooltip can be added to the plot using `tooltip()` inside `encode()` [altair R tooltips](https://vegawidget.github.io/altair/articles/tooltips.html). For one variable displayed in the tooltip we can use:
+
+```R
+...
+tooltip = "Variable_1:T"
+...
+```
+
+and for more than one variable, we can use the R function `list()` or `c()` as illustrated below:
+
+```R
+...
+tooltip = c("Variable_1:T", "Variable_2:T")
+...
+```
+
+Mind that if we are importing the data from a url directly in the plot specification, we may need to specify the field type. As shown above we may use "T" for the type, where "T" may be for instance `O` for orninal, `Q` for quantitative or `N` for nominal.
+We may also use the long form `alt$Tooltip(field = "Entity", type = "nominal")` and get the same result, or modify the tooltip specifying for instance a title, using `alt$Tooltip(field = "Entity", type = "nominal", title = "Disaster")`.
+
+
+
+
+{:.exercise}
+**Exercise** - Add a tooltip in the heatmap we created in the previous section, to get the graph illustrated above.
+
+
+## Zooming and Panning
+
+We illustrate two ways of making a graph zoomable and pannable. The first one is by adding the `intreactive()` attribute, as illustrated below:
+
+```R
+chart = alt$Chart(data_source_subset)$
+ .....
+ $interactive()
+```
+
+A second option is to specify the selection outside the plot code and then use it inside the `add_selection` attribute in the chart code.
+The second option is an interval selection using a scale binding. For more information on selection types supported in altair you can refer to [altair.selection_interval reference](https://altair-viz.github.io/user_guide/generated/api/altair.selection_interval.html#altair.selection_interval)
+
+```R
+selection = alt$selection_interval(bind='scales')
+
+chart = alt$Chart(data_source_subset)$
+.....
+$add_selection(
+ selection
+ )
+```
+
+
+
+
+
+{:.exercise}
+**Exercise** - Make the time series plot of all natural distasters interactive, to get the graph illustrated above. Use both ways of making it zoomable and pannable.
+
+
+{% include custom/series_vega-in-r_next.html %}
diff --git a/pages/vega-in-r/vega-in-r_landing_page.md b/pages/vega-in-r/vega-in-r_landing_page.md
new file mode 100644
index 0000000..c30c5d6
--- /dev/null
+++ b/pages/vega-in-r/vega-in-r_landing_page.md
@@ -0,0 +1,25 @@
+---
+title: Vega in R
+keywords: vega-in-r
+sidebar: vega-in-r_sidebar
+toc: false
+permalink: vega-in-r_landing_page.html
+folder: vega-in-r
+series: vega-in-r-series
+weight: 0
+---
+
+
+
+In this tutorial, we will look into how to make visualisations in R using the Altair interface to Vega-Lite.
+Altair in R uses the Reticulate framework to connect to Altair Python. While we go through this tutorial, please check the [altair R documentation](https://vegawidget.github.io/altair/index.html) as well as the [altair Python documentation](https://altair-viz.github.io/)
+
+Other useful sources are:
+- [vegawidget R documentation](https://vegawidget.github.io/vegawidget/index.html)
+- [R interface to Python](https://rstudio.github.io/reticulate/)
+- [vega-lite documentation](https://vega.github.io/vega-lite/docs/)
+
+
+For feedback or questions regararding the Vega in R tutorial, you may contact PhD candidate Danai Kafetzaki at danai.kafetzaki@kuleuven.be and Prof. Jan Aerts at jan.aerts@uhasselt.be.
+
+{% include custom/series_vega-in-r_next.html %}
\ No newline at end of file
diff --git a/pages/vega-in-r/widgets.md b/pages/vega-in-r/widgets.md
new file mode 100644
index 0000000..6f4cb3a
--- /dev/null
+++ b/pages/vega-in-r/widgets.md
@@ -0,0 +1,7343 @@
+---
+title: Using widgets for selection
+keywords: vega-in-r
+sidebar: vega-in-r_sidebar
+permalink: /vega-in-r-widgets.html
+folder: vega-in-r
+series: vega-in-r-series
+weight: 11
+---
+
+We have seen how to select datapoints with brushing and linking. We are now looking at how to select datapoints based on a variable, using widgets.
+In the example below, we make a layered time series chart in which we can select the natural disaster to be displayed form a dropdown list. In the default view, all time series are displayed.
+
+There are four steps to make this plot in altair R.
+- First, we make a list of the elements that will be included in the dropdown selection, using conventional R code. We make sure that the elements of the list match the names of the variable we want to filter.
+- Then, we create the chart, in the same way as we would make it if we have already filtered the data on one of the options included in the list above.
+- In the third step, we make a dynamic query for the dropdown menu. To do so, we create a single element selection `entities_select`. We specify the name of the field we want to filter in `fields = list()`. We use the `binding_select` to specify the input options for the dynamic query. Last, we give a name for the widget.
+- Finally, we modify the chart of step 2 by including the single selection we made in the previous step. We also include in the final chart a filter transform based on the dynamic query.
+
+```R
+# step 1
+entities = list("Drought", "Earthquake", "Epidemic", "Extreme temperature", "Extreme weather", "Flood", "Landslide", "Mass movement (dry)", "Volcanic activity", "Wildfire")
+
+# step 2
+chart_a = alt$Chart(data_source_modified_subset)$
+ mark_line()$
+ encode(
+ x = "Year:O",
+ y = "Deaths:Q",
+ tooltip = c("Year:N","Deaths:Q")
+ )$
+ properties(
+ height = 300,
+ width = 700
+ )
+
+chart_b = chart_a$mark_circle(size = 50)$encode(x = "Year:O", y = "Deaths:Q", color = "Missing:N")
+
+chart = chart_b + chart_a
+
+# step 3
+entities_select = alt$selection_single(
+ fields = list("Entity"),
+ bind = alt$binding_select(options = entities),
+ name = "Filter"
+ )
+
+# step 4
+chart_filter_entities = chart$
+ add_selection(entities_select)$
+ transform_filter(entities_select)
+```
+
+
+
+
+
+
+
+
+
+For more information you may refer to the [reference for selection_single](https://altair-viz.github.io/user_guide/generated/api/altair.selection_single.html) and to the [guide on binding](https://altair-viz.github.io/user_guide/interactions.html#binding-adding-data-driven-inputs)
+The [vega-lite documentation for selections](https://vega.github.io/vega-lite/docs/selection.html) may also be useful.
+
+
+
+{:.exercise}
+**Exercise** - Make a normalized stacked area chart of Deaths versus Year for `Epidemic`, `Extreme temperature`, `Extreme weather` and `Flood`. Include a radio button that allow you to highlight one type of disaster at a time. The end result should look like the chart below. Hint: Use `binding_radio`.
+
+
+
+
+
+
+
+{% include custom/series_vega-in-r_next.html %}
diff --git a/setting-things-up.md b/setting-things-up.md
new file mode 100644
index 0000000..41fcc35
--- /dev/null
+++ b/setting-things-up.md
@@ -0,0 +1,60 @@
+---
+title: Setting things up
+keywords: vega-in-r
+sidebar: vega-in-r_sidebar
+permalink: /vega-in-r-setting-things-up.html
+folder: vega-in-r
+series: vega-in-r-series
+weight: 1
+---
+
+To get this tutorial started, we need, first, to install anaconda, and second, activate an r-reticulate environment using conda. We also need to install vega_datasets using pip and finally, install the R packages reticulate and altair using install.packages() in Rstudio.
+Most of the steps described here are taken from [altair R installation](https://vegawidget.github.io/altair/articles/installation.html). Make sure you are using Python version 3.5 or higher to comply to the system requirements of the altair R package [altair CRAN](https://cran.r-project.org/web/packages/altair/altair.pdf).
+
+First, [install Anaconda](https://www.anaconda.com/distribution/) and after installing Anaconda, open the Anaconda Prompt.
+Update conda:
+``` C
+conda -V
+conda update conda
+````
+
+Install the vega datasets that we will be used in this tutorial:
+``` C
+pip install vega_datasets
+```
+
+Next, create and activate a conda environmnet called `r-reticulate`:
+``` C
+conda create -n r-reticulate
+conda activate r-reticulate
+```
+
+Open Rstudio IDE and install reticulate. Then, use the conda environment `r-reticulate`:
+``` R
+install.packages("reticulate")
+reticulate::use_condaenv("r-reticulate")
+```
+
+Restart Rstudio and then install the altair package:
+``` R
+install.packages("altair")
+```
+
+In Rstudio, use the code below to install the Python packages altair and vega_datasets:
+``` R
+altair::install_altair()
+```
+
+Verify the installation using:
+``` R
+altair::check_altair()
+```
+
+If there is no error on the verification, we are ready to start!
+
+The procedure described above should be run only in the beginning. The following times you want to use altair in Rstudio, you only need to call `library("altair")`.
+
+
+
+
+{% include custom/series_vega-in-r_next.html %}
diff --git a/simple-barchart.md b/simple-barchart.md
new file mode 100644
index 0000000..66c9167
--- /dev/null
+++ b/simple-barchart.md
@@ -0,0 +1,193 @@
+---
+title: A simple barchart
+keywords: vega-in-r
+sidebar: vega-in-r_sidebar
+permalink: /vega-in-r-simple-barchart.html
+folder: vega-in-r
+series: vega-in-r-series
+weight: 2
+---
+Here is a very simple barchart defined in altair R.
+
+
+
+
+The dataset used for this chart is:
+
+```R
+Var1 = c("a","b","c","d","e")
+Var2 = c(11, 19, 22, 8, 14)
+Var3 = c("type1","type1","type2","type1","type2")
+dataset = data.frame(Var1, Var2, Var3)
+```
+
+and below is the code to generate it:
+
+
+```R
+chart_1 = alt$Chart(dataset)$
+ mark_bar()$
+ encode(
+ x = "Var1:O",
+ y = "Var2:Q"
+ )$
+ properties(
+ height=200,
+ width=400
+ )
+```
+
+What is the syntax in altair R? It is similar to the altair Python with the major difference the usage of the operator `$` to access attributes, instead of `.`. We should note that there are some other differences of the Python and the R package described at the [Field Guide to Python Issues](https://vegawidget.github.io/altair/articles/field-guide-python.html) together with examples. Below, are the most common properties of the chart syntax:
+- We first need to use the object `alt` to access the Altair API and create a chart using `alt$Chart`.
+- The `data` to be visualised is called inside the `alt$Chart`.
+- The `mark` used is specifed after `mark_`. Values as properties of the marks, for instance a hard-coded size or color, can be specified here.
+- The `encode` determines the mapping between the channels and the data fields. The encoding that is dependent on the fields is specified here, not the encoding that has to do with values of the marks. Here, `x` and `y` are the position channels. The field type is specified after the field name. `O` stands for ordinal and `Q` for quantitative. Other types are `N` for nominal, `T` for temporal and `G` for goejson. The `x = "Var1:O"` is the short form of `x = alt$X("Var1", type = "ordinal")`. The two forms are equivalent but the long form is used when doing more adjustments unside encoding. We will see an example in the field transform section.
+- The height and width of the plot is specified inside `properties`.
+
+For more detailed references in Altair classes and functions, we may look to the [API reference](https://altair-viz.github.io/user_guide/API.html).
+
+Now, to display the chart in Rstudio we may use `vegawidget(chart_1)` or `chart_1`. Alternatively, we can also save the chart using:
+```R
+htmlwidgets::saveWidget(vegawidget(chart_1),'chart_1.html')
+```
+and display it in the browser by opening the `chart_1.html` file.
+
+To examine the chart specification in R we can install the package listviewer using `install.packages("listviewer")` and use:
+```R
+vegawidget::vw_examine(chart_1, mode = "code")
+```
+The output is below:
+
+
+
+
+{:.exercise}
+**Exercise** - Make yourself comfortable with the basic syntax of the chart in the altair R. Use the color channel for `Var3` to make the chart below. Change the height and width of the panel.
+
+
+
+
+
+
+{:.exercise}
+**Exercise** - Visualise the same data, using a point as the mark, change the color for all points to black and visualise Var3 using size. Format the axes.
+
+
+
+{% include custom/series_vega-in-r_next.html %}
diff --git a/simple-interaction.md b/simple-interaction.md
new file mode 100644
index 0000000..ce49ff0
--- /dev/null
+++ b/simple-interaction.md
@@ -0,0 +1,191 @@
+---
+title: Simple Interaction
+keywords: vega-in-r
+sidebar: vega-in-r_sidebar
+permalink: /vega-in-r-simple-interaction.html
+folder: vega-in-r
+series: vega-in-r-series
+weight: 4
+---
+
+One of the main advantages to use the altair package is the fact that supports the generation of interactive graphics. The code required for adding a simple interaction is relatively short.
+
+## Tooltip
+
+A tooltip can be added to the plot using `tooltip()` inside `encode()` [altair R tooltips](https://vegawidget.github.io/altair/articles/tooltips.html). For one variable displayed in the tooltip we can use:
+
+```R
+...
+tooltip = "Variable_1:T"
+...
+```
+
+and for more than one variable, we can use the R function `list()` or `c()` as illustrated below:
+
+```R
+...
+tooltip = c("Variable_1:T", "Variable_2:T")
+...
+```
+
+Mind that if we are importing the data from a url directly in the plot specification, we may need to specify the field type. As shown above we may use "T" for the type, where "T" may be for instance `O` for orninal, `Q` for quantitative or `N` for nominal.
+We may also use the long form `alt$Tooltip(field = "Entity", type = "nominal")` and get the same result, or modify the tooltip specifying for instance a title, using `alt$Tooltip(field = "Entity", type = "nominal", title = "Disaster")`.
+
+
+
+
+{:.exercise}
+**Exercise** - Add a tooltip in the heatmap we created in the previous section, to get the graph illustrated above.
+
+
+## Zooming and Panning
+
+We illustrate two ways of making a graph zoomable and pannable. The first one is by adding the `intreactive()` attribute, as illustrated below:
+
+```R
+chart = alt$Chart(data_source_subset)$
+ .....
+ $interactive()
+```
+
+A second option is to specify the selection outside the plot code and then use it inside the `add_selection` attribute in the chart code.
+The second option is an interval selection using a scale binding. For more information on selection types supported in altair you can refer to [altair.selection_interval reference](https://altair-viz.github.io/user_guide/generated/api/altair.selection_interval.html#altair.selection_interval)
+
+```R
+selection = alt$selection_interval(bind='scales')
+
+chart = alt$Chart(data_source_subset)$
+.....
+$add_selection(
+ selection
+ )
+```
+
+
+
+
+
+{:.exercise}
+**Exercise** - Make the time series plot of all natural distasters interactive, to get the graph illustrated above. Use both ways of making it zoomable and pannable.
+
+
+{% include custom/series_vega-in-r_next.html %}