{"id":4396,"date":"2016-05-14T20:49:49","date_gmt":"2016-05-15T01:49:49","guid":{"rendered":"http:\/\/rud.is\/b\/?p=4396"},"modified":"2018-03-07T16:42:22","modified_gmt":"2018-03-07T21:42:22","slug":"global-temperature-change-in-r-d3-without-the-vertigo","status":"publish","type":"post","link":"https:\/\/rud.is\/b\/2016\/05\/14\/global-temperature-change-in-r-d3-without-the-vertigo\/","title":{"rendered":"Global Temperature Change in R &#038; D3 (without the vertigo)"},"content":{"rendered":"<p>This made the rounds on social media last week:<\/p>\n<blockquote class=\"twitter-tweet\" data-lang=\"en\">\n<p lang=\"en\" dir=\"ltr\">Spiraling global temperatures from 1850-2016 (full animation) <a href=\"https:\/\/t.co\/YETC5HkmTr\">https:\/\/t.co\/YETC5HkmTr<\/a> <a href=\"https:\/\/t.co\/Ypci717AHq\">pic.twitter.com\/Ypci717AHq<\/a><\/p>\n<p>&mdash; Ed Hawkins (@ed_hawkins) <a href=\"https:\/\/mobile.twitter.com\/ed_hawkins\/status\/729753441459945474\">May 9, 2016<\/a><\/p><\/blockquote>\n<p><script async src=\"\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n<p>One of the original versions was static and was not nearly as popular, but&mdash;as you can see&mdash;this one went viral.<\/p>\n<p>Despite the public&#8217;s infatuation with circles (I&#8217;m lookin&#8217; at you, pie charts), I&#8217;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 `coord_polar()` and @drob&#8217;s enhanced ggplot2 animation tools.<\/p>\n<p>NOTE: If you&#8217;re more interested in the stats\/science than a spirograph or colorful D3 animation (below), Gavin Simpson (@ucfagls) has an [awesome post](http:\/\/www.fromthebottomoftheheap.net\/2016\/03\/25\/additive-modeling-global-temperature-series-revisited\/) with a detailed view of the HadCRUT data set.<\/p>\n<p>## HadCRUT in R<\/p>\n<p>I noticed that [the original data source](http:\/\/www.metoffice.gov.uk\/hadobs\/hadcrut4\/), had 12 fields, two of which (columns 11 &#038; 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&#8217;s possible to do more with dynamic visualizations in D3 than it is with R (and it doesn&#8217;t require stop-motion techniques).<\/p>\n<p>The following code:<\/p>\n<p>&#8211; reads in the data set (and saves it locally to be nice to their bandwidth bill)<br \/>\n&#8211; does some munging to get fields we need<br \/>\n&#8211; saves a version out for use with D3<br \/>\n&#8211; uses `geom_segment()` + `geom_point()` to do the heavy lifting<br \/>\n&#8211; colors the segments by year using the `viridis` palette (the Plasma version)<br \/>\n&#8211; labels the plot by decade using facets and some fun facet margin &#8220;tricks&#8221; to make it look like the x-axis labels are on top<\/p>\n<pre id=\"prism-r-code\"><code class=\"language-r\">library(readr)    # read_table() \/ write_csv()\r\nlibrary(dplyr)\r\nlibrary(zoo)      # as.yearmon()\r\nlibrary(ggplot2)  # devtools::install_github(&quot;hadley\/ggplot2&quot;)\r\nlibrary(hrbrmisc) # devtools::install_github(&quot;hrbrmstr\/hrbrmisc&quot;)\r\nlibrary(viridis)\r\n\r\nURL &lt;- &quot;http:\/\/www.metoffice.gov.uk\/hadobs\/hadcrut4\/data\/current\/time_series\/HadCRUT.4.4.0.0.monthly_ns_avg.txt&quot;\r\nfil &lt;- sprintf(&quot;data\/%s&quot;, basename(URL))\r\nif (!file.exists(fil)) download.file(URL, fil)\r\n\r\nglobal_temps &lt;- read_table(fil, col_names=FALSE)\r\n\r\nglobal_temps %&gt;%\r\n  select(year_mon=1, median=2, lower=11, upper=12) %&gt;%\r\n  mutate(year_mon=as.Date(as.yearmon(year_mon, format=&quot;%Y\/%m&quot;)),\r\n         year=as.numeric(format(year_mon, &quot;%Y&quot;)),\r\n         decade=(year %\/% 10) * 10,\r\n         month=format(year_mon, &quot;%b&quot;)) %&gt;%\r\n  mutate(month=factor(month, levels=month.abb)) %&gt;%\r\n  filter(year != 2016) -&gt; global_temps\r\n\r\n# for D3 vis\r\nwrite_csv(global_temps, &quot;data\/temps.csv&quot;)\r\n\r\n#+ hadcrut, fig.retina=2, fig.width=12, fig.height=6\r\ngg &lt;- ggplot(global_temps)\r\ngg &lt;- gg + geom_segment(aes(x=year_mon, xend=year_mon, y=lower, yend=upper, color=year), size=0.2)\r\ngg &lt;- gg + geom_point(aes(x=year_mon, y=median), color=&quot;white&quot;, shape=&quot;.&quot;, size=0.01)\r\ngg &lt;- gg + scale_x_date(name=&quot;Median in white&quot;, expand=c(0,0.5))\r\ngg &lt;- gg + scale_y_continuous(name=NULL, breaks=c(0, 1.5, 2),\r\n                              labels=c(&quot;0\u00b0C&quot;, &quot;1.5\u00b0C&quot;, &quot;2.0\u00b0C&quot;), limits=c(-1.6, 2.25))\r\ngg &lt;- gg + scale_color_viridis(option=&quot;C&quot;)\r\ngg &lt;- gg + facet_wrap(~decade, nrow=1, scales=&quot;free_x&quot;)\r\ngg &lt;- gg + labs(title=&quot;Global Temperature Change (1850-2016)&quot;,\r\n                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;,\r\n                caption=&quot;HadCRUT4 (http:\/\/www.metoffice.gov.uk\/hadobs\/hadcrut4\/index.html)&quot;)\r\ngg &lt;- gg + theme_hrbrmstr_my(grid=&quot;XY&quot;)\r\ngg &lt;- gg + theme(panel.background=element_rect(fill=&quot;black&quot;, color=&quot;#2b2b2b&quot;, size=0.15))\r\ngg &lt;- gg + theme(panel.margin=margin(0,0,0,0))\r\ngg &lt;- gg + theme(panel.grid.major.y=element_line(color=&quot;#b2182b&quot;, size=0.25))\r\ngg &lt;- gg + theme(strip.text=element_text(hjust=0.5))\r\ngg &lt;- gg + theme(axis.title.x=element_text(hjust=0, margin=margin(t=-10)))\r\ngg &lt;- gg + theme(axis.text.x=element_blank())\r\ngg &lt;- gg + theme(axis.text.y=element_text(size=12, color=&quot;#b2182b&quot;))\r\ngg &lt;- gg + theme(legend.position=&quot;none&quot;)\r\ngg &lt;- gg + theme(plot.margin=margin(10, 10, 10, 10))\r\ngg &lt;- gg + theme(plot.caption=element_text(margin=margin(t=-6)))\r\ngg<\/code><\/pre>\n<p><a href=\"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2016\/05\/hadcrut.png?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" data-attachment-id=\"4398\" data-permalink=\"https:\/\/rud.is\/b\/2016\/05\/14\/global-temperature-change-in-r-d3-without-the-vertigo\/hadcrut\/\" data-orig-file=\"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2016\/05\/hadcrut.png?fit=2304%2C1152&amp;ssl=1\" data-orig-size=\"2304,1152\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"hadcrut\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2016\/05\/hadcrut.png?fit=300%2C150&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2016\/05\/hadcrut.png?fit=510%2C255&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2016\/05\/hadcrut.png?w=510&#038;ssl=1\" alt=\"hadcrut\"  class=\"aligncenter size-full wp-image-4398\" \/><\/a><br \/>\n<center>(Click image for larger version)<\/center><\/p>\n<p>My `theme_hrbrmstr_my()` required the Myriad Pro font, so you&#8217;ll need to use one of the other themes in the `hrbrmisc` package or fill in some `theme()` details on your own.<\/p>\n<p>## HadCRUT in D3<\/p>\n<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 `index.html` file (some folks asked for the next D3 example to be self-contained).<\/p>\n<p>Some nice new features of D3 4.0 (that I ended up using here):<\/p>\n<p>&#8211; easier to use `scale`s<br \/>\n&#8211; less verbose `axis` creation<br \/>\n&#8211; `viridis` is now a first-class citizen<\/p>\n<p>Mike Bostock has spent much time refining the API for [D3 4.0](https:\/\/github.com\/d3\/d3) and it shows. I&#8217;m definitely looking forward to playing with it over the rest of the year. <\/p>\n<p>The vis is below but you can bust the `iframe` via [https:\/\/rud.is\/projects\/hadcrut4\/](https:\/\/rud.is\/projects\/hadcrut4\/). <\/p>\n<p>I have it setup as &#8220;click to view&#8221; out of laziness. It&#8217;s not hard to make it trigger on `div` scroll visibility, but this way you also get to repeat the visualization animation without it looping incessantly.<\/p>\n<p><iframe loading=\"lazy\" style=\"max-width=100%\" \n        src=\"\/projects\/hadcrut4\/index.html\" \n        sandbox=\"allow-same-origin \n        allow-scripts\" width=\"100%\" \n        height=\"750\" \n        scrolling=\"yes\" \n        seamless=\"seamless\" \n        frameBorder=\"0\"><\/iframe><\/p>\n<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>\n<p>## Fin<\/p>\n<p>You can find the source for both the R &#038; D3 visualizations [on github](https:\/\/github.com\/hrbrmstr\/hadcrut).<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This made the rounds on social media last week: Spiraling global temperatures from 1850-2016 (full animation) https:\/\/t.co\/YETC5HkmTr pic.twitter.com\/Ypci717AHq &mdash; Ed Hawkins (@ed_hawkins) May 9, 2016 One of the original versions was static and was not nearly as popular, but&mdash;as you can see&mdash;this one went viral. Despite the public&#8217;s infatuation with circles (I&#8217;m lookin&#8217; at you, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":4398,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":true,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":3,"activitypub_interaction_policy_quote":"anyone","activitypub_status":"","footnotes":""},"categories":[24,678,673,674,753,36,15,91],"tags":[752,810],"class_list":["post-4396","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-charts-graphs","category-data-visualization","category-datavis-2","category-dataviz","category-ggplot","category-html5","category-javascript","category-r","tag-d3","tag-post"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Global Temperature Change in R &amp; D3 (without the vertigo) - rud.is<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/rud.is\/b\/2016\/05\/14\/global-temperature-change-in-r-d3-without-the-vertigo\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Global Temperature Change in R &amp; D3 (without the vertigo) - rud.is\" \/>\n<meta property=\"og:description\" content=\"This made the rounds on social media last week: Spiraling global temperatures from 1850-2016 (full animation) https:\/\/t.co\/YETC5HkmTr pic.twitter.com\/Ypci717AHq &mdash; Ed Hawkins (@ed_hawkins) May 9, 2016 One of the original versions was static and was not nearly as popular, but&mdash;as you can see&mdash;this one went viral. Despite the public&#8217;s infatuation with circles (I&#8217;m lookin&#8217; at you, [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rud.is\/b\/2016\/05\/14\/global-temperature-change-in-r-d3-without-the-vertigo\/\" \/>\n<meta property=\"og:site_name\" content=\"rud.is\" \/>\n<meta property=\"article:published_time\" content=\"2016-05-15T01:49:49+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-03-07T21:42:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2016\/05\/hadcrut.png?fit=2304%2C1152&ssl=1\" \/>\n\t<meta property=\"og:image:width\" content=\"2304\" \/>\n\t<meta property=\"og:image:height\" content=\"1152\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"hrbrmstr\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"hrbrmstr\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/rud.is\/b\/2016\/05\/14\/global-temperature-change-in-r-d3-without-the-vertigo\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/rud.is\/b\/2016\/05\/14\/global-temperature-change-in-r-d3-without-the-vertigo\/\"},\"author\":{\"name\":\"hrbrmstr\",\"@id\":\"https:\/\/rud.is\/b\/#\/schema\/person\/d7cb7487ab0527447f7fda5c423ff886\"},\"headline\":\"Global Temperature Change in R &#038; D3 (without the vertigo)\",\"datePublished\":\"2016-05-15T01:49:49+00:00\",\"dateModified\":\"2018-03-07T21:42:22+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/rud.is\/b\/2016\/05\/14\/global-temperature-change-in-r-d3-without-the-vertigo\/\"},\"wordCount\":661,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\/\/rud.is\/b\/#\/schema\/person\/d7cb7487ab0527447f7fda5c423ff886\"},\"image\":{\"@id\":\"https:\/\/rud.is\/b\/2016\/05\/14\/global-temperature-change-in-r-d3-without-the-vertigo\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2016\/05\/hadcrut.png?fit=2304%2C1152&ssl=1\",\"keywords\":[\"d3\",\"post\"],\"articleSection\":[\"Charts &amp; Graphs\",\"Data Visualization\",\"DataVis\",\"DataViz\",\"ggplot\",\"HTML5\",\"Javascript\",\"R\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/rud.is\/b\/2016\/05\/14\/global-temperature-change-in-r-d3-without-the-vertigo\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/rud.is\/b\/2016\/05\/14\/global-temperature-change-in-r-d3-without-the-vertigo\/\",\"url\":\"https:\/\/rud.is\/b\/2016\/05\/14\/global-temperature-change-in-r-d3-without-the-vertigo\/\",\"name\":\"Global Temperature Change in R & D3 (without the vertigo) - rud.is\",\"isPartOf\":{\"@id\":\"https:\/\/rud.is\/b\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/rud.is\/b\/2016\/05\/14\/global-temperature-change-in-r-d3-without-the-vertigo\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/rud.is\/b\/2016\/05\/14\/global-temperature-change-in-r-d3-without-the-vertigo\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2016\/05\/hadcrut.png?fit=2304%2C1152&ssl=1\",\"datePublished\":\"2016-05-15T01:49:49+00:00\",\"dateModified\":\"2018-03-07T21:42:22+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/rud.is\/b\/2016\/05\/14\/global-temperature-change-in-r-d3-without-the-vertigo\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/rud.is\/b\/2016\/05\/14\/global-temperature-change-in-r-d3-without-the-vertigo\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/rud.is\/b\/2016\/05\/14\/global-temperature-change-in-r-d3-without-the-vertigo\/#primaryimage\",\"url\":\"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2016\/05\/hadcrut.png?fit=2304%2C1152&ssl=1\",\"contentUrl\":\"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2016\/05\/hadcrut.png?fit=2304%2C1152&ssl=1\",\"width\":2304,\"height\":1152},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/rud.is\/b\/2016\/05\/14\/global-temperature-change-in-r-d3-without-the-vertigo\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/rud.is\/b\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Global Temperature Change in R &#038; D3 (without the vertigo)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/rud.is\/b\/#website\",\"url\":\"https:\/\/rud.is\/b\/\",\"name\":\"rud.is\",\"description\":\"&quot;In God we trust. All others must bring data&quot;\",\"publisher\":{\"@id\":\"https:\/\/rud.is\/b\/#\/schema\/person\/d7cb7487ab0527447f7fda5c423ff886\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/rud.is\/b\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/rud.is\/b\/#\/schema\/person\/d7cb7487ab0527447f7fda5c423ff886\",\"name\":\"hrbrmstr\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2023\/10\/ukr-shield.png?fit=460%2C460&ssl=1\",\"url\":\"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2023\/10\/ukr-shield.png?fit=460%2C460&ssl=1\",\"contentUrl\":\"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2023\/10\/ukr-shield.png?fit=460%2C460&ssl=1\",\"width\":460,\"height\":460,\"caption\":\"hrbrmstr\"},\"logo\":{\"@id\":\"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2023\/10\/ukr-shield.png?fit=460%2C460&ssl=1\"},\"description\":\"Don't look at me\u2026I do what he does \u2014 just slower. #rstats avuncular \u2022 ?Resistance Fighter \u2022 Cook \u2022 Christian \u2022 [Master] Chef des Donn\u00e9es de S\u00e9curit\u00e9 @ @rapid7\",\"sameAs\":[\"http:\/\/rud.is\"],\"url\":\"https:\/\/rud.is\/b\/author\/hrbrmstr\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Global Temperature Change in R & D3 (without the vertigo) - rud.is","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/rud.is\/b\/2016\/05\/14\/global-temperature-change-in-r-d3-without-the-vertigo\/","og_locale":"en_US","og_type":"article","og_title":"Global Temperature Change in R & D3 (without the vertigo) - rud.is","og_description":"This made the rounds on social media last week: Spiraling global temperatures from 1850-2016 (full animation) https:\/\/t.co\/YETC5HkmTr pic.twitter.com\/Ypci717AHq &mdash; Ed Hawkins (@ed_hawkins) May 9, 2016 One of the original versions was static and was not nearly as popular, but&mdash;as you can see&mdash;this one went viral. Despite the public&#8217;s infatuation with circles (I&#8217;m lookin&#8217; at you, [&hellip;]","og_url":"https:\/\/rud.is\/b\/2016\/05\/14\/global-temperature-change-in-r-d3-without-the-vertigo\/","og_site_name":"rud.is","article_published_time":"2016-05-15T01:49:49+00:00","article_modified_time":"2018-03-07T21:42:22+00:00","og_image":[{"width":2304,"height":1152,"url":"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2016\/05\/hadcrut.png?fit=2304%2C1152&ssl=1","type":"image\/png"}],"author":"hrbrmstr","twitter_card":"summary_large_image","twitter_misc":{"Written by":"hrbrmstr","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/rud.is\/b\/2016\/05\/14\/global-temperature-change-in-r-d3-without-the-vertigo\/#article","isPartOf":{"@id":"https:\/\/rud.is\/b\/2016\/05\/14\/global-temperature-change-in-r-d3-without-the-vertigo\/"},"author":{"name":"hrbrmstr","@id":"https:\/\/rud.is\/b\/#\/schema\/person\/d7cb7487ab0527447f7fda5c423ff886"},"headline":"Global Temperature Change in R &#038; D3 (without the vertigo)","datePublished":"2016-05-15T01:49:49+00:00","dateModified":"2018-03-07T21:42:22+00:00","mainEntityOfPage":{"@id":"https:\/\/rud.is\/b\/2016\/05\/14\/global-temperature-change-in-r-d3-without-the-vertigo\/"},"wordCount":661,"commentCount":2,"publisher":{"@id":"https:\/\/rud.is\/b\/#\/schema\/person\/d7cb7487ab0527447f7fda5c423ff886"},"image":{"@id":"https:\/\/rud.is\/b\/2016\/05\/14\/global-temperature-change-in-r-d3-without-the-vertigo\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2016\/05\/hadcrut.png?fit=2304%2C1152&ssl=1","keywords":["d3","post"],"articleSection":["Charts &amp; Graphs","Data Visualization","DataVis","DataViz","ggplot","HTML5","Javascript","R"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/rud.is\/b\/2016\/05\/14\/global-temperature-change-in-r-d3-without-the-vertigo\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/rud.is\/b\/2016\/05\/14\/global-temperature-change-in-r-d3-without-the-vertigo\/","url":"https:\/\/rud.is\/b\/2016\/05\/14\/global-temperature-change-in-r-d3-without-the-vertigo\/","name":"Global Temperature Change in R & D3 (without the vertigo) - rud.is","isPartOf":{"@id":"https:\/\/rud.is\/b\/#website"},"primaryImageOfPage":{"@id":"https:\/\/rud.is\/b\/2016\/05\/14\/global-temperature-change-in-r-d3-without-the-vertigo\/#primaryimage"},"image":{"@id":"https:\/\/rud.is\/b\/2016\/05\/14\/global-temperature-change-in-r-d3-without-the-vertigo\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2016\/05\/hadcrut.png?fit=2304%2C1152&ssl=1","datePublished":"2016-05-15T01:49:49+00:00","dateModified":"2018-03-07T21:42:22+00:00","breadcrumb":{"@id":"https:\/\/rud.is\/b\/2016\/05\/14\/global-temperature-change-in-r-d3-without-the-vertigo\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rud.is\/b\/2016\/05\/14\/global-temperature-change-in-r-d3-without-the-vertigo\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/rud.is\/b\/2016\/05\/14\/global-temperature-change-in-r-d3-without-the-vertigo\/#primaryimage","url":"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2016\/05\/hadcrut.png?fit=2304%2C1152&ssl=1","contentUrl":"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2016\/05\/hadcrut.png?fit=2304%2C1152&ssl=1","width":2304,"height":1152},{"@type":"BreadcrumbList","@id":"https:\/\/rud.is\/b\/2016\/05\/14\/global-temperature-change-in-r-d3-without-the-vertigo\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/rud.is\/b\/"},{"@type":"ListItem","position":2,"name":"Global Temperature Change in R &#038; D3 (without the vertigo)"}]},{"@type":"WebSite","@id":"https:\/\/rud.is\/b\/#website","url":"https:\/\/rud.is\/b\/","name":"rud.is","description":"&quot;In God we trust. All others must bring data&quot;","publisher":{"@id":"https:\/\/rud.is\/b\/#\/schema\/person\/d7cb7487ab0527447f7fda5c423ff886"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rud.is\/b\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/rud.is\/b\/#\/schema\/person\/d7cb7487ab0527447f7fda5c423ff886","name":"hrbrmstr","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2023\/10\/ukr-shield.png?fit=460%2C460&ssl=1","url":"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2023\/10\/ukr-shield.png?fit=460%2C460&ssl=1","contentUrl":"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2023\/10\/ukr-shield.png?fit=460%2C460&ssl=1","width":460,"height":460,"caption":"hrbrmstr"},"logo":{"@id":"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2023\/10\/ukr-shield.png?fit=460%2C460&ssl=1"},"description":"Don't look at me\u2026I do what he does \u2014 just slower. #rstats avuncular \u2022 ?Resistance Fighter \u2022 Cook \u2022 Christian \u2022 [Master] Chef des Donn\u00e9es de S\u00e9curit\u00e9 @ @rapid7","sameAs":["http:\/\/rud.is"],"url":"https:\/\/rud.is\/b\/author\/hrbrmstr\/"}]}},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2016\/05\/hadcrut.png?fit=2304%2C1152&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/p23idr-18U","jetpack_likes_enabled":true,"jetpack-related-posts":[{"id":4203,"url":"https:\/\/rud.is\/b\/2016\/03\/26\/nuclear-animations-in-r\/","url_meta":{"origin":4396,"position":0},"title":"Nuclear Animations in R","author":"hrbrmstr","date":"2016-03-26","format":false,"excerpt":"> UPDATE: For #rstats folks interested in what this might look like in D3, [take a gander](https:\/\/rud.is\/b\/2016\/03\/27\/nuclear-animations-in-d3\/) @jsvine (Data Editor at BuzzFeed) cleaned up and posted a [data sets of historical nuclear explosions](https:\/\/github.com\/data-is-plural\/nuclear-explosions) earlier this week. I used it to show a few plotting examples in class, but it's also\u2026","rel":"","context":"In &quot;Charts &amp; Graphs&quot;","block_context":{"text":"Charts &amp; Graphs","link":"https:\/\/rud.is\/b\/category\/charts-graphs\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2016\/03\/ogimg.png?fit=1200%2C946&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2016\/03\/ogimg.png?fit=1200%2C946&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2016\/03\/ogimg.png?fit=1200%2C946&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2016\/03\/ogimg.png?fit=1200%2C946&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2016\/03\/ogimg.png?fit=1200%2C946&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":3278,"url":"https:\/\/rud.is\/b\/2015\/02\/15\/introducing-the-streamgraph-htmlwidget-r-pacakge\/","url_meta":{"origin":4396,"position":1},"title":"Introducing the streamgraph htmlwidget R Package","author":"hrbrmstr","date":"2015-02-15","format":false,"excerpt":"We were looking for a different type of visualization for a project at work this past week and my thoughts immediately gravitated towards [streamgraphs](http:\/\/www.leebyron.com\/else\/streamgraph\/). The TLDR on streamgraphs is they they are generalized versions of stacked area graphs with free baselines across the x axis. They are somewhat [controversial](http:\/\/www.visualisingdata.com\/index.php\/2010\/08\/making-sense-of-streamgraphs\/) but\u2026","rel":"","context":"In &quot;d3&quot;","block_context":{"text":"d3","link":"https:\/\/rud.is\/b\/category\/d3\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":4209,"url":"https:\/\/rud.is\/b\/2016\/03\/27\/nuclear-animations-in-d3\/","url_meta":{"origin":4396,"position":2},"title":"Nuclear Animations in D3","author":"hrbrmstr","date":"2016-03-27","format":false,"excerpt":"As I said, I'm kinda obsessed with the \"nuclear\" data set. So much so that I made a D3 version that's similar to the R version I made the other day. I tried not to code much today (too much Easter fun going on), so I left off the size\u2026","rel":"","context":"In &quot;cartography&quot;","block_context":{"text":"cartography","link":"https:\/\/rud.is\/b\/category\/cartography\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2016\/03\/ogimg.png?fit=1200%2C946&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2016\/03\/ogimg.png?fit=1200%2C946&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2016\/03\/ogimg.png?fit=1200%2C946&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2016\/03\/ogimg.png?fit=1200%2C946&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2016\/03\/ogimg.png?fit=1200%2C946&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":2728,"url":"https:\/\/rud.is\/b\/2013\/09\/28\/obamacare-jobs-r-d3\/","url_meta":{"origin":4396,"position":3},"title":"Visualizing &#8220;ObamaCare-related&#8221; Job Cuts","author":"hrbrmstr","date":"2013-09-28","format":false,"excerpt":"UPDATE: Added some extra visualization elements since this post went live. New select menu and hover text for individual job impact detail lines in the table. I was reviewing RSS feeds when I came across this story about \"ObamaCare Employer Mandate: A List Of Cuts To Work Hours, Jobs\" over\u2026","rel":"","context":"In &quot;Charts &amp; Graphs&quot;","block_context":{"text":"Charts &amp; Graphs","link":"https:\/\/rud.is\/b\/category\/charts-graphs\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2013\/09\/oc-snap.png.png?fit=945%2C660&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2013\/09\/oc-snap.png.png?fit=945%2C660&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2013\/09\/oc-snap.png.png?fit=945%2C660&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2013\/09\/oc-snap.png.png?fit=945%2C660&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":3442,"url":"https:\/\/rud.is\/b\/2015\/05\/26\/a-quick-incomplete-comparison-of-ggplot2-rbokeh-plotting-idioms\/","url_meta":{"origin":4396,"position":4},"title":"A quick, incomplete comparison of ggplot2 &#038; rbokeh plotting idioms","author":"hrbrmstr","date":"2015-05-26","format":false,"excerpt":"I set aside a small bit of time to give [rbokeh](https:\/\/github.com\/bokeh\/rbokeh) a try and figured I'd share a small bit of code that shows how to make the \"same\" chart in both ggplot2 and rbokeh. #### What is Bokeh\/rbokeh? rbokeh is an [htmlwidget](http:\/\/htmlwidgets.org) wrapper for the [Bokeh](http:\/\/bokeh.pydata.org\/en\/latest\/) visualization library that\u2026","rel":"","context":"In &quot;Charts &amp; Graphs&quot;","block_context":{"text":"Charts &amp; Graphs","link":"https:\/\/rud.is\/b\/category\/charts-graphs\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":4474,"url":"https:\/\/rud.is\/b\/2016\/06\/28\/making-time-rivers-in-r\/","url_meta":{"origin":4396,"position":5},"title":"Making &#8220;Time Rivers&#8221; in R","author":"hrbrmstr","date":"2016-06-28","format":false,"excerpt":"Once again, @albertocairo notices an interesting chart and spurs pondering in the visualization community with [his post](http:\/\/www.thefunctionalart.com\/2016\/06\/defying-conventions-in-visualization.html) covering an unusual \"vertical time series\" chart produced for the print version of the NYTimes: I'm actually less concerned about the vertical time series chart component here since I agree with TAVE* Cairo\u2026","rel":"","context":"In &quot;Charts &amp; Graphs&quot;","block_context":{"text":"Charts &amp; Graphs","link":"https:\/\/rud.is\/b\/category\/charts-graphs\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2016\/06\/Cursor_and_RStudio-1.png?fit=1200%2C1181&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2016\/06\/Cursor_and_RStudio-1.png?fit=1200%2C1181&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2016\/06\/Cursor_and_RStudio-1.png?fit=1200%2C1181&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2016\/06\/Cursor_and_RStudio-1.png?fit=1200%2C1181&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2016\/06\/Cursor_and_RStudio-1.png?fit=1200%2C1181&ssl=1&resize=1050%2C600 3x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/rud.is\/b\/wp-json\/wp\/v2\/posts\/4396","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rud.is\/b\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rud.is\/b\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rud.is\/b\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rud.is\/b\/wp-json\/wp\/v2\/comments?post=4396"}],"version-history":[{"count":0,"href":"https:\/\/rud.is\/b\/wp-json\/wp\/v2\/posts\/4396\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rud.is\/b\/wp-json\/wp\/v2\/media\/4398"}],"wp:attachment":[{"href":"https:\/\/rud.is\/b\/wp-json\/wp\/v2\/media?parent=4396"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rud.is\/b\/wp-json\/wp\/v2\/categories?post=4396"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rud.is\/b\/wp-json\/wp\/v2\/tags?post=4396"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}