Giving a Thematic Touch to your Interactive Chart

[This article was first published on Jkunst - R category, and kindly contributed to R-bloggers]. (You can report issue about the content on this page here)
Want to share your content on R-bloggers? click here if you have a blog, or here if you don't.

Preliminars

Usually (mainly at work) I made a chart and when I present it nobody cares
about the style, if the chart comes from an excel spreadsheet, paint or
intercative chart, or colors, labels, font, or things I like to care.
That’s sad for me but it’s fine: the data/history behind and how you present
it is what matters. And surely I’m overreacting.

But hey! That’s not implies you only must do always clean chart or tufte style plots.
Sometimes you can play with the topic of your chart and give some thematic touch.

The first example that come to my mind is the Iraq’s bloody toll visualization:

Iraq's bloody toll

So. We’ll use some resources to try:

  • Add some context of the topic before the viewer read something.
  • Hopefully keep in the viewer’s memory 🙂 in a gooood way.

Keeping the message intact, ie, don’t abuse adding many element so the user
don’t lose the main point of the chart.

The tools

<span class="n">library</span><span class="p">(</span><span class="n">tidyverse</span><span class="p">)</span><span class="w"> 
</span><span class="n">library</span><span class="p">(</span><span class="n">highcharter</span><span class="p">)</span><span class="w">
</span><span class="n">library</span><span class="p">(</span><span class="n">lubridate</span><span class="p">)</span><span class="w">
</span><span class="n">library</span><span class="p">(</span><span class="n">rvest</span><span class="p">)</span><span class="w">
</span><span class="n">library</span><span class="p">(</span><span class="n">janitor</span><span class="p">)</span><span class="w">
</span><span class="n">library</span><span class="p">(</span><span class="n">stringr</span><span class="p">)</span><span class="w">
</span><span class="n">library</span><span class="p">(</span><span class="n">jsonlite</span><span class="p">)</span><span class="w">
</span><span class="n">library</span><span class="p">(</span><span class="n">countrycode</span><span class="p">)</span><span class="w">
</span><span class="n">options</span><span class="p">(</span><span class="n">highcharter.debug</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kc">TRUE</span><span class="p">)</span><span class="w">
</span>

Example I: Oil Spills

We can reuse the bloody toll effect, using with Oil Spills data.

The ourworldindata.org website have
a descriptive study Max Roser.

Max Roser (2016) – ‘Oil Spills’. Published online at OurWorldInData.org.
Retrieved from: https://ourworldindata.org/oil-spills/ [Online Resource]

They start with:

Over the past 4 decades – the time for which we have data – oil spills
decreased dramatically. Although oil spills also happen on land,
marine oil spills are considered more serious as the spilled oil is less containable

Let’s load the data and make the basic chart.

<span class="n">json</span><span class="w"> </span><span class="o"><-</span><span class="w"> </span><span class="n">read_lines</span><span class="p">(</span><span class="s2">"https://ourworldindata.org/wp-content/uploads/nvd3/nvd3_multiBarChart_Oil/multiBarChart_Oil.html"</span><span class="p">)</span><span class="w">
</span><span class="n">json</span><span class="w"> </span><span class="o"><-</span><span class="w"> </span><span class="n">json</span><span class="p">[</span><span class="n">seq</span><span class="p">(</span><span class="w">
  </span><span class="n">which</span><span class="p">(</span><span class="n">str_detect</span><span class="p">(</span><span class="n">json</span><span class="p">,</span><span class="w"> </span><span class="s2">"var xxx"</span><span class="p">)),</span><span class="w">
  </span><span class="n">first</span><span class="p">(</span><span class="n">which</span><span class="p">(</span><span class="n">str_detect</span><span class="p">(</span><span class="n">json</span><span class="p">,</span><span class="w"> </span><span class="s2">"\\}\\]\\;"</span><span class="p">)))</span><span class="w">
</span><span class="p">)]</span><span class="w">

</span><span class="n">json</span><span class="w"> </span><span class="o"><-</span><span class="w"> </span><span class="n">fromJSON</span><span class="p">(</span><span class="n">str_replace_all</span><span class="p">(</span><span class="n">json</span><span class="p">,</span><span class="w"> </span><span class="s2">"var xxx = |;$"</span><span class="p">,</span><span class="w"> </span><span class="s2">""</span><span class="p">))</span><span class="w">
</span><span class="n">json</span><span class="w"> </span><span class="o"><-</span><span class="w"> </span><span class="n">transpose</span><span class="p">(</span><span class="n">json</span><span class="p">)</span><span class="w">

</span><span class="n">str</span><span class="p">(</span><span class="n">json</span><span class="p">)</span><span class="w">
</span>
## List of 2
##  $ :List of 2
##   ..$ values:'data.frame':	43 obs. of  2 variables:
##   .. ..$ x: num [1:43] 0.00 3.16e+10 6.31e+10 9.47e+10 1.26e+11 ...
##   .. ..$ y: int [1:43] 30 14 27 31 27 20 26 16 23 32 ...
##   ..$ key   : chr ">700 Tonnes"
##  $ :List of 2
##   ..$ values:'data.frame':	43 obs. of  2 variables:
##   .. ..$ x: num [1:43] 0.00 3.16e+10 6.31e+10 9.47e+10 1.26e+11 ...
##   .. ..$ y: int [1:43] 7 18 48 28 90 96 67 69 59 60 ...
##   ..$ key   : chr "7-700 Tonnes"
<span class="n">dspills</span><span class="w"> </span><span class="o"><-</span><span class="w"> </span><span class="n">map_df</span><span class="p">(</span><span class="n">json</span><span class="p">,</span><span class="w"> </span><span class="k">function</span><span class="p">(</span><span class="n">x</span><span class="p">)</span><span class="w"> </span><span class="p">{</span><span class="w">
  </span><span class="n">df</span><span class="w"> </span><span class="o"><-</span><span class="w"> </span><span class="n">as.data.frame</span><span class="p">(</span><span class="n">x</span><span class="p">[[</span><span class="s2">"values"</span><span class="p">]])</span><span class="w">
  </span><span class="n">df</span><span class="o">$</span><span class="n">key</span><span class="w"> </span><span class="o"><-</span><span class="w"> </span><span class="n">x</span><span class="p">[[</span><span class="s2">"key"</span><span class="p">]]</span><span class="w">
  </span><span class="n">tbl_df</span><span class="p">(</span><span class="n">df</span><span class="p">)</span><span class="w">
  </span><span class="n">df</span><span class="w">
</span><span class="p">})</span><span class="w">

</span><span class="n">glimpse</span><span class="p">(</span><span class="n">dspills</span><span class="p">)</span><span class="w">
</span>
## Observations: 86
## Variables: 3
## $ x   <dbl> 0.00e+00, 3.16e+10, 6.31e+10, 9.47e+10, 1.26e+11, 1.58e+11...
## $ y   <int> 30, 14, 27, 31, 27, 20, 26, 16, 23, 32, 13, 7, 4, 13, 8, 8...
## $ key <chr> ">700 Tonnes", ">700 Tonnes", ">700 Tonnes", ">700 Tonnes"...

The data is ready. So we can make an staked area chart. I used areaspline
here to make a liquid effect.

<span class="n">hcspills</span><span class="w"> </span><span class="o"><-</span><span class="w"> </span><span class="n">hchart</span><span class="p">(</span><span class="n">dspills</span><span class="p">,</span><span class="w"> </span><span class="s2">"areaspline"</span><span class="p">,</span><span class="w"> </span><span class="n">hcaes</span><span class="p">(</span><span class="n">x</span><span class="p">,</span><span class="w"> </span><span class="n">y</span><span class="p">,</span><span class="w"> </span><span class="n">group</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"key"</span><span class="p">))</span><span class="w"> </span><span class="o">%>%</span><span class="w"> 
  </span><span class="n">hc_plotOptions</span><span class="p">(</span><span class="n">series</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nf">list</span><span class="p">(</span><span class="n">stacking</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"normal"</span><span class="p">))</span><span class="w"> </span><span class="o">%>%</span><span class="w"> 
  </span><span class="n">hc_xAxis</span><span class="p">(</span><span class="n">type</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"datetime"</span><span class="p">)</span><span class="w"> </span><span class="o">%>%</span><span class="w"> 
  </span><span class="n">hc_title</span><span class="p">(</span><span class="n">text</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"Number of Oil Spills Over the Past 4 Decades"</span><span class="p">)</span><span class="w">
</span><span class="n">hcspills</span><span class="w">
</span>

open

Yay, the spills are decreasing over time. So we can do:

  • Add a deep sea background.
  • Reverse the yAxis to the give the fall effect.
  • Add a dark colors to simulate the oil.
  • Add the credits for give the serious (? 😉 ) touch.
<span class="n">hcspills2</span><span class="w"> </span><span class="o"><-</span><span class="w"> </span><span class="n">hcspills</span><span class="w"> </span><span class="o">%>%</span><span class="w"> 
  </span><span class="n">hc_colors</span><span class="p">(</span><span class="nf">c</span><span class="p">(</span><span class="s2">"#000000"</span><span class="p">,</span><span class="w"> </span><span class="s2">"#222222"</span><span class="p">))</span><span class="w"> </span><span class="o">%>%</span><span class="w"> 
  </span><span class="n">hc_title</span><span class="p">(</span><span class="w">
    </span><span class="n">align</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"left"</span><span class="p">,</span><span class="w">
    </span><span class="n">style</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nf">list</span><span class="p">(</span><span class="n">color</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"black"</span><span class="p">)</span><span class="w">
  </span><span class="p">)</span><span class="w"> </span><span class="o">%>%</span><span class="w"> 
  </span><span class="n">hc_credits</span><span class="p">(</span><span class="w">
    </span><span class="n">enabled</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kc">TRUE</span><span class="p">,</span><span class="w">
    </span><span class="n">text</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"Data from ITOPF.com"</span><span class="p">,</span><span class="w">
    </span><span class="n">href</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"http://www.itopf.com/knowledge-resources/data-statistics/statistics/"</span><span class="w">
  </span><span class="p">)</span><span class="w"> </span><span class="o">%>%</span><span class="w"> 
  </span><span class="n">hc_plotOptions</span><span class="p">(</span><span class="n">series</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nf">list</span><span class="p">(</span><span class="n">marker</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nf">list</span><span class="p">(</span><span class="n">enabled</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kc">FALSE</span><span class="p">)))</span><span class="w"> </span><span class="o">%>%</span><span class="w"> 
  </span><span class="n">hc_chart</span><span class="p">(</span><span class="w">
    </span><span class="n">divBackgroundImage</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"http://www.drodd.com/images14/ocean-wallpaper30.jpg"</span><span class="p">,</span><span class="w">
    </span><span class="n">backgroundColor</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">hex_to_rgba</span><span class="p">(</span><span class="s2">"white"</span><span class="p">,</span><span class="w"> </span><span class="m">0.50</span><span class="p">)</span><span class="w">
  </span><span class="p">)</span><span class="w"> </span><span class="o">%>%</span><span class="w"> 
  </span><span class="n">hc_tooltip</span><span class="p">(</span><span class="n">sort</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kc">TRUE</span><span class="p">,</span><span class="w"> </span><span class="n">table</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kc">TRUE</span><span class="p">)</span><span class="w"> </span><span class="o">%>%</span><span class="w"> 
  </span><span class="n">hc_legend</span><span class="p">(</span><span class="n">align</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"right"</span><span class="p">,</span><span class="w"> </span><span class="n">verticalAlign</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"top"</span><span class="p">,</span><span class="w">
            </span><span class="n">layout</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"horizontal"</span><span class="p">)</span><span class="w"> </span><span class="o">%>%</span><span class="w"> 
  </span><span class="n">hc_xAxis</span><span class="p">(</span><span class="n">opposite</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kc">TRUE</span><span class="p">,</span><span class="w"> </span><span class="n">gridLineWidth</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="m">0</span><span class="p">,</span><span class="w">
           </span><span class="n">title</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nf">list</span><span class="p">(</span><span class="n">text</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"Time"</span><span class="p">,</span><span class="w"> </span><span class="n">style</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nf">list</span><span class="p">(</span><span class="n">color</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"black"</span><span class="p">)),</span><span class="w">
           </span><span class="n">lineColor</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"black"</span><span class="p">,</span><span class="w"> </span><span class="n">tickColor</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"black"</span><span class="p">,</span><span class="w">
           </span><span class="n">labels</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nf">list</span><span class="p">(</span><span class="n">style</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nf">list</span><span class="p">(</span><span class="n">color</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"black"</span><span class="p">)))</span><span class="w"> </span><span class="o">%>%</span><span class="w"> 
  </span><span class="n">hc_yAxis</span><span class="p">(</span><span class="n">reversed</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kc">TRUE</span><span class="p">,</span><span class="w"> </span><span class="n">gridLineWidth</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="m">0</span><span class="p">,</span><span class="w"> </span><span class="n">lineWidth</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="m">1</span><span class="p">,</span><span class="w"> </span><span class="n">lineColor</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"black"</span><span class="p">,</span><span class="w">
           </span><span class="n">tickWidth</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="m">1</span><span class="p">,</span><span class="w"> </span><span class="n">tickLength</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="m">10</span><span class="p">,</span><span class="w"> </span><span class="n">tickColor</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"black"</span><span class="p">,</span><span class="w">
           </span><span class="n">title</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nf">list</span><span class="p">(</span><span class="n">text</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"Oil Spills"</span><span class="p">,</span><span class="w"> </span><span class="n">style</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nf">list</span><span class="p">(</span><span class="n">color</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"black"</span><span class="p">)),</span><span class="w">
           </span><span class="n">labels</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nf">list</span><span class="p">(</span><span class="n">style</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nf">list</span><span class="p">(</span><span class="n">color</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"black"</span><span class="p">)))</span><span class="w"> </span><span class="o">%>%</span><span class="w"> 
  </span><span class="n">hc_add_theme</span><span class="p">(</span><span class="n">hc_theme_elementary</span><span class="p">())</span><span class="w">

