---
title: "Gapminder data using crosstalk"
output: 
  flexdashboard::flex_dashboard:
    orientation: rows
    theme: lumen
    source_code: embed
---

```{r setup, include=FALSE}

library(flexdashboard) ; library(crosstalk) ; library(dplyr); library(gapminder)
library(echarty)

conty <- unique(as.character(gapminder$continent))
sd <- gapminder |> filter(year==2007)
sd$country <- sub('Republic', 'Rep.', sd$country)
sd <- sd |> 
  mutate(country= as.character(country)) |> 
  mutate(country = case_when(
  country=="Cote d'Ivoire"	~"Côte d'Ivoire",
  country=='Slovak Republic'	~'Slovakia',
  country=='Korea, Dem. Rep.' ~'Dem. Rep. Korea',
  country=='Congo, Dem. Rep.' ~'Dem. Rep. Congo',
  country=='Congo, Rep.'	~'Congo',
  country=='Korea, Rep.'	~'Korea',
  TRUE ~country)) |>
  mutate(gdpPercap= round(gdpPercap), lifeExp= round(lifeExp)) |>
  mutate(numbas= match(continent, conty))    # scatter coloring

mm <- range(sd$lifeExp)
palet <- c('BlueViolet', '#75c165', '#ce5c5c', '#fbc357', 'CadetBlue')
sd <- SharedData$new(sd)
```

Inputs {.sidebar}
-----------------------------------------------------------------------

```{r}
filter_slider("life", "Life expectancy (years)", sd, column=~lifeExp)
filter_slider("gdp", "Income per person ($)", sd, column=~gdpPercap)
```

---


This [R Markdown](http://rmarkdown.rstudio.com/) document uses the [crosstalk](https://github.com/rstudio/crosstalk) R package to enable interactivity between different widgets that display the same [Gapminder](https://www.gapminder.org/data/) data.


**Credits**    

Original code and inspiration by [Henry Partridge](https://rpubs.com/rcatlord/gapminder_crosstalk_updated)

The following packages were used: 
[gapminder](https://cran.r-project.org/web/packages/gapminder/index.html),
[flexdashboard](https://cran.r-project.org/web/packages/flexdashboard/index.html), 
[dplyr](https://cran.r-project.org/web/packages/dplyr/index.html), 
[DT](https://cran.r-project.org/web/packages/DT/index.html), 
[echarty](https://cran.r-project.org/web/packages/echarty/index.html). 
  
  
<br />Demo for [echarty](https://github.com/helgasoft/echarty) by<br />
[![](https://helgasoft.com/img/logo.png){width=82px}](https://helgasoft.com)
<br />

Row {data-height=550}
-------------------------------------

###

```{r}
clabel <- 'black'
sd |> ec.init(load= 'world', title= list(subtext= 'data for 2007'),
  geo= list(map= "world", roam= TRUE, selectedMode= "multiple"
        ,itemStyle= list(opacity= 0.5)
        ,label= list(color= clabel)
        ,select= list(itemStyle= list(opacity= 1, color=NULL)
                      ,label= list(show=TRUE, color= clabel))
        ,emphasis= list(disabled= FALSE,
            label= list(show=TRUE, color= clabel),
            itemStyle= list(opacity= 1, color= NULL))
  ),
  visualMap= list(type= 'piecewise', 
	    inRange= list(color= palet),
	    outOfRange= list(color= 'Cornsilk'),
	    categories= conty, dimension= 2),   # R position of 'continent' column
  series= list(list(  
    type='map', selectedMode= 'multiple'
  ))
)

```

Row {data-height=450}
-------------------------------------

###

```{r}
sd |> ec.init( 
  grid= list(top= 10, bottom= 20, right='5%', left= '5%', containLabel=T), 
  xAxis= list(name="Income per person", nameGap= 0,
              nameTextStyle= list(align= 'right', verticalAlign= 'top', 
                                  padding= c(-20, 0, 0, 0))),
  yAxis= list(name="Life expectancy", scale=T, 
              nameTextStyle= list(verticalAlign='top'),
              nameRotate= 90, nameGap= -99),
  series= list(list(  
    symbolSize= 8, animation= FALSE,
    encode= list(x='gdpPercap', y= 'lifeExp', tooltip= 'country'),
    selectedMode= 'multiple', colorBy= 'data',
    select= list(itemStyle= list(color='magenta', borderColor='red', borderWidth=2)), 
    emphasis= list(focus='self', blurScope='series'),
    blur= list(itemStyle= list(opacity= 0.3))
  )),
  toolbox= list(feature= list(brush= list(show=TRUE))),
  brush= list(brushLink='all', throttleType= 'debounce', 
              brushStyle= list(borderColor= 'brown'), 
              outOfBrush= list(opacity= 0.3), inBrush= list(opacity= 1)),
  dataZoom = list(type='inside'),
  tooltip = list(show=TRUE)
)
```

###

```{r}
library(DT)
datatable(sd, rownames = FALSE, extensions = 'Scroller', 
          options = list(scrollY = 200, scroller = TRUE))
```