<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/global-temperature-change-in-r-d3-without-the-vertigo/"></div></div><div><a data-url="http://www.r-bloggers.com/global-temperature-change-in-r-d3-without-the-vertigo/" data-counturl="http://www.r-bloggers.com/global-temperature-change-in-r-d3-without-the-vertigo/" data-count="horizontal" data-text="Global Temperature Change in R &amp; D3 (without the vertigo)" 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://rud.is/b/2016/05/14/global-temperature-change-in-r-d3-without-the-vertigo/"> R – rud.is</a></strong>, and kindly contributed to <a rel="nofollow" href="http://www.r-bloggers.com/">R-bloggers)</a> </div>
<p>This made the rounds on social media last week:</p>
<blockquote data-lang="en" class="twitter-tweet"><p dir="ltr" lang="en">Spiraling global temperatures from 1850-2016 (full animation) <a target="_blank" href="https://t.co/YETC5HkmTr">https://t.co/YETC5HkmTr</a> <a target="_blank" href="https://t.co/Ypci717AHq">pic.twitter.com/Ypci717AHq</a></p>
<p>— Ed Hawkins (<a target="_blank" href="http://twitter.com/ed_hawkins">@ed_hawkins</a>) <a target="_blank" href="https://twitter.com/ed_hawkins/status/729753441459945474">May 9, 2016</a></p></blockquote>
<p></p>
<p>One of the original versions was static and was not nearly as popular, but—as you can see—this one went viral.</p>
<p>Despite the public’s infatuation with circles (I’m lookin’ at you, pie charts), I’m not going to reproduce this polar coordinate visualization in ggplot2. I believe others have already done so (or are doing so) and you can mimic the animation pretty easily with <code>coord_polar()</code> and <a target="_blank" href="http://twitter.com/drob">@drob</a>’s enhanced ggplot2 animation tools.</p>
<p>NOTE: If you’re more interested in the stats/science than a spirograph or colorful D3 animation (below), Gavin Simpson (<a target="_blank" href="http://twitter.com/ucfagls">@ucfagls</a>) has an <a target="_blank" href="http://www.fromthebottomoftheheap.net/2016/03/25/additive-modeling-global-temperature-series-revisited/">awesome post</a> with a detailed view of the HadCRUT data set.</p>
<h3>HadCRUT in R</h3>
<p>I noticed that <a target="_blank" href="http://www.metoffice.gov.uk/hadobs/hadcrut4/">the original data source</a>, had 12 fields, two of which (columns 11 &amp; 12) are the lower+upper bounds of the 95% confidence interval of the combined effects of all the uncertainties described in the HadCRUT4 error model (measurement and sampling, bias and coverage uncertainties). The spinning vis of doom may be mesmerizing, but it only shows the median. I thought it might be fun to try to make a good looking visualization using the CI as well (you can pick one of the other pairs to try this at home), both in R and then in D3. I chose D3 for the animated version mostly to play with the new 4.0 main branch, but I think it’s possible to do more with dynamic visualizations in D3 than it is with R (and it doesn’t require stop-motion techniques).</p>
<p>The following code:</p>
<ul>
<li>reads in the data set (and saves it locally to be nice to their bandwidth bill)</li>
<li>does some munging to get fields we need</li>
<li>saves a version out for use with D3</li>
<li>uses <code>geom_segment()</code> + <code>geom_point()</code> to do the heavy lifting</li>
<li>colors the segments by year using the <code>viridis</code> palette (the Plasma version)</li>
<li>labels the plot by decade using facets and some fun facet margin “tricks” to make it look like the x-axis labels are on top</li>
</ul>
<pre><code>library(readr)    # read_table() / write_csv()
library(dplyr)
library(zoo)      # as.yearmon()
library(ggplot2)  # devtools::install_github(&quot;hadley/ggplot2&quot;)
library(hrbrmisc) # devtools::install_github(&quot;hrbrmstr/hrbrmisc&quot;)
library(viridis)

URL &lt;- &quot;http://www.metoffice.gov.uk/hadobs/hadcrut4/data/current/time_series/HadCRUT.4.4.0.0.monthly_ns_avg.txt&quot;
fil &lt;- sprintf(&quot;data/%s&quot;, basename(URL))
if (!file.exists(fil)) download.file(URL, fil)

global_temps &lt;- read_table(fil, col_names=FALSE)

global_temps %>%
  select(year_mon=1, median=2, lower=11, upper=12) %>%
  mutate(year_mon=as.Date(as.yearmon(year_mon, format=&quot;%Y/%m&quot;)),
         year=as.numeric(format(year_mon, &quot;%Y&quot;)),
         decade=(year %/% 10) * 10,
         month=format(year_mon, &quot;%b&quot;)) %>%
  mutate(month=factor(month, levels=month.abb)) %>%
  filter(year != 2016) -> global_temps

# for D3 vis
write_csv(global_temps, &quot;data/temps.csv&quot;)

