<p><div><div><div><div data-width="100" data-show-faces="false" data-send="true" data-layout="button_count" data-height="21" data-href="https://www.r-bloggers.com/giving-a-thematic-touch-to-your-interactive-chart/"></div></div><div></div></div><div></div></div>
<div>
(This article was first published on <strong><a href="http://jkunst.com/r/giving-a-thematic-touch-to-your-interactive-chart/"> Jkunst - R category</a></strong>, and kindly contributed to <a rel="nofollow" href="https://www.r-bloggers.com/">R-bloggers)</a> </div>
<h2>Preliminars</h2>
<p>Usually (mainly at work) I made a chart and when I present it nobody cares<br>
about the style, if the chart comes from an excel spreadsheet, paint or<br>
intercative chart, or colors, labels, font, or things I like to care.<br>
That’s sad for me but it’s fine: the data/history behind and how you present<br>
it is what matters. And surely I’m overreacting.</p>
<p>But hey! That’s not implies you only must do always clean chart or tufte style plots.<br>
Sometimes you can play with the topic of your chart and give some <em>thematic touch</em>.</p>
<p>The first example that come to my mind is the <em>Iraq’s bloody toll</em> visualization:</p>
<p><img alt="Iraq's bloody toll" src="https://i2.wp.com/cdn3.i-scmp.com/sites/default/files/styles/980w/public/2013/07/17/iraqdeaths.jpg?w=456" data-recalc-dims="1"></p>
<p>So. We’ll use some resources to try:</p>
<ul>
<li>Add some context of the topic before the viewer read something.</li>
<li>Hopefully keep in the viewer’s memory <img alt="🙂" class="wp-smiley" src="https://s.w.org/images/core/emoji/2/72x72/1f642.png"> in a <em>gooood</em> way.</li>
</ul>
<p>Keeping the message intact, ie, don’t abuse adding many element so the user<br>
don’t lose the main point of the chart.</p>
<h2>The tools</h2>
<div>
<pre><code><span>library</span><span>(</span><span>tidyverse</span><span>)</span><span> </span><span>library</span><span>(</span><span>highcharter</span><span>)</span><span>
</span><span>library</span><span>(</span><span>lubridate</span><span>)</span><span>
</span><span>library</span><span>(</span><span>rvest</span><span>)</span><span>
</span><span>library</span><span>(</span><span>janitor</span><span>)</span><span>
</span><span>library</span><span>(</span><span>stringr</span><span>)</span><span>
</span><span>library</span><span>(</span><span>jsonlite</span><span>)</span><span>
</span><span>library</span><span>(</span><span>countrycode</span><span>)</span><span>
</span><span>options</span><span>(</span><span>highcharter.debug</span><span> </span><span>=</span><span> </span><span>TRUE</span><span>)</span><span>
</span></code></pre>
</div>
<h2>Example I: Oil Spills</h2>
<p>We can reuse the <em>bloody toll</em> effect, using with <em>Oil Spills</em> data.</p>
<p>The <a target="_blank" rel="nofollow" href="https://ourworldindata.org/oil-spills/">ourworldindata.org</a> website have<br>
a descriptive study Max Roser.</p>
<blockquote>
<p>Max Roser (2016) – ‘Oil Spills’. Published online at OurWorldInData.org.<br>
Retrieved from: https://ourworldindata.org/oil-spills/ [Online Resource]</p>
</blockquote>
<p>They start with:</p>
<blockquote>
<p>Over the past 4 decades – the time for which we have data – oil spills<br>
decreased dramatically. Although oil spills also happen on land,<br>
marine oil spills are considered more serious as the spilled oil is less containable</p>
</blockquote>
<p>Let’s load the data and make the basic chart.</p>
<div>
<pre><code><span>json</span><span> </span><span>&lt;-</span><span> </span><span>read_lines</span><span>(</span><span>&quot;https://ourworldindata.org/wp-content/uploads/nvd3/nvd3_multiBarChart_Oil/multiBarChart_Oil.html&quot;</span><span>)</span><span>
</span><span>json</span><span> </span><span>&lt;-</span><span> </span><span>json</span><span>[</span><span>seq</span><span>(</span><span>
</span><span>which</span><span>(</span><span>str_detect</span><span>(</span><span>json</span><span>,</span><span> </span><span>&quot;var xxx&quot;</span><span>)),</span><span>
</span><span>first</span><span>(</span><span>which</span><span>(</span><span>str_detect</span><span>(</span><span>json</span><span>,</span><span> </span><span>&quot;\\}\\]\\;&quot;</span><span>)))</span><span>
</span><span>)]</span><span>
</span><span>json</span><span> </span><span>&lt;-</span><span> </span><span>fromJSON</span><span>(</span><span>str_replace_all</span><span>(</span><span>json</span><span>,</span><span> </span><span>&quot;var xxx = |;$&quot;</span><span>,</span><span> </span><span>&quot;&quot;</span><span>))</span><span>
</span><span>json</span><span> </span><span>&lt;-</span><span> </span><span>transpose</span><span>(</span><span>json</span><span>)</span><span>
</span><span>str</span><span>(</span><span>json</span><span>)</span><span>
</span></code></pre>
</div>
<div>
<pre><code>## 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 &quot;>700 Tonnes&quot;
##  $ :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 &quot;7-700 Tonnes&quot;
</code></pre>
</div>
<div>
<pre><code><span>dspills</span><span> </span><span>&lt;-</span><span> </span><span>map_df</span><span>(</span><span>json</span><span>,</span><span> </span><span>function</span><span>(</span><span>x</span><span>)</span><span> </span><span>{</span><span>
</span><span>df</span><span> </span><span>&lt;-</span><span> </span><span>as.data.frame</span><span>(</span><span>x</span><span>[[</span><span>&quot;values&quot;</span><span>]])</span><span>
</span><span>df</span><span>$</span><span>key</span><span> </span><span>&lt;-</span><span> </span><span>x</span><span>[[</span><span>&quot;key&quot;</span><span>]]</span><span>
</span><span>tbl_df</span><span>(</span><span>df</span><span>)</span><span>
</span><span>df</span><span>
</span><span>})</span><span>
</span><span>glimpse</span><span>(</span><span>dspills</span><span>)</span><span>
</span></code></pre>
</div>
<div>
<pre><code>## Observations: 86
## Variables: 3
## $ x   &lt;dbl> 0.00e+00, 3.16e+10, 6.31e+10, 9.47e+10, 1.26e+11, 1.58e+11...
## $ y   &lt;int> 30, 14, 27, 31, 27, 20, 26, 16, 23, 32, 13, 7, 4, 13, 8, 8...
## $ key &lt;chr> &quot;>700 Tonnes&quot;, &quot;>700 Tonnes&quot;, &quot;>700 Tonnes&quot;, &quot;>700 Tonnes&quot;...
</code></pre>
</div>
<p>The data is ready. So we can make an staked area chart. I used <em>areaspline</em><br>
here to make a <em>liquid</em> effect.</p>
<div>
<pre><code><span>hcspills</span><span> </span><span>&lt;-</span><span> </span><span>hchart</span><span>(</span><span>dspills</span><span>,</span><span> </span><span>&quot;areaspline&quot;</span><span>,</span><span> </span><span>hcaes</span><span>(</span><span>x</span><span>,</span><span> </span><span>y</span><span>,</span><span> </span><span>group</span><span> </span><span>=</span><span> </span><span>&quot;key&quot;</span><span>))</span><span> </span><span>%>%</span><span> </span><span>hc_plotOptions</span><span>(</span><span>series</span><span> </span><span>=</span><span> </span><span>list</span><span>(</span><span>stacking</span><span> </span><span>=</span><span> </span><span>&quot;normal&quot;</span><span>))</span><span> </span><span>%>%</span><span> </span><span>hc_xAxis</span><span>(</span><span>type</span><span> </span><span>=</span><span> </span><span>&quot;datetime&quot;</span><span>)</span><span> </span><span>%>%</span><span> </span><span>hc_title</span><span>(</span><span>text</span><span> </span><span>=</span><span> </span><span>&quot;Number of Oil Spills Over the Past 4 Decades&quot;</span><span>)</span><span>
</span><span>hcspills</span><span>
</span></code></pre>
</div>
<p><iframe src="http://jkunst.com/htmlwidgets/giving-a-thematic-touch-to-your-interactive-chart/highchart_lamygqn.html"></iframe></p>
<p><a target="_blank" rel="nofollow" href="http://jkunst.com/htmlwidgets/giving-a-thematic-touch-to-your-interactive-chart/highchart_lamygqn.html">open</a></p>
<p>Yay, the spills are decreasing over time. So we can do:</p>
<ul>
<li>Add a <em>deep sea</em> background.</li>
<li>Reverse the <code>yAxis</code> to the give the <em>fall</em> effect.</li>
<li>Add a dark colors to simulate the <em>oil</em>.</li>
<li>Add the credits for give the <em>serious</em> (? <img alt="😉" class="wp-smiley" src="https://s.w.org/images/core/emoji/2/72x72/1f609.png"> ) touch.</li>
</ul>
<div>
<pre><code><span>hcspills2</span><span> </span><span>&lt;-</span><span> </span><span>hcspills</span><span> </span><span>%>%</span><span> </span><span>hc_colors</span><span>(</span><span>c</span><span>(</span><span>&quot;#000000&quot;</span><span>,</span><span> </span><span>&quot;#222222&quot;</span><span>))</span><span> </span><span>%>%</span><span> </span><span>hc_title</span><span>(</span><span>
</span><span>align</span><span> </span><span>=</span><span> </span><span>&quot;left&quot;</span><span>,</span><span>
</span><span>style</span><span> </span><span>=</span><span> </span><span>list</span><span>(</span><span>color</span><span> </span><span>=</span><span> </span><span>&quot;black&quot;</span><span>)</span><span>
</span><span>)</span><span> </span><span>%>%</span><span> </span><span>hc_credits</span><span>(</span><span>
</span><span>enabled</span><span> </span><span>=</span><span> </span><span>TRUE</span><span>,</span><span>
</span><span>text</span><span> </span><span>=</span><span> </span><span>&quot;Data from ITOPF.com&quot;</span><span>,</span><span>
</span><span>href</span><span> </span><span>=</span><span> </span><span>&quot;http://www.itopf.com/knowledge-resources/data-statistics/statistics/&quot;</span><span>
</span><span>)</span><span> </span><span>%>%</span><span> </span><span>hc_plotOptions</span><span>(</span><span>series</span><span> </span><span>=</span><span> </span><span>list</span><span>(</span><span>marker</span><span> </span><span>=</span><span> </span><span>list</span><span>(</span><span>enabled</span><span> </span><span>=</span><span> </span><span>FALSE</span><span>)))</span><span> </span><span>%>%</span><span> </span><span>hc_chart</span><span>(</span><span>
</span><span>divBackgroundImage</span><span> </span><span>=</span><span> </span><span>&quot;http://www.drodd.com/images14/ocean-wallpaper30.jpg&quot;</span><span>,</span><span>
</span><span>backgroundColor</span><span> </span><span>=</span><span> </span><span>hex_to_rgba</span><span>(</span><span>&quot;white&quot;</span><span>,</span><span> </span><span>0.50</span><span>)</span><span>
</span><span>)</span><span> </span><span>%>%</span><span> </span><span>hc_tooltip</span><span>(</span><span>sort</span><span> </span><span>=</span><span> </span><span>TRUE</span><span>,</span><span> </span><span>table</span><span> </span><span>=</span><span> </span><span>TRUE</span><span>)</span><span> </span><span>%>%</span><span> </span><span>hc_legend</span><span>(</span><span>align</span><span> </span><span>=</span><span> </span><span>&quot;right&quot;</span><span>,</span><span> </span><span>verticalAlign</span><span> </span><span>=</span><span> </span><span>&quot;top&quot;</span><span>,</span><span>
</span><span>layout</span><span> </span><span>=</span><span> </span><span>&quot;horizontal&quot;</span><span>)</span><span> </span><span>%>%</span><span> </span><span>hc_xAxis</span><span>(</span><span>opposite</span><span> </span><span>=</span><span> </span><span>TRUE</span><span>,</span><span> </span><span>gridLineWidth</span><span> </span><span>=</span><span> </span><span>0</span><span>,</span><span>
</span><span>title</span><span> </span><span>=</span><span> </span><span>list</span><span>(</span><span>text</span><span> </span><span>=</span><span> </span><span>&quot;Time&quot;</span><span>,</span><span> </span><span>style</span><span> </span><span>=</span><span> </span><span>list</span><span>(</span><span>color</span><span> </span><span>=</span><span> </span><span>&quot;black&quot;</span><span>)),</span><span>
</span><span>lineColor</span><span> </span><span>=</span><span> </span><span>&quot;black&quot;</span><span>,</span><span> </span><span>tickColor</span><span> </span><span>=</span><span> </span><span>&quot;black&quot;</span><span>,</span><span>
</span><span>labels</span><span> </span><span>=</span><span> </span><span>list</span><span>(</span><span>style</span><span> </span><span>=</span><span> </span><span>list</span><span>(</span><span>color</span><span> </span><span>=</span><span> </span><span>&quot;black&quot;</span><span>)))</span><span> </span><span>%>%</span><span> </span><span>hc_yAxis</span><span>(</span><span>reversed</span><span> </span><span>=</span><span> </span><span>TRUE</span><span>,</span><span> </span><span>gridLineWidth</span><span> </span><span>=</span><span> </span><span>0</span><span>,</span><span> </span><span>lineWidth</span><span> </span><span>=</span><span> </span><span>1</span><span>,</span><span> </span><span>lineColor</span><span> </span><span>=</span><span> </span><span>&quot;black&quot;</span><span>,</span><span>
</span><span>tickWidth</span><span> </span><span>=</span><span> </span><span>1</span><span>,</span><span> </span><span>tickLength</span><span> </span><span>=</span><span> </span><span>10</span><span>,</span><span> </span><span>tickColor</span><span> </span><span>=</span><span> </span><span>&quot;black&quot;</span><span>,</span><span>
</span><span>title</span><span> </span><span>=</span><span> </span><span>list</span><span>(</span><span>text</span><span> </span><span>=</span><span> </span><span>&quot;Oil Spills&quot;</span><span>,</span><span> </span><span>style</span><span> </span><span>=</span><span> </span><span>list</span><span>(</span><span>color</span><span> </span><span>=</span><span> </span><span>&quot;black&quot;</span><span>)),</span><span>
</span><span>labels</span><span> </span><span>=</span><span> </span><span>list</span><span>(</span><span>style</span><span> </span><span>=</span><span> </span><span>list</span><span>(</span><span>color</span><span> </span><span>=</span><span> </span><span>&quot;black&quot;</span><span>)))</span><span> </span><span>%>%</span><span> </span><span>hc_add_theme</span><span>(</span><span>hc_theme_elementary</span><span>())</span><span>
</span><span>hcspills2</span><span>
</span></code></pre>
</div>
<p><iframe src="http://jkunst.com/htmlwidgets/giving-a-thematic-touch-to-your-interactive-chart/highchart_awoxmrp.html"></iframe></p>
<p><a target="_blank" rel="nofollow" href="http://jkunst.com/htmlwidgets/giving-a-thematic-touch-to-your-interactive-chart/highchart_awoxmrp.html">open</a></p>
<h2>Example II: Winter Olympic Games</h2>
<p>Here we will take the data and chart the participating nations over the<br>
years.</p>
<div>
<pre><code><span>tables</span><span> </span><span>&lt;-</span><span> </span><span>read_html</span><span>(</span><span>&quot;https://en.wikipedia.org/wiki/Winter_Olympic_Games&quot;</span><span>)</span><span> </span><span>%>%</span><span> </span><span>html_table</span><span>(</span><span>fill</span><span> </span><span>=</span><span> </span><span>TRUE</span><span>)</span><span>
</span><span>dgames</span><span> </span><span>&lt;-</span><span> </span><span>tables</span><span>[[</span><span>5</span><span>]]</span><span>
</span><span>dgames</span><span> </span><span>&lt;-</span><span> </span><span>clean_names</span><span>(</span><span>dgames</span><span>)</span><span>
</span><span>dgames</span><span> </span><span>&lt;-</span><span> </span><span>dmap_if</span><span>(</span><span>dgames</span><span>,</span><span> </span><span>is.character</span><span>,</span><span> </span><span>str_trim</span><span>)</span><span>
</span><span>dgames</span><span> </span><span>&lt;-</span><span> </span><span>dgames</span><span>[</span><span>-1</span><span>,</span><span> </span><span>]</span><span>
</span><span>dgames</span><span> </span><span>&lt;-</span><span> </span><span>filter</span><span>(</span><span>dgames</span><span>,</span><span> </span><span>!</span><span>games</span><span> </span><span>%in%</span><span> </span><span>c</span><span>(</span><span>&quot;1940&quot;</span><span>,</span><span> </span><span>&quot;1944&quot;</span><span>))</span><span>
</span><span>dgames</span><span> </span><span>&lt;-</span><span> </span><span>filter</span><span>(</span><span>dgames</span><span>,</span><span> </span><span>!</span><span>year</span><span> </span><span>%in%</span><span> </span><span>seq</span><span>(</span><span>2018</span><span>,</span><span> </span><span>by</span><span> </span><span>=</span><span> </span><span>4</span><span>,</span><span> </span><span>length.out</span><span> </span><span>=</span><span> </span><span>4</span><span>))</span><span>
</span></code></pre>
</div>
<p>Not sure how re-read data to get the right column types. So a dirty trick.</p>
<div>
<pre><code><span>tf</span><span> </span><span>&lt;-</span><span> </span><span>tempfile</span><span>(</span><span>fileext</span><span> </span><span>=</span><span> </span><span>&quot;.csv&quot;</span><span>)</span><span>
</span><span>write_csv</span><span>(</span><span>dgames</span><span>,</span><span> </span><span>tf</span><span>)</span><span>
</span><span>dgames</span><span> </span><span>&lt;-</span><span> </span><span>read_csv</span><span>(</span><span>tf</span><span>)</span><span>
</span><span>dgames</span><span> </span><span>&lt;-</span><span> </span><span>mutate</span><span>(</span><span>dgames</span><span>,</span><span>
</span><span>nations</span><span> </span><span>=</span><span> </span><span>str_extract</span><span>(</span><span>nations</span><span>,</span><span> </span><span>&quot;\\d+&quot;</span><span>),</span><span>
</span><span>nations</span><span> </span><span>=</span><span> </span><span>as.numeric</span><span>(</span><span>nations</span><span>))</span><span>
</span><span>glimpse</span><span>(</span><span>dgames</span><span>)</span><span>
</span></code></pre>
</div>
<div>
<pre><code>## Observations: 22
## Variables: 14
## $ games         &lt;chr> &quot;I&quot;, &quot;II&quot;, &quot;III&quot;, &quot;IV&quot;, &quot;V&quot;, &quot;VI&quot;, &quot;VII&quot;, &quot;VIII&quot;...
## $ year          &lt;int> 1924, 1928, 1932, 1936, 1948, 1952, 1956, 1960, ...
## $ host          &lt;chr> &quot;Chamonix, France&quot;, &quot;St. Moritz, Switzerland&quot;, &quot;...
## $ opened_by     &lt;chr> &quot;Undersecretary Gaston Vidal&quot;, &quot;President Edmund...
## $ dates         &lt;chr> &quot;25 January Â– 5 February&quot;, &quot;11Â–19 February&quot;, &quot;4Â–...
## $ nations       &lt;dbl> 16, 25, 17, 28, 28, 30, 32, 30, 36, 37, 35, 37, ...
## $ competitors   &lt;int> 258, 464, 252, 646, 669, 694, 821, 665, 1091, 11...
## $ competitors_2 &lt;int> 247, 438, 231, 566, 592, 585, 687, 521, 892, 947...
## $ competitors_3 &lt;int> 11, 26, 21, 80, 77, 109, 134, 144, 199, 211, 205...
## $ sports        &lt;int> 6, 4, 4, 4, 4, 4, 4, 4, 6, 6, 6, 6, 6, 6, 6, 6, ...
## $ disci_plines  &lt;int> 9, 8, 7, 8, 9, 8, 8, 8, 10, 10, 10, 10, 10, 10, ...
## $ events        &lt;int> 16, 14, 14, 17, 22, 22, 24, 27, 34, 35, 35, 37, ...
## $ top_nation    &lt;chr> &quot;NorwayÂ (NOR)&quot;, &quot;NorwayÂ (NOR)&quot;, &quot;United StatesÂ (...
## $ ref           &lt;chr> &quot;[2]&quot;, &quot;[3]&quot;, &quot;[4]&quot;, &quot;[5]&quot;, &quot;[6]&quot;, &quot;[7]&quot;, &quot;[8]&quot;,...
</code></pre>
</div>
<p>Let’s see the first chart:</p>
<div>
<pre><code><span>hcgames</span><span> </span><span>&lt;-</span><span> </span><span>hchart</span><span>(</span><span>dgames</span><span>,</span><span> </span><span>&quot;areaspline&quot;</span><span>,</span><span> </span><span>hcaes</span><span>(</span><span>year</span><span>,</span><span> </span><span>nations</span><span>,</span><span> </span><span>name</span><span> </span><span>=</span><span> </span><span>host</span><span>),</span><span> </span><span>name</span><span> </span><span>=</span><span> </span><span>&quot;Nations&quot;</span><span>)</span><span> </span><span>%>%</span><span> </span><span>hc_title</span><span>(</span><span>text</span><span> </span><span>=</span><span> </span><span>&quot;Number of Participating Nations in every Winter Olympic Games&quot;</span><span>)</span><span> </span><span>%>%</span><span>
</span><span>hc_xAxis</span><span>(</span><span>title</span><span> </span><span>=</span><span> </span><span>list</span><span>(</span><span>text</span><span> </span><span>=</span><span> </span><span>&quot;Time&quot;</span><span>))</span><span> </span><span>%>%</span><span> </span><span>hc_yAxis</span><span>(</span><span>title</span><span> </span><span>=</span><span> </span><span>list</span><span>(</span><span>text</span><span> </span><span>=</span><span> </span><span>&quot;Nations&quot;</span><span>))</span><span>
</span><span>hcgames</span><span>
</span></code></pre>
</div>
<p><iframe src="http://jkunst.com/htmlwidgets/giving-a-thematic-touch-to-your-interactive-chart/highchart_bsqvpfr.html"></iframe></p>
<p><a target="_blank" rel="nofollow" href="http://jkunst.com/htmlwidgets/giving-a-thematic-touch-to-your-interactive-chart/highchart_bsqvpfr.html">open</a></p>
<p>With that increase of nations in 1980 we can:</p>
<ul>
<li>Use a white color to simulate a big snowed mountain.</li>
<li>Put a relevant background.</li>
<li>Put some flags for each host.</li>
<li>And work on the tooltip to show more information.</li>
</ul>
<div>
<pre><code><span>urlico</span><span> </span><span>&lt;-</span><span> </span><span>&quot;url(https://raw.githubusercontent.com/tugmaks/flags/2d15d1870266cf5baefb912378ecfba418826a79/flags/flags-iso/flat/24/%s.png)&quot;</span><span>
</span><span>dgames</span><span> </span><span>&lt;-</span><span> </span><span>dgames</span><span> </span><span>%>%</span><span> </span><span>mutate</span><span>(</span><span>country</span><span> </span><span>=</span><span> </span><span>str_extract</span><span>(</span><span>host</span><span>,</span><span> </span><span>&quot;, .*$&quot;</span><span>),</span><span>
</span><span>country</span><span> </span><span>=</span><span> </span><span>str_replace</span><span>(</span><span>country</span><span>,</span><span> </span><span>&quot;, &quot;</span><span>,</span><span> </span><span>&quot;&quot;</span><span>),</span><span>
</span><span>country</span><span> </span><span>=</span><span> </span><span>str_trim</span><span>(</span><span>country</span><span>))</span><span> </span><span>%>%</span><span> </span><span>mutate</span><span>(</span><span>countrycode</span><span> </span><span>=</span><span> </span><span>countrycode</span><span>(</span><span>country</span><span>,</span><span> </span><span>origin</span><span> </span><span>=</span><span> </span><span>&quot;country.name&quot;</span><span>,</span><span> </span><span>destination</span><span> </span><span>=</span><span> </span><span>&quot;iso2c&quot;</span><span>))</span><span> </span><span>%>%</span><span> </span><span>mutate</span><span>(</span><span>marker</span><span> </span><span>=</span><span> </span><span>sprintf</span><span>(</span><span>urlico</span><span>,</span><span> </span><span>countrycode</span><span>),</span><span>
</span><span>marker</span><span> </span><span>=</span><span> </span><span>map</span><span>(</span><span>marker</span><span>,</span><span> </span><span>function</span><span>(</span><span>x</span><span>)</span><span> </span><span>list</span><span>(</span><span>symbol</span><span> </span><span>=</span><span> </span><span>x</span><span>)),</span><span>
</span><span>flagicon</span><span> </span><span>=</span><span> </span><span>sprintf</span><span>(</span><span>urlico</span><span>,</span><span> </span><span>countrycode</span><span>),</span><span>
</span><span>flagicon</span><span> </span><span>=</span><span> </span><span>str_replace_all</span><span>(</span><span>flagicon</span><span>,</span><span> </span><span>&quot;url\\(|\\)&quot;</span><span>,</span><span> </span><span>&quot;&quot;</span><span>))</span><span> </span><span>%>%</span><span> </span><span>rename</span><span>(</span><span>men</span><span> </span><span>=</span><span> </span><span>competitors_2</span><span>,</span><span> </span><span>women</span><span> </span><span>=</span><span> </span><span>competitors_3</span><span>)</span><span>
</span><span>glimpse</span><span>(</span><span>dgames</span><span>)</span><span>
</span></code></pre>
</div>
<div>
<pre><code>## Observations: 22
## Variables: 18
## $ games        &lt;chr> &quot;I&quot;, &quot;II&quot;, &quot;III&quot;, &quot;IV&quot;, &quot;V&quot;, &quot;VI&quot;, &quot;VII&quot;, &quot;VIII&quot;,...
## $ year         &lt;int> 1924, 1928, 1932, 1936, 1948, 1952, 1956, 1960, 1...
## $ host         &lt;chr> &quot;Chamonix, France&quot;, &quot;St. Moritz, Switzerland&quot;, &quot;L...
## $ opened_by    &lt;chr> &quot;Undersecretary Gaston Vidal&quot;, &quot;President Edmund ...
## $ dates        &lt;chr> &quot;25 January Â– 5 February&quot;, &quot;11Â–19 February&quot;, &quot;4Â–1...
## $ nations      &lt;dbl> 16, 25, 17, 28, 28, 30, 32, 30, 36, 37, 35, 37, 3...
## $ competitors  &lt;int> 258, 464, 252, 646, 669, 694, 821, 665, 1091, 115...
## $ men          &lt;int> 247, 438, 231, 566, 592, 585, 687, 521, 892, 947,...
## $ women        &lt;int> 11, 26, 21, 80, 77, 109, 134, 144, 199, 211, 205,...
## $ sports       &lt;int> 6, 4, 4, 4, 4, 4, 4, 4, 6, 6, 6, 6, 6, 6, 6, 6, 6...
## $ disci_plines &lt;int> 9, 8, 7, 8, 9, 8, 8, 8, 10, 10, 10, 10, 10, 10, 1...
## $ events       &lt;int> 16, 14, 14, 17, 22, 22, 24, 27, 34, 35, 35, 37, 3...
## $ top_nation   &lt;chr> &quot;NorwayÂ (NOR)&quot;, &quot;NorwayÂ (NOR)&quot;, &quot;United StatesÂ (U...
## $ ref          &lt;chr> &quot;[2]&quot;, &quot;[3]&quot;, &quot;[4]&quot;, &quot;[5]&quot;, &quot;[6]&quot;, &quot;[7]&quot;, &quot;[8]&quot;, ...
## $ country      &lt;chr> &quot;France&quot;, &quot;Switzerland&quot;, &quot;United States&quot;, &quot;German...
## $ countrycode  &lt;chr> &quot;FR&quot;, &quot;CH&quot;, &quot;US&quot;, &quot;DE&quot;, &quot;CH&quot;, &quot;NO&quot;, &quot;IT&quot;, &quot;US&quot;, &quot;...
## $ marker       &lt;list> [&quot;url(https://raw.githubusercontent.com/tugmaks/...
## $ flagicon     &lt;chr> &quot;https://raw.githubusercontent.com/tugmaks/flags/...
</code></pre>
</div>
<div>
<pre><code><span>urlimg</span><span> </span><span>&lt;-</span><span> </span><span>&quot;http://jkunst.com/images/add-style/winter_olimpics.jpg&quot;</span><span>
</span><span>ttvars</span><span> </span><span>&lt;-</span><span> </span><span>c</span><span>(</span><span>&quot;year&quot;</span><span>,</span><span> </span><span>&quot;nations&quot;</span><span>,</span><span> </span><span>&quot;sports&quot;</span><span>,</span><span> </span><span>&quot;competitors&quot;</span><span>,</span><span> </span><span>&quot;women&quot;</span><span>,</span><span> </span><span>&quot;men&quot;</span><span>,</span><span> </span><span>&quot;events&quot;</span><span>)</span><span>
</span><span>tt</span><span> </span><span>&lt;-</span><span> </span><span>tooltip_table</span><span>(</span><span>
</span><span>ttvars</span><span>,</span><span>
</span><span>sprintf</span><span>(</span><span>&quot;{point.%s}&quot;</span><span>,</span><span> </span><span>ttvars</span><span>),</span><span> </span><span>img</span><span> </span><span>=</span><span> </span><span>tags</span><span>$</span><span>img</span><span>(</span><span>src</span><span>=</span><span>&quot;{point.flagicon}&quot;</span><span>,</span><span> </span><span>style</span><span> </span><span>=</span><span> </span><span>&quot;text-align: center;&quot;</span><span>)</span><span>
</span><span>)</span><span>
</span><span>hcgames2</span><span> </span><span>&lt;-</span><span> </span><span>hchart</span><span>(</span><span>dgames</span><span>,</span><span> </span><span>&quot;areaspline&quot;</span><span>,</span><span> </span><span>hcaes</span><span>(</span><span>year</span><span>,</span><span> </span><span>nations</span><span>,</span><span> </span><span>name</span><span> </span><span>=</span><span> </span><span>host</span><span>),</span><span> </span><span>name</span><span> </span><span>=</span><span> </span><span>&quot;Nations&quot;</span><span>)</span><span> </span><span>%>%</span><span> </span><span>hc_colors</span><span>(</span><span>hex_to_rgba</span><span>(</span><span>&quot;white&quot;</span><span>,</span><span> </span><span>0.8</span><span>))</span><span> </span><span>%>%</span><span> </span><span>hc_title</span><span>(</span><span>
</span><span>text</span><span> </span><span>=</span><span> </span><span>&quot;Number of Participating Nations in every Winter Olympic Games&quot;</span><span>,</span><span>
</span><span>align</span><span> </span><span>=</span><span> </span><span>&quot;left&quot;</span><span>,</span><span>
</span><span>style</span><span> </span><span>=</span><span> </span><span>list</span><span>(</span><span>color</span><span> </span><span>=</span><span> </span><span>&quot;white&quot;</span><span>)</span><span>
</span><span>)</span><span> </span><span>%>%</span><span> </span><span>hc_credits</span><span>(</span><span>
</span><span>enabled</span><span> </span><span>=</span><span> </span><span>TRUE</span><span>,</span><span>
</span><span>text</span><span> </span><span>=</span><span> </span><span>&quot;Data from Wipiedia&quot;</span><span>,</span><span>
</span><span>href</span><span> </span><span>=</span><span> </span><span>&quot;https://en.wikipedia.org/wiki/Winter_Olympic_Games&quot;</span><span>
</span><span>)</span><span> </span><span>%>%</span><span> </span><span>hc_xAxis</span><span>(</span><span>
</span><span>title</span><span> </span><span>=</span><span> </span><span>list</span><span>(</span><span>text</span><span> </span><span>=</span><span> </span><span>&quot;Time&quot;</span><span>,</span><span> </span><span>style</span><span> </span><span>=</span><span> </span><span>list</span><span>(</span><span>color</span><span> </span><span>=</span><span> </span><span>&quot;white&quot;</span><span>)),</span><span>
</span><span>gridLineWidth</span><span> </span><span>=</span><span> </span><span>0</span><span>,</span><span>
</span><span>labels</span><span> </span><span>=</span><span> </span><span>list</span><span>(</span><span>style</span><span> </span><span>=</span><span> </span><span>list</span><span>(</span><span>color</span><span> </span><span>=</span><span> </span><span>&quot;white&quot;</span><span>))</span><span>
</span><span>)</span><span> </span><span>%>%</span><span> </span><span>hc_yAxis</span><span>(</span><span>
</span><span>lineWidth</span><span> </span><span>=</span><span> </span><span>1</span><span>,</span><span>
</span><span>tickWidth</span><span> </span><span>=</span><span> </span><span>1</span><span>,</span><span>
</span><span>tickLength</span><span> </span><span>=</span><span> </span><span>10</span><span>,</span><span>
</span><span>title</span><span> </span><span>=</span><span> </span><span>list</span><span>(</span><span>text</span><span> </span><span>=</span><span> </span><span>&quot;Nations&quot;</span><span>,</span><span> </span><span>style</span><span> </span><span>=</span><span> </span><span>list</span><span>(</span><span>color</span><span> </span><span>=</span><span> </span><span>&quot;white&quot;</span><span>)),</span><span>
</span><span>gridLineWidth</span><span> </span><span>=</span><span> </span><span>0</span><span>,</span><span>
</span><span>labels</span><span> </span><span>=</span><span> </span><span>list</span><span>(</span><span>style</span><span> </span><span>=</span><span> </span><span>list</span><span>(</span><span>color</span><span> </span><span>=</span><span> </span><span>&quot;white&quot;</span><span>))</span><span>
</span><span>)</span><span> </span><span>%>%</span><span> </span><span>hc_chart</span><span>(</span><span>
</span><span>divBackgroundImage</span><span> </span><span>=</span><span> </span><span>urlimg</span><span>,</span><span>
</span><span>backgroundColor</span><span> </span><span>=</span><span> </span><span>hex_to_rgba</span><span>(</span><span>&quot;black&quot;</span><span>,</span><span> </span><span>0.10</span><span>)</span><span>
</span><span>)</span><span> </span><span>%>%</span><span> </span><span>hc_tooltip</span><span>(</span><span>
</span><span>headerFormat</span><span> </span><span>=</span><span> </span><span>as.character</span><span>(</span><span>tags</span><span>$</span><span>h</span><span>4</span><span>(</span><span>&quot;{point.key}&quot;</span><span>,</span><span> </span><span>tags</span><span>$</span><span>br</span><span>())),</span><span>
</span><span>pointFormat</span><span> </span><span>=</span><span> </span><span>tt</span><span>,</span><span>
</span><span>useHTML</span><span> </span><span>=</span><span> </span><span>TRUE</span><span>,</span><span>
</span><span>backgroundColor</span><span> </span><span>=</span><span> </span><span>&quot;transparent&quot;</span><span>,</span><span>
</span><span>borderColor</span><span> </span><span>=</span><span> </span><span>&quot;transparent&quot;</span><span>,</span><span>
</span><span>shadow</span><span> </span><span>=</span><span> </span><span>FALSE</span><span>,</span><span>
</span><span>style</span><span> </span><span>=</span><span> </span><span>list</span><span>(</span><span>color</span><span> </span><span>=</span><span> </span><span>&quot;white&quot;</span><span>,</span><span> </span><span>fontSize</span><span> </span><span>=</span><span> </span><span>&quot;0.8em&quot;</span><span>,</span><span> </span><span>fontWeight</span><span> </span><span>=</span><span> </span><span>&quot;normal&quot;</span><span>),</span><span>
</span><span>positioner</span><span> </span><span>=</span><span> </span><span>JS</span><span>(</span><span>&quot;function () { return { x: this.chart.plotLeft + 15, y: this.chart.plotTop + 0 }; }&quot;</span><span>),</span><span>
</span><span>shape</span><span> </span><span>=</span><span> </span><span>&quot;square&quot;</span><span>
</span><span>)</span><span> </span><span>%>%</span><span> </span><span>hc_plotOptions</span><span>(</span><span>
</span><span>series</span><span> </span><span>=</span><span> </span><span>list</span><span>(</span><span>
</span><span>states</span><span> </span><span>=</span><span> </span><span>list</span><span>(</span><span>hover</span><span> </span><span>=</span><span> </span><span>list</span><span>(</span><span>halo</span><span> </span><span>=</span><span> </span><span>list</span><span>(</span><span>size</span><span> </span><span>=</span><span> </span><span>30</span><span>)))</span><span>
</span><span>)</span><span>
</span><span>)</span><span> </span><span>%>%</span><span> </span><span>hc_add_theme</span><span>(</span><span>hc_theme_elementary</span><span>())</span><span>
</span><span>hcgames2</span><span>
</span></code></pre>
</div>
<p><iframe src="http://jkunst.com/htmlwidgets/giving-a-thematic-touch-to-your-interactive-chart/highchart_xezfvur.html"></iframe></p>
<p><a target="_blank" rel="nofollow" href="http://jkunst.com/htmlwidgets/giving-a-thematic-touch-to-your-interactive-chart/highchart_xezfvur.html">open</a></p>
<h2>My Favorite Bonus</h2>
<div>
<pre><code><span>library</span><span>(</span><span>rwars</span><span>)</span><span>
</span><span>swmovies</span><span> </span><span>&lt;-</span><span> </span><span>get_all_films</span><span>()</span><span>
</span><span>swdata</span><span> </span><span>&lt;-</span><span> </span><span>map_df</span><span>(</span><span>swmovies</span><span>$</span><span>results</span><span>,</span><span> </span><span>function</span><span>(</span><span>x</span><span>){</span><span>
</span><span>data_frame</span><span>(</span><span>
</span><span>movie</span><span> </span><span>=</span><span> </span><span>x</span><span>$</span><span>title</span><span>,</span><span>
</span><span>species</span><span> </span><span>=</span><span> </span><span>length</span><span>(</span><span>x</span><span>$</span><span>species</span><span>),</span><span>
</span><span>planets</span><span> </span><span>=</span><span> </span><span>length</span><span>(</span><span>x</span><span>$</span><span>planets</span><span>),</span><span>
</span><span>characters</span><span> </span><span>=</span><span> </span><span>length</span><span>(</span><span>x</span><span>$</span><span>characters</span><span>),</span><span>
</span><span>vehicles</span><span> </span><span>=</span><span> </span><span>length</span><span>(</span><span>x</span><span>$</span><span>vehicles</span><span>),</span><span>
</span><span>release</span><span> </span><span>=</span><span> </span><span>x</span><span>$</span><span>release_date</span><span>
</span><span>)</span><span>
</span><span>})</span><span> </span><span>swdata</span><span> </span><span>&lt;-</span><span> </span><span>gather</span><span>(</span><span>swdata</span><span>,</span><span> </span><span>key</span><span>,</span><span> </span><span>number</span><span>,</span><span> </span><span>-</span><span>movie</span><span>,</span><span> </span><span>-</span><span>release</span><span>)</span><span> </span><span>%>%</span><span> </span><span>arrange</span><span>(</span><span>release</span><span>)</span><span>
</span><span>hchart</span><span>(</span><span>swdata</span><span>,</span><span> </span><span>&quot;line&quot;</span><span>,</span><span> </span><span>hcaes</span><span>(</span><span>x</span><span> </span><span>=</span><span> </span><span>movie</span><span>,</span><span> </span><span>y</span><span> </span><span>=</span><span> </span><span>number</span><span>,</span><span> </span><span>group</span><span> </span><span>=</span><span> </span><span>key</span><span>),</span><span>
</span><span>color</span><span> </span><span>=</span><span> </span><span>c</span><span>(</span><span>&quot;#e5b13a&quot;</span><span>,</span><span> </span><span>&quot;#4bd5ee&quot;</span><span>,</span><span> </span><span>&quot;#4AA942&quot;</span><span>,</span><span> </span><span>&quot;#FAFAFA&quot;</span><span>))</span><span> </span><span>%>%</span><span> </span><span>hc_title</span><span>(</span><span>
</span><span>text</span><span> </span><span>=</span><span> </span><span>&quot;Diversity in &lt;span style=\&quot;color:#e5b13a\&quot;> STAR WARS&lt;/span> movies&quot;</span><span>,</span><span>
</span><span>useHTML</span><span> </span><span>=</span><span> </span><span>TRUE</span><span>
</span><span>)</span><span> </span><span>%>%</span><span> </span><span>hc_yAxis</span><span>(</span><span>gridLineColor</span><span> </span><span>=</span><span> </span><span>&quot;#666666&quot;</span><span>)</span><span> </span><span>%>%</span><span> </span><span>hc_tooltip</span><span>(</span><span>table</span><span> </span><span>=</span><span> </span><span>TRUE</span><span>,</span><span> </span><span>sort</span><span> </span><span>=</span><span> </span><span>TRUE</span><span>)</span><span> </span><span>%>%</span><span> </span><span>hc_credits</span><span>(</span><span>
</span><span>enabled</span><span> </span><span>=</span><span> </span><span>TRUE</span><span>,</span><span>
</span><span>text</span><span> </span><span>=</span><span> </span><span>&quot;Source: SWAPI via rwars package&quot;</span><span>,</span><span>
</span><span>href</span><span> </span><span>=</span><span> </span><span>&quot;https://swapi.co/&quot;</span><span>
</span><span>)</span><span> </span><span>%>%</span><span>
</span><span>hc_chart</span><span>(</span><span>
</span><span>backgroundColor</span><span> </span><span>=</span><span> </span><span>hex_to_rgba</span><span>(</span><span>&quot;black&quot;</span><span>,</span><span> </span><span>&quot;0.2&quot;</span><span>),</span><span>
</span><span>divBackgroundImage</span><span> </span><span>=</span><span> </span><span>&quot;http://www.wired.com/images_blogs/underwire/2013/02/xwing-bg.gif&quot;</span><span>
</span><span>)</span><span> </span><span>%>%</span><span> </span><span>hc_add_theme</span><span>(</span><span>hc_theme_flatdark</span><span>())</span><span>
</span></code></pre>
</div>
<p><iframe src="http://jkunst.com/htmlwidgets/giving-a-thematic-touch-to-your-interactive-chart/highchart_lurjewm.html"></iframe></p>
<p><a target="_blank" rel="nofollow" href="http://jkunst.com/htmlwidgets/giving-a-thematic-touch-to-your-interactive-chart/highchart_lurjewm.html">open</a></p>
<p>What do you think? I had fun, so for me this worth every background I used.</p>
<p><img alt="giphy gif" src="https://i1.wp.com/media.giphy.com/media/HLhJ9g20qAR0I/giphy.gif?w=456&ssl=1" data-recalc-dims="1"> <a target="_blank" rel="nofollow" href="https://www.youtube.com/watch?v=dByCkxXQxoI">source</a></p>
<p>
<div>
<div>To <strong>leave a comment</strong> for the author, please follow the link and comment on their blog: <strong><a href="http://jkunst.com/r/giving-a-thematic-touch-to-your-interactive-chart/"> Jkunst - R category</a></strong>.</div>
<hr>
<a rel="nofollow" href="https://www.r-bloggers.com/">R-bloggers.com</a> offers <strong><a rel="nofollow" href="https://feedburner.google.com/fb/a/mailverify?uri=RBloggers">daily e-mail updates</a></strong> about <a title="The R Project for Statistical Computing" rel="nofollow" href="https://www.r-project.org/">R</a> news and <a title="R tutorials" rel="nofollow" href="https://www.r-bloggers.com/search/tutorial">tutorials</a> on topics such as: <a title="Data science" rel="nofollow" href="https://www.r-bloggers.com/search/data%20science">Data science</a>, <a title="Big Data" rel="nofollow" href="https://www.r-bloggers.com/search/Big%20Data">Big Data, <a title="R jobs" rel="nofollow" href="https://www.r-users.com/">R jobs</a>, visualization (<a title="ggplot and ggplot2 tutorials" rel="nofollow" href="https://www.r-bloggers.com/search/ggplot2">ggplot2</a>, <a title="Boxplots using lattice and ggplot2 tutorials" rel="nofollow" href="https://www.r-bloggers.com/search/boxplot">Boxplots</a>, <a title="Maps and gis" rel="nofollow" href="https://www.r-bloggers.com/search/map">maps</a>, <a title="Animation in R" rel="nofollow" href="https://www.r-bloggers.com/search/animation">animation</a>), programming (<a title="RStudio IDE for R" rel="nofollow" href="https://www.r-bloggers.com/search/RStudio">RStudio</a>, <a title="Sweave and literate programming" rel="nofollow" href="https://www.r-bloggers.com/search/sweave">Sweave</a>, <a title="LaTeX in R" rel="nofollow" href="https://www.r-bloggers.com/search/LaTeX">LaTeX</a>, <a title="SQL and databases" rel="nofollow" href="https://www.r-bloggers.com/search/SQL">SQL</a>, <a title="Eclipse IDE for R" rel="nofollow" href="https://www.r-bloggers.com/search/eclipse">Eclipse</a>, <a title="git and github, Version Control System" rel="nofollow" href="https://www.r-bloggers.com/search/git">git</a>, <a title="Large data in R using Hadoop" rel="nofollow" href="https://www.r-bloggers.com/search/hadoop">hadoop</a>, <a title="Web Scraping of google, facebook, yahoo, twitter and more using R" rel="nofollow" href="https://www.r-bloggers.com/search/Web+Scraping">Web Scraping</a>) statistics (<a title="Regressions and ANOVA analysis tutorials" rel="nofollow" href="https://www.r-bloggers.com/search/regression">regression</a>, <a title="principal component analysis tutorial" rel="nofollow" href="https://www.r-bloggers.com/search/PCA">PCA</a>, <a title="Time series" rel="nofollow" href="https://www.r-bloggers.com/search/time+series">time series</a>, <a title="finance trading" rel="nofollow" href="https://www.r-bloggers.com/search/trading">trading</a>) and more...
<img height="1" alt="" width="1" src="http://feeds.feedburner.com/~r/RBloggers/~4/edkt2HyA8tw"></a></div>