<p><div><div><div><div data-width="100" data-show-faces="false" data-send="true" data-layout="button_count" data-height="21" data-href="http://www.r-bloggers.com/case-study-animation-and-others-vizs/"></div></div><div><a data-url="http://www.r-bloggers.com/case-study-animation-and-others-vizs/" data-counturl="http://www.r-bloggers.com/case-study-animation-and-others-vizs/" data-count="horizontal" data-text="Case Study: Animation and Others Vizs" class="twitter-share-button" data-via="rbloggers" href="https://twitter.com/share"></a></div><div></div></div><div></div></div>
<div>
(This article was first published on <strong><a href="http://jkunst.com/r/case-study-animation-and-others-vizs/"> Jkunst - R category</a></strong>, and kindly contributed to <a rel="nofollow" href="http://www.r-bloggers.com/">R-bloggers)</a> </div>
<p>This post will be about if we can show some data in other ways to <strong>try</strong> to<br>
tell more clearly the <strong>Oh! <em>Foo!</em> is this rly happening?</strong> story.</p>
<p>Time time ago an gif appears showing the change of the global temperatures<br>
over time.</p>
<p><img width="350px" src="https://i.kinja-img.com/gawker-media/image/upload/s--sy8MLJrE--/c_scale,fl_progressive,q_80,w_800/oo0q9awrmmsctypfh6yb.gif"></p>
<p>Well, some sites like http://gizmodo.com/ made a reference to this animation<br>
as <a target="_blank" href="http://gizmodo.com/one-of-the-most-convincing-climate-change-visualization-1775743779">one-of-the-most-convincing-climate-change-visualization</a>.<br>
Mmmm… ok! A kind of <em>click bait</em> IMHO but at least the title saids visualization :B. But for me the<br>
animation don’t work <strong>always</strong>. I rembember a quote, sadly I don’t rember the author, maybe/surely was<br>
Alberto Cairo (If you know it please tell me who was):</p>
<blockquote>
<p>Animation force the user to compare what they see with what they remember (saw).</p>
</blockquote>
<p>If you want it in Yoda’s way:</p>
<p><img width="400px" src="https://i.imgflip.com/16a5b7.jpg"></p>
<p>Other thing I don’t like so much about this spiral is there’are so much data<br>
overlaped at the end of animation hiding information about the speed of increment<br>
in the data.</p>
<h2>Data &amp; Packages</h2>
<p>We’ll use the data provide by <a target="_blank" href="https://twitter.com/hrbrmstr">hrbrmstr</a> in his<br>
<a target="_blank" href="https://github.com/hrbrmstr/hadcrut">repo</a>.<br>
Bob Rudis made a beautiful representation of the data via ggplot2 and D3 using a<br>
<code>geom_segment</code>/column range viz.</p>
<p>About the packages. Here we’ll use a lot of <code>dplyr</code>, <code>tidyr</code>, <code>purrr</code> for the data manipulation,<br>
for the colors we’ll use <code>viridis</code>, lastly I’ll use <a target="_blank" href="http://jkunst.com/r/case-study-animation-and-others-vizs/jkunst.com/highcharter"><code>highcharter</code></a><br>
for charts</p>
<div>
<pre><code><span>library</span><span>(</span><span>&quot;highcharter&quot;</span><span>)</span>
<span>library</span><span>(</span><span>&quot;readr&quot;</span><span>)</span>
<span>library</span><span>(</span><span>&quot;dplyr&quot;</span><span>)</span>
<span>library</span><span>(</span><span>&quot;tidyr&quot;</span><span>)</span>
<span>library</span><span>(</span><span>&quot;lubridate&quot;</span><span>)</span>
<span>library</span><span>(</span><span>&quot;purrr&quot;</span><span>)</span>
<span>library</span><span>(</span><span>&quot;viridis&quot;</span><span>)</span>