#+ hadcrut, fig.retina=2, fig.width=12, fig.height=6
gg &lt;- ggplot(global_temps)
gg &lt;- gg + geom_segment(aes(x=year_mon, xend=year_mon, y=lower, yend=upper, color=year), size=0.2)
gg &lt;- gg + geom_point(aes(x=year_mon, y=median), color=&quot;white&quot;, shape=&quot;.&quot;, size=0.01)
gg &lt;- gg + scale_x_date(name=&quot;Median in white&quot;, expand=c(0,0.5))
gg &lt;- gg + scale_y_continuous(name=NULL, breaks=c(0, 1.5, 2),
                              labels=c(&quot;0°C&quot;, &quot;1.5°C&quot;, &quot;2.0°C&quot;), limits=c(-1.6, 2.25))
gg &lt;- gg + scale_color_viridis(option=&quot;C&quot;)
gg &lt;- gg + facet_wrap(~decade, nrow=1, scales=&quot;free_x&quot;)
gg &lt;- gg + labs(title=&quot;Global Temperature Change (1850-2016)&quot;,
                subtitle=&quot;Using lower and upper bounds of the 95% confidence interval of the combined effects of all the uncertainties described in the HadCRUT4 error model (measurement and sampling, bias and coverage uncertainties; fields 11 &amp; 12)&quot;,
                caption=&quot;HadCRUT4 (http://www.metoffice.gov.uk/hadobs/hadcrut4/index.html)&quot;)
gg &lt;- gg + theme_hrbrmstr_my(grid=&quot;XY&quot;)
gg &lt;- gg + theme(panel.background=element_rect(fill=&quot;black&quot;, color=&quot;#2b2b2b&quot;, size=0.15))
gg &lt;- gg + theme(panel.margin=margin(0,0,0,0))
gg &lt;- gg + theme(panel.grid.major.y=element_line(color=&quot;#b2182b&quot;, size=0.25))
gg &lt;- gg + theme(strip.text=element_text(hjust=0.5))
gg &lt;- gg + theme(axis.title.x=element_text(hjust=0, margin=margin(t=-10)))
gg &lt;- gg + theme(axis.text.x=element_blank())
gg &lt;- gg + theme(axis.text.y=element_text(size=12, color=&quot;#b2182b&quot;))
gg &lt;- gg + theme(legend.position=&quot;none&quot;)
gg &lt;- gg + theme(plot.margin=margin(10, 10, 10, 10))
gg &lt;- gg + theme(plot.caption=element_text(margin=margin(t=-6)))
gg</code></pre>
<p><a target="_blank" href="https://rud.is/b/wp-content/uploads/2016/05/hadcrut.png"><img alt="hadcrut" width="85%" class="wp-image-4398" src="https://rud.is/b/wp-content/uploads/2016/05/hadcrut.png"></a><br>
<center>(Click image for larger version)</center></p>
<p>My <code>theme_hrbrmstr_my()</code> required the Myriad Pro font, so you’ll need to use one of the other themes in the <code>hrbrmisc</code> package or fill in some <code>theme()</code> details on your own.</p>
<h3>HadCRUT in D3</h3>
<p>While the static visualization is pretty, we can kick it up a bit with some basic animations. Rather than make a multi-file HTML+js+D3+CSS example, this is all self-contained (apart from the data) in a single <code>index.html</code> file (some folks asked for the next D3 example to be self-contained).</p>
<p>Some nice new features of D3 4.0 (that I ended up using here):</p>
<ul>
<li>easier to use <code>scale</code>s</li>
<li>less verbose <code>axis</code> creation</li>
<li><code>viridis</code> is now a first-class citizen</li>
</ul>
<p>Mike Bostock has spent much time refining the API for <a target="_blank" href="https://github.com/d3/d3">D3 4.0</a> and it shows. I’m definitely looking forward to playing with it over the rest of the year. </p>
<p>The vis is below but you can bust the <code>iframe</code> via <a target="_blank" href="https://rud.is/projects/hadcrut4/">https://rud.is/projects/hadcrut4/</a>. </p>
<p>I have it setup as “click to view” out of laziness. It’s not hard to make it trigger on <code>div</code> scroll visibility, but this way you also get to repeat the visualization animation without it looping incessantly.</p>
<p><iframe height="750" width="100%" src="http://rud.is/projects/hadcrut4/index.html"></iframe></p>
<p>If you end up playing with the D3 code, definitely change the width. I had to make it a bit smaller to fit it into the blog theme.</p>
<h3>Fin</h3>
<p>You can find the source for both the R &amp; D3 visualizations <a target="_blank" href="https://github.com/hrbrmstr/hadcrut">on github</a>.</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/global-temperature-change-in-r-d3-without-the-vertigo/"></div></div><div><a data-url="http://www.r-bloggers.com/global-temperature-change-in-r-d3-without-the-vertigo/" data-counturl="http://www.r-bloggers.com/global-temperature-change-in-r-d3-without-the-vertigo/" data-count="vertical" data-text="Global Temperature Change in R &amp; D3 (without the vertigo)" 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://rud.is/b/2016/05/14/global-temperature-change-in-r-d3-without-the-vertigo/"> R – rud.is</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/Zm0IohrVvpw"></a></div>