</span><span class="n">hcspills2</span><span class="w">
</span>

open

Example II: Winter Olympic Games

Here we will take the data and chart the participating nations over the
years.

<span class="n">tables</span><span class="w"> </span><span class="o"><-</span><span class="w"> </span><span class="n">read_html</span><span class="p">(</span><span class="s2">"https://en.wikipedia.org/wiki/Winter_Olympic_Games"</span><span class="p">)</span><span class="w"> </span><span class="o">%>%</span><span class="w"> 
  </span><span class="n">html_table</span><span class="p">(</span><span class="n">fill</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kc">TRUE</span><span class="p">)</span><span class="w">

</span><span class="n">dgames</span><span class="w"> </span><span class="o"><-</span><span class="w"> </span><span class="n">tables</span><span class="p">[[</span><span class="m">5</span><span class="p">]]</span><span class="w">
</span><span class="n">dgames</span><span class="w"> </span><span class="o"><-</span><span class="w"> </span><span class="n">clean_names</span><span class="p">(</span><span class="n">dgames</span><span class="p">)</span><span class="w">
</span><span class="n">dgames</span><span class="w"> </span><span class="o"><-</span><span class="w"> </span><span class="n">dmap_if</span><span class="p">(</span><span class="n">dgames</span><span class="p">,</span><span class="w"> </span><span class="n">is.character</span><span class="p">,</span><span class="w"> </span><span class="n">str_trim</span><span class="p">)</span><span class="w">

</span><span class="n">dgames</span><span class="w"> </span><span class="o"><-</span><span class="w"> </span><span class="n">dgames</span><span class="p">[</span><span class="m">-1</span><span class="p">,</span><span class="w"> </span><span class="p">]</span><span class="w">
</span><span class="n">dgames</span><span class="w"> </span><span class="o"><-</span><span class="w"> </span><span class="n">filter</span><span class="p">(</span><span class="n">dgames</span><span class="p">,</span><span class="w"> </span><span class="o">!</span><span class="n">games</span><span class="w"> </span><span class="o">%in%</span><span class="w"> </span><span class="nf">c</span><span class="p">(</span><span class="s2">"1940"</span><span class="p">,</span><span class="w"> </span><span class="s2">"1944"</span><span class="p">))</span><span class="w">
</span><span class="n">dgames</span><span class="w"> </span><span class="o"><-</span><span class="w"> </span><span class="n">filter</span><span class="p">(</span><span class="n">dgames</span><span class="p">,</span><span class="w"> </span><span class="o">!</span><span class="n">year</span><span class="w"> </span><span class="o">%in%</span><span class="w"> </span><span class="n">seq</span><span class="p">(</span><span class="m">2018</span><span class="p">,</span><span class="w"> </span><span class="n">by</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="m">4</span><span class="p">,</span><span class="w"> </span><span class="n">length.out</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="m">4</span><span class="p">))</span><span class="w">
</span>

Not sure how re-read data to get the right column types. So a dirty trick.

<span class="n">tf</span><span class="w"> </span><span class="o"><-</span><span class="w"> </span><span class="n">tempfile</span><span class="p">(</span><span class="n">fileext</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">".csv"</span><span class="p">)</span><span class="w">
</span><span class="n">write_csv</span><span class="p">(</span><span class="n">dgames</span><span class="p">,</span><span class="w"> </span><span class="n">tf</span><span class="p">)</span><span class="w">
</span><span class="n">dgames</span><span class="w"> </span><span class="o"><-</span><span class="w"> </span><span class="n">read_csv</span><span class="p">(</span><span class="n">tf</span><span class="p">)</span><span class="w">

</span><span class="n">dgames</span><span class="w"> </span><span class="o"><-</span><span class="w"> </span><span class="n">mutate</span><span class="p">(</span><span class="n">dgames</span><span class="p">,</span><span class="w">
                 </span><span class="n">nations</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">str_extract</span><span class="p">(</span><span class="n">nations</span><span class="p">,</span><span class="w"> </span><span class="s2">"\\d+"</span><span class="p">),</span><span class="w">
                 </span><span class="n">nations</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nf">as.numeric</span><span class="p">(</span><span class="n">nations</span><span class="p">))</span><span class="w">

</span><span class="n">glimpse</span><span class="p">(</span><span class="n">dgames</span><span class="p">)</span><span class="w">
</span>
## Observations: 22
## Variables: 14
## $ games         <chr> "I", "II", "III", "IV", "V", "VI", "VII", "VIII"...
## $ year          <int> 1924, 1928, 1932, 1936, 1948, 1952, 1956, 1960, ...
## $ host          <chr> "Chamonix, France", "St. Moritz, Switzerland", "...
## $ opened_by     <chr> "Undersecretary Gaston Vidal", "President Edmund...
## $ dates         <chr> "25 January – 5 February", "11–19 February", "4–...
## $ nations       <dbl> 16, 25, 17, 28, 28, 30, 32, 30, 36, 37, 35, 37, ...
## $ competitors   <int> 258, 464, 252, 646, 669, 694, 821, 665, 1091, 11...
## $ competitors_2 <int> 247, 438, 231, 566, 592, 585, 687, 521, 892, 947...
## $ competitors_3 <int> 11, 26, 21, 80, 77, 109, 134, 144, 199, 211, 205...
## $ sports        <int> 6, 4, 4, 4, 4, 4, 4, 4, 6, 6, 6, 6, 6, 6, 6, 6, ...
## $ disci_plines  <int> 9, 8, 7, 8, 9, 8, 8, 8, 10, 10, 10, 10, 10, 10, ...
## $ events        <int> 16, 14, 14, 17, 22, 22, 24, 27, 34, 35, 35, 37, ...
## $ top_nation    <chr> "Norway (NOR)", "Norway (NOR)", "United States (...
## $ ref           <chr> "[2]", "[3]", "[4]", "[5]", "[6]", "[7]", "[8]",...

Let’s see the first chart:

<span class="n">hcgames</span><span class="w"> </span><span class="o"><-</span><span class="w"> </span><span class="n">hchart</span><span class="p">(</span><span class="n">dgames</span><span class="p">,</span><span class="w"> </span><span class="s2">"areaspline"</span><span class="p">,</span><span class="w"> </span><span class="n">hcaes</span><span class="p">(</span><span class="n">year</span><span class="p">,</span><span class="w"> </span><span class="n">nations</span><span class="p">,</span><span class="w"> </span><span class="n">name</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">host</span><span class="p">),</span><span class="w"> </span><span class="n">name</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"Nations"</span><span class="p">)</span><span class="w"> </span><span class="o">%>%</span><span class="w"> 
  </span><span class="n">hc_title</span><span class="p">(</span><span class="n">text</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"Number of Participating Nations in every Winter Olympic Games"</span><span class="p">)</span><span class="w"> </span><span class="o">%>%</span><span class="w">
  </span><span class="n">hc_xAxis</span><span class="p">(</span><span class="n">title</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nf">list</span><span class="p">(</span><span class="n">text</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"Time"</span><span class="p">))</span><span class="w"> </span><span class="o">%>%</span><span class="w"> 
  </span><span class="n">hc_yAxis</span><span class="p">(</span><span class="n">title</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nf">list</span><span class="p">(</span><span class="n">text</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"Nations"</span><span class="p">))</span><span class="w">
  
</span><span class="n">hcgames</span><span class="w">
</span>

open

With that increase of nations in 1980 we can:

  • Use a white color to simulate a big snowed mountain.
  • Put a relevant background.
  • Put some flags for each host.
  • And work on the tooltip to show more information.
<span class="n">urlico</span><span class="w"> </span><span class="o"><-</span><span class="w"> </span><span class="s2">"url(https://raw.githubusercontent.com/tugmaks/flags/2d15d1870266cf5baefb912378ecfba418826a79/flags/flags-iso/flat/24/%s.png)"</span><span class="w">

</span><span class="n">dgames</span><span class="w"> </span><span class="o"><-</span><span class="w"> </span><span class="n">dgames</span><span class="w"> </span><span class="o">%>%</span><span class="w"> 
  </span><span class="n">mutate</span><span class="p">(</span><span class="n">country</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">str_extract</span><span class="p">(</span><span class="n">host</span><span class="p">,</span><span class="w"> </span><span class="s2">", .*$"</span><span class="p">),</span><span class="w">
         </span><span class="n">country</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">str_replace</span><span class="p">(</span><span class="n">country</span><span class="p">,</span><span class="w"> </span><span class="s2">", "</span><span class="p">,</span><span class="w"> </span><span class="s2">""</span><span class="p">),</span><span class="w">
         </span><span class="n">country</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">str_trim</span><span class="p">(</span><span class="n">country</span><span class="p">))</span><span class="w"> </span><span class="o">%>%</span><span class="w"> 
  </span><span class="n">mutate</span><span class="p">(</span><span class="n">countrycode</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">countrycode</span><span class="p">(</span><span class="n">country</span><span class="p">,</span><span class="w"> </span><span class="n">origin</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"country.name"</span><span class="p">,</span><span class="w"> </span><span class="n">destination</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"iso2c"</span><span class="p">))</span><span class="w"> </span><span class="o">%>%</span><span class="w"> 
  </span><span class="n">mutate</span><span class="p">(</span><span class="n">marker</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">sprintf</span><span class="p">(</span><span class="n">urlico</span><span class="p">,</span><span class="w"> </span><span class="n">countrycode</span><span class="p">),</span><span class="w">
         </span><span class="n">marker</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">map</span><span class="p">(</span><span class="n">marker</span><span class="p">,</span><span class="w"> </span><span class="k">function</span><span class="p">(</span><span class="n">x</span><span class="p">)</span><span class="w"> </span><span class="nf">list</span><span class="p">(</span><span class="n">symbol</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">x</span><span class="p">)),</span><span class="w">
         </span><span class="n">flagicon</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">sprintf</span><span class="p">(</span><span class="n">urlico</span><span class="p">,</span><span class="w"> </span><span class="n">countrycode</span><span class="p">),</span><span class="w">
         </span><span class="n">flagicon</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">str_replace_all</span><span class="p">(</span><span class="n">flagicon</span><span class="p">,</span><span class="w"> </span><span class="s2">"url\\(|\\)"</span><span class="p">,</span><span class="w"> </span><span class="s2">""</span><span class="p">))</span><span class="w"> </span><span class="o">%>%</span><span class="w"> 
  </span><span class="n">rename</span><span class="p">(</span><span class="n">men</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">competitors_2</span><span class="p">,</span><span class="w"> </span><span class="n">women</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">competitors_3</span><span class="p">)</span><span class="w">

</span><span class="n">glimpse</span><span class="p">(</span><span class="n">dgames</span><span class="p">)</span><span class="w">
</span>
## Observations: 22
## Variables: 18
## $ games        <chr> "I", "II", "III", "IV", "V", "VI", "VII", "VIII",...
## $ year         <int> 1924, 1928, 1932, 1936, 1948, 1952, 1956, 1960, 1...
## $ host         <chr> "Chamonix, France", "St. Moritz, Switzerland", "L...
## $ opened_by    <chr> "Undersecretary Gaston Vidal", "President Edmund ...
## $ dates        <chr> "25 January – 5 February", "11–19 February", "4–1...
## $ nations      <dbl> 16, 25, 17, 28, 28, 30, 32, 30, 36, 37, 35, 37, 3...
## $ competitors  <int> 258, 464, 252, 646, 669, 694, 821, 665, 1091, 115...
## $ men          <int> 247, 438, 231, 566, 592, 585, 687, 521, 892, 947,...
## $ women        <int> 11, 26, 21, 80, 77, 109, 134, 144, 199, 211, 205,...
## $ sports       <int> 6, 4, 4, 4, 4, 4, 4, 4, 6, 6, 6, 6, 6, 6, 6, 6, 6...
## $ disci_plines <int> 9, 8, 7, 8, 9, 8, 8, 8, 10, 10, 10, 10, 10, 10, 1...
## $ events       <int> 16, 14, 14, 17, 22, 22, 24, 27, 34, 35, 35, 37, 3...
## $ top_nation   <chr> "Norway (NOR)", "Norway (NOR)", "United States (U...
## $ ref          <chr> "[2]", "[3]", "[4]", "[5]", "[6]", "[7]", "[8]", ...
## $ country      <chr> "France", "Switzerland", "United States", "German...
## $ countrycode  <chr> "FR", "CH", "US", "DE", "CH", "NO", "IT", "US", "...
## $ marker       <list> ["url(https://raw.githubusercontent.com/tugmaks/...
## $ flagicon     <chr> "https://raw.githubusercontent.com/tugmaks/flags/...
<span class="n">urlimg</span><span class="w"> </span><span class="o"><-</span><span class="w"> </span><span class="s2">"http://jkunst.com/images/add-style/winter_olimpics.jpg"</span><span class="w">
</span><span class="n">ttvars</span><span class="w"> </span><span class="o"><-</span><span class="w"> </span><span class="nf">c</span><span class="p">(</span><span class="s2">"year"</span><span class="p">,</span><span class="w"> </span><span class="s2">"nations"</span><span class="p">,</span><span class="w"> </span><span class="s2">"sports"</span><span class="p">,</span><span class="w"> </span><span class="s2">"competitors"</span><span class="p">,</span><span class="w"> </span><span class="s2">"women"</span><span class="p">,</span><span class="w"> </span><span class="s2">"men"</span><span class="p">,</span><span class="w"> </span><span class="s2">"events"</span><span class="p">)</span><span class="w">
</span><span class="n">tt</span><span class="w"> </span><span class="o"><-</span><span class="w"> </span><span class="n">tooltip_table</span><span class="p">(</span><span class="w">
  </span><span class="n">ttvars</span><span class="p">,</span><span class="w">
  </span><span class="n">sprintf</span><span class="p">(</span><span class="s2">"{point.%s}"</span><span class="p">,</span><span class="w"> </span><span class="n">ttvars</span><span class="p">),</span><span class="w"> </span><span class="n">img</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">tags</span><span class="o">$</span><span class="n">img</span><span class="p">(</span><span class="n">src</span><span class="o">=</span><span class="s2">"{point.flagicon}"</span><span class="p">,</span><span class="w"> </span><span class="n">style</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"text-align: center;"</span><span class="p">)</span><span class="w">
</span><span class="p">)</span><span class="w">

</span><span class="n">hcgames2</span><span class="w"> </span><span class="o"><-</span><span class="w"> </span><span class="n">hchart</span><span class="p">(</span><span class="n">dgames</span><span class="p">,</span><span class="w"> </span><span class="s2">"areaspline"</span><span class="p">,</span><span class="w"> </span><span class="n">hcaes</span><span class="p">(</span><span class="n">year</span><span class="p">,</span><span class="w"> </span><span class="n">nations</span><span class="p">,</span><span class="w"> </span><span class="n">name</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">host</span><span class="p">),</span><span class="w"> </span><span class="n">name</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"Nations"</span><span class="p">)</span><span class="w"> </span><span class="o">%>%</span><span class="w"> 
  </span><span class="n">hc_colors</span><span class="p">(</span><span class="n">hex_to_rgba</span><span class="p">(</span><span class="s2">"white"</span><span class="p">,</span><span class="w"> </span><span class="m">0.8</span><span class="p">))</span><span class="w"> </span><span class="o">%>%</span><span class="w"> 
  </span><span class="n">hc_title</span><span class="p">(</span><span class="w">
    </span><span class="n">text</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"Number of Participating Nations in every Winter Olympic Games"</span><span class="p">,</span><span class="w">
    </span><span class="n">align</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"left"</span><span class="p">,</span><span class="w">
    </span><span class="n">style</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nf">list</span><span class="p">(</span><span class="n">color</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"white"</span><span class="p">)</span><span class="w">
  </span><span class="p">)</span><span class="w"> </span><span class="o">%>%</span><span class="w"> 
  </span><span class="n">hc_credits</span><span class="p">(</span><span class="w">
    </span><span class="n">enabled</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kc">TRUE</span><span class="p">,</span><span class="w">
    </span><span class="n">text</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"Data from Wipiedia"</span><span class="p">,</span><span class="w">
    </span><span class="n">href</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"https://en.wikipedia.org/wiki/Winter_Olympic_Games"</span><span class="w">
  </span><span class="p">)</span><span class="w"> </span><span class="o">%>%</span><span class="w"> 
  </span><span class="n">hc_xAxis</span><span class="p">(</span><span class="w">
    </span><span class="n">title</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nf">list</span><span class="p">(</span><span class="n">text</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"Time"</span><span class="p">,</span><span class="w"> </span><span class="n">style</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nf">list</span><span class="p">(</span><span class="n">color</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"white"</span><span class="p">)),</span><span class="w">
    </span><span class="n">gridLineWidth</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="m">0</span><span class="p">,</span><span class="w">
    </span><span class="n">labels</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nf">list</span><span class="p">(</span><span class="n">style</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nf">list</span><span class="p">(</span><span class="n">color</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"white"</span><span class="p">))</span><span class="w">
  </span><span class="p">)</span><span class="w"> </span><span class="o">%>%</span><span class="w"> 
  </span><span class="n">hc_yAxis</span><span class="p">(</span><span class="w">
    </span><span class="n">lineWidth</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="m">1</span><span class="p">,</span><span class="w">
    </span><span class="n">tickWidth</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="m">1</span><span class="p">,</span><span class="w">
    </span><span class="n">tickLength</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="m">10</span><span class="p">,</span><span class="w">
    </span><span class="n">title</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nf">list</span><span class="p">(</span><span class="n">text</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"Nations"</span><span class="p">,</span><span class="w"> </span><span class="n">style</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nf">list</span><span class="p">(</span><span class="n">color</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"white"</span><span class="p">)),</span><span class="w">
    </span><span class="n">gridLineWidth</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="m">0</span><span class="p">,</span><span class="w">
    </span><span class="n">labels</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nf">list</span><span class="p">(</span><span class="n">style</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nf">list</span><span class="p">(</span><span class="n">color</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"white"</span><span class="p">))</span><span class="w">
  </span><span class="p">)</span><span class="w"> </span><span class="o">%>%</span><span class="w"> 
  </span><span class="n">hc_chart</span><span class="p">(</span><span class="w">
    </span><span class="n">divBackgroundImage</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">urlimg</span><span class="p">,</span><span class="w">
    </span><span class="n">backgroundColor</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">hex_to_rgba</span><span class="p">(</span><span class="s2">"black"</span><span class="p">,</span><span class="w"> </span><span class="m">0.10</span><span class="p">)</span><span class="w">
    </span><span class="p">)</span><span class="w"> </span><span class="o">%>%</span><span class="w"> 
  </span><span class="n">hc_tooltip</span><span class="p">(</span><span class="w">
    </span><span class="n">headerFormat</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nf">as.character</span><span class="p">(</span><span class="n">tags</span><span class="o">$</span><span class="n">h</span><span class="m">4</span><span class="p">(</span><span class="s2">"{point.key}"</span><span class="p">,</span><span class="w"> </span><span class="n">tags</span><span class="o">$</span><span class="n">br</span><span class="p">())),</span><span class="w">
    </span><span class="n">pointFormat</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">tt</span><span class="p">,</span><span class="w">
    </span><span class="n">useHTML</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kc">TRUE</span><span class="p">,</span><span class="w">
    </span><span class="n">backgroundColor</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"transparent"</span><span class="p">,</span><span class="w">
    </span><span class="n">borderColor</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"transparent"</span><span class="p">,</span><span class="w">
    </span><span class="n">shadow</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kc">FALSE</span><span class="p">,</span><span class="w">
    </span><span class="n">style</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nf">list</span><span class="p">(</span><span class="n">color</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"white"</span><span class="p">,</span><span class="w"> </span><span class="n">fontSize</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"0.8em"</span><span class="p">,</span><span class="w"> </span><span class="n">fontWeight</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"normal"</span><span class="p">),</span><span class="w">
    </span><span class="n">positioner</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">JS</span><span class="p">(</span><span class="s2">"function () { return { x: this.chart.plotLeft + 15, y: this.chart.plotTop + 0 }; }"</span><span class="p">),</span><span class="w">
    </span><span class="n">shape</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"square"</span><span class="w">
  </span><span class="p">)</span><span class="w"> </span><span class="o">%>%</span><span class="w"> 
  </span><span class="n">hc_plotOptions</span><span class="p">(</span><span class="w">
    </span><span class="n">series</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nf">list</span><span class="p">(</span><span class="w">
      </span><span class="n">states</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nf">list</span><span class="p">(</span><span class="n">hover</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nf">list</span><span class="p">(</span><span class="n">halo</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nf">list</span><span class="p">(</span><span class="n">size</span><span class="w">  </span><span class="o">=</span><span class="w"> </span><span class="m">30</span><span class="p">)))</span><span class="w">
    </span><span class="p">)</span><span class="w">
  </span><span class="p">)</span><span class="w"> </span><span class="o">%>%</span><span class="w"> 
  </span><span class="n">hc_add_theme</span><span class="p">(</span><span class="n">hc_theme_elementary</span><span class="p">())</span><span class="w">

</span><span class="n">hcgames2</span><span class="w">
</span>

open

My Favorite Bonus

<span class="n">library</span><span class="p">(</span><span class="n">rwars</span><span class="p">)</span><span class="w">

</span><span class="n">swmovies</span><span class="w"> </span><span class="o"><-</span><span class="w"> </span><span class="n">get_all_films</span><span class="p">()</span><span class="w">

</span><span class="n">swdata</span><span class="w"> </span><span class="o"><-</span><span class="w"> </span><span class="n">map_df</span><span class="p">(</span><span class="n">swmovies</span><span class="o">$</span><span class="n">results</span><span class="p">,</span><span class="w"> </span><span class="k">function</span><span class="p">(</span><span class="n">x</span><span class="p">){</span><span class="w">
  </span><span class="n">data_frame</span><span class="p">(</span><span class="w">
    </span><span class="n">movie</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">x</span><span class="o">$</span><span class="n">title</span><span class="p">,</span><span class="w">
    </span><span class="n">species</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nf">length</span><span class="p">(</span><span class="n">x</span><span class="o">$</span><span class="n">species</span><span class="p">),</span><span class="w">
    </span><span class="n">planets</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nf">length</span><span class="p">(</span><span class="n">x</span><span class="o">$</span><span class="n">planets</span><span class="p">),</span><span class="w">
    </span><span class="n">characters</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nf">length</span><span class="p">(</span><span class="n">x</span><span class="o">$</span><span class="n">characters</span><span class="p">),</span><span class="w">
    </span><span class="n">vehicles</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nf">length</span><span class="p">(</span><span class="n">x</span><span class="o">$</span><span class="n">vehicles</span><span class="p">),</span><span class="w">
    </span><span class="n">release</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">x</span><span class="o">$</span><span class="n">release_date</span><span class="w">
  </span><span class="p">)</span><span class="w">
</span><span class="p">})</span><span class="w"> 

</span><span class="n">swdata</span><span class="w"> </span><span class="o"><-</span><span class="w"> </span><span class="n">gather</span><span class="p">(</span><span class="n">swdata</span><span class="p">,</span><span class="w"> </span><span class="n">key</span><span class="p">,</span><span class="w"> </span><span class="n">number</span><span class="p">,</span><span class="w"> </span><span class="o">-</span><span class="n">movie</span><span class="p">,</span><span class="w"> </span><span class="o">-</span><span class="n">release</span><span class="p">)</span><span class="w"> </span><span class="o">%>%</span><span class="w"> 
  </span><span class="n">arrange</span><span class="p">(</span><span class="n">release</span><span class="p">)</span><span class="w">

</span><span class="n">hchart</span><span class="p">(</span><span class="n">swdata</span><span class="p">,</span><span class="w"> </span><span class="s2">"line"</span><span class="p">,</span><span class="w"> </span><span class="n">hcaes</span><span class="p">(</span><span class="n">x</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">movie</span><span class="p">,</span><span class="w"> </span><span class="n">y</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">number</span><span class="p">,</span><span class="w"> </span><span class="n">group</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">key</span><span class="p">),</span><span class="w">
       </span><span class="n">color</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nf">c</span><span class="p">(</span><span class="s2">"#e5b13a"</span><span class="p">,</span><span class="w"> </span><span class="s2">"#4bd5ee"</span><span class="p">,</span><span class="w"> </span><span class="s2">"#4AA942"</span><span class="p">,</span><span class="w"> </span><span class="s2">"#FAFAFA"</span><span class="p">))</span><span class="w"> </span><span class="o">%>%</span><span class="w"> 
  </span><span class="n">hc_title</span><span class="p">(</span><span class="w">
    </span><span class="n">text</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"Diversity in <span style=\"color:#e5b13a\"> STAR WARS</span> movies"</span><span class="p">,</span><span class="w">
    </span><span class="n">useHTML</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kc">TRUE</span><span class="w">
  </span><span class="p">)</span><span class="w"> </span><span class="o">%>%</span><span class="w"> 
  </span><span class="n">hc_yAxis</span><span class="p">(</span><span class="n">gridLineColor</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"#666666"</span><span class="p">)</span><span class="w"> </span><span class="o">%>%</span><span class="w"> 
  </span><span class="n">hc_tooltip</span><span class="p">(</span><span class="n">table</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kc">TRUE</span><span class="p">,</span><span class="w"> </span><span class="n">sort</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kc">TRUE</span><span class="p">)</span><span class="w"> </span><span class="o">%>%</span><span class="w"> 
  </span><span class="n">hc_credits</span><span class="p">(</span><span class="w">
    </span><span class="n">enabled</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kc">TRUE</span><span class="p">,</span><span class="w">
    </span><span class="n">text</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"Source: SWAPI via rwars package"</span><span class="p">,</span><span class="w">
    </span><span class="n">href</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"https://swapi.co/"</span><span class="w">
  </span><span class="p">)</span><span class="w"> </span><span class="o">%>%</span><span class="w">
  </span><span class="n">hc_chart</span><span class="p">(</span><span class="w">
    </span><span class="n">backgroundColor</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">hex_to_rgba</span><span class="p">(</span><span class="s2">"black"</span><span class="p">,</span><span class="w"> </span><span class="s2">"0.2"</span><span class="p">),</span><span class="w">
    </span><span class="n">divBackgroundImage</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"http://www.wired.com/images_blogs/underwire/2013/02/xwing-bg.gif"</span><span class="w">
  </span><span class="p">)</span><span class="w"> </span><span class="o">%>%</span><span class="w"> 
  </span><span class="n">hc_add_theme</span><span class="p">(</span><span class="n">hc_theme_flatdark</span><span class="p">())</span><span class="w">
</span>

open

What do you think? I had fun, so for me this worth every background I used.

giphy gif source

To leave a comment for the author, please follow the link and comment on their blog: Jkunst - R category.

R-bloggers.com offers daily e-mail updates about R news and tutorials about learning R and many other topics. Click here if you're looking to post or find an R/data-science job.
Want to share your content on R-bloggers? click here if you have a blog, or here if you don't.

Never miss an update!
Subscribe to R-bloggers to receive
e-mails with the latest R posts.
(You will not see this message again.)

Click here to close (This popup will not appear again)