<span>options</span><span>(</span>
  <span>highcharter.theme</span> <span>=</span> <span>hc_theme_darkunica</span><span>(</span>
    <span>chart</span>  <span>=</span> <span>list</span><span>(</span>
      <span>style</span> <span>=</span> <span>list</span><span>(</span><span>fontFamily</span> <span>=</span> <span>&quot;Roboto Condensed&quot;</span><span>),</span>
      <span>backgroundColor</span> <span>=</span> <span>&quot;#323331&quot;</span>
      <span>),</span>
    <span>yAxis</span> <span>=</span> <span>list</span><span>(</span>
      <span>gridLineColor</span> <span>=</span> <span>&quot;#B71C1C&quot;</span><span>,</span>
      <span>labels</span> <span>=</span> <span>list</span><span>(</span><span>format</span> <span>=</span> <span>&quot;{value} C&quot;</span><span>,</span> <span>useHTML</span> <span>=</span> <span>TRUE</span><span>)</span>
    <span>),</span>
    <span>plotOptions</span> <span>=</span> <span>list</span><span>(</span><span>series</span> <span>=</span> <span>list</span><span>(</span><span>showInLegend</span> <span>=</span> <span>FALSE</span><span>))</span>
  <span>)</span>
<span>)</span>

<span>df</span> <span>&lt;-</span> <span>read_csv</span><span>(</span><span>&quot;https://raw.githubusercontent.com/hrbrmstr/hadcrut/master/data/temps.csv&quot;</span><span>)</span>

<span>df</span> <span>&lt;-</span> <span>df</span> <span>%>%</span> 
  <span>mutate</span><span>(</span><span>date</span> <span>=</span> <span>ymd</span><span>(</span><span>year_mon</span><span>),</span>
         <span>tmpstmp</span> <span>=</span> <span>datetime_to_timestamp</span><span>(</span><span>date</span><span>),</span>
         <span>year</span> <span>=</span> <span>year</span><span>(</span><span>date</span><span>),</span>
         <span>month</span> <span>=</span> <span>month</span><span>(</span><span>date</span><span>,</span> <span>label</span> <span>=</span> <span>TRUE</span><span>),</span>
         <span>color_m</span> <span>=</span> <span>colorize</span><span>(</span><span>median</span><span>,</span> <span>viridis</span><span>(</span><span>10</span><span>,</span> <span>option</span> <span>=</span> <span>&quot;B&quot;</span><span>)),</span>
         <span>color_m</span> <span>=</span> <span>hex_to_rgba</span><span>(</span><span>color_m</span><span>,</span> <span>0.65</span><span>))</span>

<span>dfcolyrs</span> <span>&lt;-</span> <span>df</span> <span>%>%</span> 
  <span>group_by</span><span>(</span><span>year</span><span>)</span> <span>%>%</span> 
  <span>summarise</span><span>(</span><span>median</span> <span>=</span> <span>median</span><span>(</span><span>median</span><span>))</span> <span>%>%</span> 
  <span>ungroup</span><span>()</span> <span>%>%</span> 
  <span>mutate</span><span>(</span><span>color_y</span> <span>=</span> <span>colorize</span><span>(</span><span>median</span><span>,</span> <span>viridis</span><span>(</span><span>10</span><span>,</span> <span>option</span> <span>=</span> <span>&quot;B&quot;</span><span>)),</span>
         <span>color_y</span> <span>=</span> <span>hex_to_rgba</span><span>(</span><span>color_y</span><span>,</span> <span>0.65</span><span>))</span> <span>%>%</span> 
  <span>select</span><span>(</span><span>-</span><span>median</span><span>)</span>

<span>df</span> <span>&lt;-</span> <span>left_join</span><span>(</span><span>df</span><span>,</span> <span>dfcolyrs</span><span>,</span> <span>by</span> <span>=</span> <span>&quot;year&quot;</span><span>)</span>
</code></pre>
</div>
<p>The data is ready, let’s go.</p>
<table>
<thead>
<tr>
<th>year_mon</th>
<th>median</th>
<th>lower</th>
<th>upper</th>
<th>year</th>
<th>decade</th>
<th>month</th>
<th>date</th>
<th>tmpstmp</th>
<th>color_m</th>
<th>color_y</th>
</tr>
</thead>
<tbody>
<tr>
<td>1850-01-01</td>
<td>-0.702</td>
<td>-1.102</td>
<td>-0.299</td>
<td>1850</td>
<td>1850</td>
<td>Jan</td>
<td>1850-01-01</td>
<td>-3.79e+12</td>
<td>rgba(2,1,10,0.65)</td>
<td>rgba(87,16,107,0.65)</td>
</tr>
<tr>
<td>1850-02-01</td>
<td>-0.284</td>
<td>-0.675</td>
<td>0.114</td>
<td>1850</td>
<td>1850</td>
<td>Feb</td>
<td>1850-02-01</td>
<td>-3.78e+12</td>
<td>rgba(107,23,108,0.65)</td>
<td>rgba(87,16,107,0.65)</td>
</tr>
<tr>
<td>1850-03-01</td>
<td>-0.732</td>
<td>-1.080</td>
<td>-0.383</td>
<td>1850</td>
<td>1850</td>
<td>Mar</td>
<td>1850-03-01</td>
<td>-3.78e+12</td>
<td>rgba(1,0,8,0.65)</td>
<td>rgba(87,16,107,0.65)</td>
</tr>
<tr>
<td>1850-04-01</td>
<td>-0.570</td>
<td>-0.903</td>
<td>-0.237</td>
<td>1850</td>
<td>1850</td>
<td>Apr</td>
<td>1850-04-01</td>
<td>-3.78e+12</td>
<td>rgba(9,4,26,0.65)</td>
<td>rgba(87,16,107,0.65)</td>
</tr>
<tr>
<td>1850-05-01</td>
<td>-0.325</td>
<td>-0.662</td>
<td>0.006</td>
<td>1850</td>
<td>1850</td>
<td>May</td>
<td>1850-05-01</td>
<td>-3.78e+12</td>
<td>rgba(84,15,107,0.65)</td>
<td>rgba(87,16,107,0.65)</td>
</tr>
<tr>
<td>1850-06-01</td>
<td>-0.213</td>
<td>-0.515</td>
<td>0.084</td>
<td>1850</td>
<td>1850</td>
<td>Jun</td>
<td>1850-06-01</td>
<td>-3.77e+12</td>
<td>rgba(148,38,100,0.65)</td>
<td>rgba(87,16,107,0.65)</td>
</tr>
</tbody>
</table>
<h2>Spiral</h2>
<p>First of all let’s try to replicate the chart/gif/animation that’s reason<br>
to write this post. Here we’ll construtct a <code>list</code> of series to use<br>
with <code>hc_add_series_list</code> function.</p>
<div>
<pre><code><span>lsseries</span> <span>&lt;-</span> <span>df</span> <span>%>%</span> 
  <span>group_by</span><span>(</span><span>year</span><span>)</span> <span>%>%</span> 
  <span>do</span><span>(</span>
    <span>data</span> <span>=</span> <span>.</span><span>$</span><span>median</span><span>,</span>
    <span>color</span> <span>=</span> <span>first</span><span>(</span><span>.</span><span>$</span><span>color_y</span><span>))</span> <span>%>%</span> 
  <span>mutate</span><span>(</span><span>name</span> <span>=</span> <span>year</span><span>)</span> <span>%>%</span> 
  <span>list.parse3</span><span>()</span>

<span>hc1</span> <span>&lt;-</span> <span>highchart</span><span>()</span> <span>%>%</span> 
  <span>hc_chart</span><span>(</span><span>polar</span> <span>=</span> <span>TRUE</span><span>)</span> <span>%>%</span> 
  <span>hc_plotOptions</span><span>(</span>
    <span>series</span> <span>=</span> <span>list</span><span>(</span>
      <span>marker</span> <span>=</span> <span>list</span><span>(</span><span>enabled</span> <span>=</span> <span>FALSE</span><span>),</span>
      <span>animation</span> <span>=</span> <span>TRUE</span><span>,</span>
      <span>pointIntervalUnit</span> <span>=</span> <span>&quot;month&quot;</span><span>)</span>
    <span>)</span> <span>%>%</span>
  <span>hc_legend</span><span>(</span><span>enabled</span> <span>=</span> <span>FALSE</span><span>)</span> <span>%>%</span> 
  <span>hc_xAxis</span><span>(</span><span>type</span> <span>=</span> <span>&quot;datetime&quot;</span><span>,</span> <span>min</span> <span>=</span> <span>0</span><span>,</span> <span>max</span> <span>=</span> <span>365</span> <span>*</span> <span>24</span> <span>*</span> <span>36e5</span><span>,</span>
           <span>labels</span> <span>=</span> <span>list</span><span>(</span><span>format</span> <span>=</span> <span>&quot;{value:%B}&quot;</span><span>))</span> <span>%>%</span>
  <span>hc_tooltip</span><span>(</span><span>headerFormat</span> <span>=</span> <span>&quot;{point.key}&quot;</span><span>,</span>
             <span>xDateFormat</span> <span>=</span> <span>&quot;%B&quot;</span><span>,</span>
             <span>pointFormat</span> <span>=</span> <span>&quot; {series.name}: {point.y}&quot;</span><span>)</span> <span>%>%</span> 
  <span>hc_add_series_list</span><span>(</span><span>lsseries</span><span>)</span>

<span>hc1</span>
</code></pre>
</div>
<p><iframe src="http://jkunst.com/htmlwidgets/case-study-animation-and-others-vizs/highchart_uqgspld.html"></iframe></p>
<p><a target="_blank" href="http://jkunst.com/htmlwidgets/case-study-animation-and-others-vizs/highchart_uqgspld.html">open</a></p>
<p>Ok! without the animation componet this don’t work so much.</p>
<p>If we want replicate the animation part we can hide all the series<br>
using transparency.</p>
<div>
<pre><code><span>lsseries2</span> <span>&lt;-</span> <span>df</span> <span>%>%</span> 
  <span>group_by</span><span>(</span><span>year</span><span>)</span> <span>%>%</span> 
  <span>do</span><span>(</span>
    <span>data</span> <span>=</span> <span>.</span><span>$</span><span>median</span><span>,</span>
    <span>color</span> <span>=</span> <span>&quot;transparent&quot;</span><span>,</span>
    <span>enableMouseTracking</span> <span>=</span> <span>FALSE</span><span>,</span>
    <span>color2</span> <span>=</span> <span>first</span><span>(</span><span>.</span><span>$</span><span>color_y</span><span>))</span> <span>%>%</span> 
  <span>mutate</span><span>(</span><span>name</span> <span>=</span> <span>year</span><span>)</span> <span>%>%</span> 
  <span>list.parse3</span><span>()</span>
</code></pre>
</div>
<p>Then using a little of javascript we can color each series<br>
one by one with the real color.</p>
<div>
<pre><code><span>hc11</span> <span>&lt;-</span> <span>highchart</span><span>()</span> <span>%>%</span> 
  <span>hc_chart</span><span>(</span><span>polar</span> <span>=</span> <span>TRUE</span><span>)</span> <span>%>%</span> 
  <span>hc_plotOptions</span><span>(</span><span>series</span> <span>=</span> <span>list</span><span>(</span>
    <span>marker</span> <span>=</span> <span>list</span><span>(</span><span>enabled</span> <span>=</span> <span>FALSE</span><span>),</span>
    <span>animation</span> <span>=</span> <span>TRUE</span><span>,</span>
    <span>pointIntervalUnit</span> <span>=</span> <span>&quot;month&quot;</span><span>))</span> <span>%>%</span>
  <span>hc_legend</span><span>(</span><span>enabled</span> <span>=</span> <span>FALSE</span><span>)</span> <span>%>%</span> 
  <span>hc_title</span><span>(</span><span>text</span> <span>=</span> <span>&quot;Animated Spiral&quot;</span><span>)</span> <span>%>%</span> 
  <span>hc_xAxis</span><span>(</span><span>type</span> <span>=</span> <span>&quot;datetime&quot;</span><span>,</span> <span>min</span> <span>=</span> <span>0</span><span>,</span> <span>max</span> <span>=</span> <span>365</span> <span>*</span> <span>24</span> <span>*</span> <span>36e5</span><span>,</span>
           <span>labels</span> <span>=</span> <span>list</span><span>(</span><span>format</span> <span>=</span> <span>&quot;{value:%B}&quot;</span><span>))</span> <span>%>%</span>
  <span>hc_tooltip</span><span>(</span><span>headerFormat</span> <span>=</span> <span>&quot;{point.key}&quot;</span><span>,</span> <span>xDateFormat</span> <span>=</span> <span>&quot;%B&quot;</span><span>,</span>
             <span>pointFormat</span> <span>=</span> <span>&quot; {series.name}: {point.y}&quot;</span><span>)</span> <span>%>%</span> 
  <span>hc_add_series_list</span><span>(</span><span>lsseries2</span><span>)</span> <span>%>%</span> 
  <span>hc_chart</span><span>(</span>
    <span>events</span> <span>=</span> <span>list</span><span>(</span>
      <span>load</span> <span>=</span> <span>JS</span><span>(</span><span>&quot;
function() {
console.log('ready');
var duration = 16 * 1000
var delta = duration/this.series.length;
var delay = 2000;
this.series.map(function(e){
setTimeout(function() {
e.update({color: e.options.color2, enableMouseTracking: true});
e.chart.setTitle({text: e.name})
}, delay)
delay = delay + delta;
});
}
&quot;</span><span>)</span>
    <span>)</span>
  <span>)</span>
</code></pre>
</div>
<p>And <em>voila</em>.</p>
<div>
<pre><code><span>hc11</span>
</code></pre>
</div>
<p><iframe src="http://jkunst.com/htmlwidgets/case-study-animation-and-others-vizs/highchart_jrqogtb.html"></iframe></p>
<p><a target="_blank" href="http://jkunst.com/htmlwidgets/case-study-animation-and-others-vizs/highchart_jrqogtb.html">open</a></p>
<p>You can open the chart in a new window to see the animation effect.</p>
<h2>Sesonalplot</h2>
<p>We need polar coords here? I don’t know so let’s back<br>
to the euclidean space and see what happened</p>
<div>
<pre><code><span>hc2</span> <span>&lt;-</span> <span>hc1</span> <span>%>%</span> 
  <span>hc_chart</span><span>(</span><span>polar</span> <span>=</span> <span>FALSE</span><span>,</span> <span>type</span> <span>=</span> <span>&quot;spline&quot;</span><span>)</span> <span>%>%</span> 
  <span>hc_xAxis</span><span>(</span><span>max</span> <span>=</span> <span>(</span><span>365</span> <span>-</span> <span>1</span><span>)</span> <span>*</span> <span>24</span> <span>*</span> <span>36e5</span><span>)</span> <span>%>%</span> 
  <span>hc_yAxis</span><span>(</span><span>tickPositions</span> <span>=</span> <span>c</span><span>(</span><span>-1.5</span><span>,</span> <span>0</span><span>,</span> <span>1.5</span><span>,</span> <span>2</span><span>))</span>

<span>hc2</span>
</code></pre>
</div>
<p><iframe src="http://jkunst.com/htmlwidgets/case-study-animation-and-others-vizs/highchart_pvnbqax.html"></iframe></p>
<p><a target="_blank" href="http://jkunst.com/htmlwidgets/case-study-animation-and-others-vizs/highchart_pvnbqax.html">open</a></p>
<p><strong>Nom!</strong> A nice colored spaghettis. Not so much clear what happened<br>
across the years.</p>
<h2>Heatmap</h2>
<p>Here we put the years in xAxis and month in yAxis:</p>
<div>
<pre><code><span>m</span> <span>&lt;-</span> <span>df</span> <span>%>%</span> 
  <span>select</span><span>(</span><span>year</span><span>,</span> <span>month</span><span>,</span> <span>median</span><span>)</span> <span>%>%</span> 
  <span>spread</span><span>(</span><span>year</span><span>,</span> <span>median</span><span>)</span> <span>%>%</span> 
  <span>select</span><span>(</span><span>-</span><span>month</span><span>)</span> <span>%>%</span> 
  <span>as.matrix</span><span>()</span> 

<span>rownames</span><span>(</span><span>m</span><span>)</span> <span>&lt;-</span> <span>month.abb</span>

<span>hc3</span> <span>&lt;-</span> <span>hchart</span><span>(</span><span>m</span><span>)</span> <span>%>%</span> 
  <span>hc_colorAxis</span><span>(</span>
    <span>stops</span> <span>=</span> <span>color_stops</span><span>(</span><span>10</span><span>,</span> <span>viridis</span><span>(</span><span>10</span><span>,</span> <span>option</span> <span>=</span> <span>&quot;B&quot;</span><span>)),</span>
    <span>min</span> <span>=</span> <span>-1</span><span>,</span> <span>max</span> <span>=</span> <span>1</span>
    <span>)</span> <span>%>%</span> 
  <span>hc_yAxis</span><span>(</span>
    <span>title</span> <span>=</span> <span>list</span><span>(</span><span>text</span> <span>=</span> <span>NULL</span><span>),</span>
    <span>tickPositions</span> <span>=</span> <span>FALSE</span><span>,</span>
    <span>labels</span> <span>=</span> <span>list</span><span>(</span><span>format</span> <span>=</span> <span>&quot;{value}&quot;</span><span>,</span> <span>useHTML</span> <span>=</span> <span>TRUE</span><span>)</span>
    <span>)</span>

<span>hc3</span>
</code></pre>
</div>
<p><iframe src="http://jkunst.com/htmlwidgets/case-study-animation-and-others-vizs/highchart_fxpcdlr.html"></iframe></p>
<p><a target="_blank" href="http://jkunst.com/htmlwidgets/case-study-animation-and-others-vizs/highchart_fxpcdlr.html">open</a></p>
<p>With the color scale used is not that clear the impact<br>
about the incremet. We can see the series have and increase<br>
but with colors is not so easy to quantify that change.</p>
<h2>Line / Time Series</h2>
<p>Let’s try now the most simply chart. And let’s represent<br>
the data as a time series.</p>
<div>
<pre><code><span>dsts</span> <span>&lt;-</span> <span>df</span> <span>%>%</span> 
  <span>mutate</span><span>(</span><span>name</span> <span>=</span> <span>paste</span><span>(</span><span>decade</span><span>,</span> <span>month</span><span>))</span> <span>%>%</span> 
  <span>select</span><span>(</span><span>x</span> <span>=</span> <span>tmpstmp</span><span>,</span> <span>y</span> <span>=</span> <span>median</span><span>,</span> <span>name</span><span>)</span>

<span>hc4</span> <span>&lt;-</span> <span>highchart</span><span>()</span> <span>%>%</span> 
  <span>hc_xAxis</span><span>(</span><span>type</span> <span>=</span> <span>&quot;datetime&quot;</span><span>)</span> <span>%>%</span>
  <span>hc_yAxis</span><span>(</span><span>tickPositions</span> <span>=</span> <span>c</span><span>(</span><span>-1.5</span><span>,</span> <span>0</span><span>,</span> <span>1.5</span><span>,</span> <span>2</span><span>))</span> <span>%>%</span> 
  <span>hc_add_series_df</span><span>(</span><span>dsts</span><span>,</span> <span>name</span> <span>=</span> <span>&quot;Global Temperature&quot;</span><span>,</span>
                   <span>type</span> <span>=</span> <span>&quot;line&quot;</span><span>,</span> <span>color</span> <span>=</span> <span>hex_to_rgba</span><span>(</span><span>viridis</span><span>(</span><span>10</span><span>,</span> <span>option</span> <span>=</span> <span>&quot;B&quot;</span><span>)[</span><span>7</span><span>]),</span>
                   <span>lineWidth</span> <span>=</span> <span>1</span><span>,</span>
                   <span>states</span> <span>=</span> <span>list</span><span>(</span><span>hover</span> <span>=</span> <span>list</span><span>(</span><span>lineWidth</span> <span>=</span> <span>1</span><span>)),</span>
                   <span>shadow</span> <span>=</span> <span>FALSE</span><span>)</span> 
<span>hc4</span>
</code></pre>
</div>
<p><iframe src="http://jkunst.com/htmlwidgets/case-study-animation-and-others-vizs/highchart_odlfkic.html"></iframe></p>
<p><a target="_blank" href="http://jkunst.com/htmlwidgets/case-study-animation-and-others-vizs/highchart_odlfkic.html">open</a></p>
<p>maybe it’s so simple. What do you think?</p>
<h2>Columrange</h2>
<p>Finally let’s add the information about the confidence interval and<br>
add the media information using a color same as<br>
<a target="_blank" href="https://twitter.com/hrbrmstr">hrbrmstr</a> did.</p>
<p>With highcharter it’s easy. Just define the dataframe with <code>x</code>,<br>
<code>low</code>, <code>high</code> and <code>color</code> and add it to a <code>highchart</code> object<br>
with the <code>hc_add_series_df</code> function.</p>
<div>
<pre><code><span>dscr</span> <span>&lt;-</span> <span>df</span> <span>%>%</span> 
  <span>mutate</span><span>(</span><span>name</span> <span>=</span> <span>paste</span><span>(</span><span>decade</span><span>,</span> <span>month</span><span>))</span> <span>%>%</span> 
  <span>select</span><span>(</span><span>x</span> <span>=</span> <span>tmpstmp</span><span>,</span> <span>low</span> <span>=</span> <span>lower</span><span>,</span> <span>high</span> <span>=</span> <span>upper</span><span>,</span> <span>name</span><span>,</span> <span>color</span> <span>=</span> <span>color_m</span><span>)</span>

<span>hc5</span> <span>&lt;-</span> <span>highchart</span><span>()</span> <span>%>%</span> 
  <span>hc_yAxis</span><span>(</span><span>tickPositions</span> <span>=</span> <span>c</span><span>(</span><span>-2</span><span>,</span> <span>0</span><span>,</span> <span>1.5</span><span>,</span> <span>2</span><span>))</span> <span>%>%</span> 
  <span>hc_xAxis</span><span>(</span><span>type</span> <span>=</span> <span>&quot;datetime&quot;</span><span>)</span> <span>%>%</span>
  <span>hc_add_series_df</span><span>(</span><span>dscr</span><span>,</span> <span>name</span> <span>=</span> <span>&quot;Global Temperature&quot;</span><span>,</span>
                   <span>type</span> <span>=</span> <span>&quot;columnrange&quot;</span><span>)</span>

<span>hc5</span>
</code></pre>
</div>
<p><iframe src="http://jkunst.com/htmlwidgets/case-study-animation-and-others-vizs/highchart_mjusndo.html"></iframe></p>
<p><a target="_blank" href="http://jkunst.com/htmlwidgets/case-study-animation-and-others-vizs/highchart_mjusndo.html">open</a></p>
<p>(IMHO) This is a really way to show what we want to say:</p>
<ul>
<li>Via a time series chart it’s wasy compare the past with the<br>
actual period of time.</li>
<li>The color, in particular the last <em>yellowish</em> part, add importance and guide our<br>
eyes to that part of the chart before to start to compare.</li>
</ul>
<p><img alt="giphy gif" src="https://media.giphy.com/media/RgfGmnVvt8Pfy/giphy.gif"> <a target="_blank" href="https://www.funnyjunk.com/channel/dank-webms/Calvintrolls+unseen+dank+comp+5/ymYgLlz/28">source</a></p>
<p>Do you have other ways to represent this data?</p>
<p><div><div><div><div data-width="55" data-show-faces="false" data-send="true" data-layout="box_count" data-height="62" data-href="http://www.r-bloggers.com/case-study-animation-and-others-vizs/"></div></div><div><a data-url="http://www.r-bloggers.com/case-study-animation-and-others-vizs/" data-counturl="http://www.r-bloggers.com/case-study-animation-and-others-vizs/" data-count="vertical" data-text="Case Study: Animation and Others Vizs" class="twitter-share-button" data-via="rbloggers" href="https://twitter.com/share"></a></div><div></div></div><div></div></div>
<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/case-study-animation-and-others-vizs/"> Jkunst - R category</a></strong>.</div>
<hr>
<a rel="nofollow" href="http://www.r-bloggers.com/">R-bloggers.com</a> offers <strong><a rel="nofollow" href="http://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="http://www.r-project.org/">R</a> news and <a title="R tutorials" rel="nofollow" href="http://www.r-bloggers.com/?s=tutorial">tutorials</a> on topics such as: <a title="Data science" rel="nofollow" href="http://www.r-bloggers.com/?s=data%20science">Data science</a>, <a title="Big Data" rel="nofollow" href="http://www.r-bloggers.com/?s=Big%20Data">Big Data, <a title="R jobs" rel="nofollow" href="http://www.r-users.com/">R jobs</a>, visualization (<a title="ggplot and ggplot2 tutorials" rel="nofollow" href="http://www.r-bloggers.com/?s=ggplot2">ggplot2</a>, <a title="Boxplots using lattice and ggplot2 tutorials" rel="nofollow" href="http://www.r-bloggers.com/?s=boxplot">Boxplots</a>, <a title="Maps and gis" rel="nofollow" href="http://www.r-bloggers.com/?s=map">maps</a>, <a title="Animation in R" rel="nofollow" href="http://www.r-bloggers.com/?s=animation">animation</a>), programming (<a title="RStudio IDE for R" rel="nofollow" href="http://www.r-bloggers.com/?s=RStudio">RStudio</a>, <a title="Sweave and literate programming" rel="nofollow" href="http://www.r-bloggers.com/?s=sweave">Sweave</a>, <a title="LaTeX in R" rel="nofollow" href="http://www.r-bloggers.com/?s=LaTeX">LaTeX</a>, <a title="SQL and databases" rel="nofollow" href="http://www.r-bloggers.com/?s=SQL">SQL</a>, <a title="Eclipse IDE for R" rel="nofollow" href="http://www.r-bloggers.com/?s=eclipse">Eclipse</a>, <a title="git and github, Version Control System" rel="nofollow" href="http://www.r-bloggers.com/?s=git">git</a>, <a title="Large data in R using Hadoop" rel="nofollow" href="http://www.r-bloggers.com/?s=hadoop">hadoop</a>, <a title="Web Scraping of google, facebook, yahoo, twitter and more using R" rel="nofollow" href="http://www.r-bloggers.com/?s=Web+Scraping">Web Scraping</a>) statistics (<a title="Regressions and ANOVA analysis tutorials" rel="nofollow" href="http://www.r-bloggers.com/?s=regression">regression</a>, <a title="principal component analysis tutorial" rel="nofollow" href="http://www.r-bloggers.com/?s=PCA">PCA</a>, <a title="Time series" rel="nofollow" href="http://www.r-bloggers.com/?s=time+series">time series</a>, <a title="finance trading" rel="nofollow" href="http://www.r-bloggers.com/?s=trading">trading</a>) and more...
<img height="1" alt="" width="1" src="http://feeds.feedburner.com/~r/RBloggers/~4/yIQ-6OsbUjw"></a></div>