{"id":9486,"date":"2016-07-06T13:27:18","date_gmt":"2016-07-06T11:27:18","guid":{"rendered":"http:\/\/www.highcharts.com\/blog\/?p=9486"},"modified":"2026-01-12T09:01:49","modified_gmt":"2026-01-12T09:01:49","slug":"217-when-not-to-use-animations-in-charts","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/best-practices\/217-when-not-to-use-animations-in-charts\/","title":{"rendered":"When not to use animations in charts"},"content":{"rendered":"

Wile E. Coyote is not the only one running in circles.\u00a0Recently, this animated gif of the earth\u2019s gradual temperature rise made its way across the web.
\nImportant topic. Important data.
\nHowever, is this the best way to bring the data to life?
\nSome sites like Gizmodo<\/a> made a reference to this animation as \u201cOne of the Most Convincing Climate Change Visualizations We’ve Ever Seen<\/em>.\u201d<\/strong> Mmmm\u2026 OK! A kind of click-bait IMHO, but at least the title said visualization<\/em> \ud83d\ude42<\/p>\n

But for me, animations aren\u2019t always the best choice. I remember a quote, sadly, I don\u2019t remember the author, maybe\/surely was Alberto Cairo (If you know it please tell me who was!)<\/p>\n

\u201cAnimations force the user to compare what they see with what they remember (saw).\u201d<\/strong>
\nAnother thing I don\u2019t like about this spiral, is how the density of data at the end of the animation obscures information about the incremental change of speed along the time axis.
\n<\/p>\n

DATA & PACKAGES<\/h2>\n

We\u2019ll use the data provide by hrbrmstr<\/a> in his repo<\/a>. Bob Rudis made a beautiful representation of the data via ggplot2 and D3 using ageom_segment\/column range viz.<\/p>\n

About the packages: Here we\u2019ll use a lot of dplyr, tidyr, purrr for the data manipulation, for the colors we\u2019ll use viridis, lastly I\u2019ll use\u00a0highcharter<\/a> for charts.\u00a0<\/span><\/p>\n

library<\/span>(<\/span>\"highcharter\"<\/span>)<\/span>\r\nlibrary<\/span>(<\/span>\"readr\"<\/span>)<\/span>\r\nlibrary<\/span>(<\/span>\"dplyr\"<\/span>)<\/span>\r\nlibrary<\/span>(<\/span>\"tidyr\"<\/span>)<\/span>\r\nlibrary<\/span>(<\/span>\"lubridate\"<\/span>)<\/span>\r\nlibrary<\/span>(<\/span>\"purrr\"<\/span>)<\/span>\r\nlibrary<\/span>(<\/span>\"viridis\"<\/span>)<\/span>\r\noptions<\/span>(<\/span>\r\n  highcharter.theme<\/span> =<\/span> hc_theme_darkunica<\/span>(<\/span>\r\n    chart<\/span>  =<\/span> list<\/span>(<\/span>\r\n      style<\/span> =<\/span> list<\/span>(<\/span>fontFamily<\/span> =<\/span> \"Roboto Condensed\"<\/span>)<\/span>,\r\n      backgroundColor<\/span> =<\/span> \"#323331\"<\/span>\r\n    )<\/span>,\r\n    yAxis<\/span> =<\/span> list<\/span>(<\/span>\r\n      gridLineColor<\/span> =<\/span> \"#B71C1C\"<\/span>,\r\n      labels<\/span> =<\/span> list<\/span>(<\/span>format<\/span> =<\/span> \"{value} C\"<\/span>, useHTML<\/span> =<\/span> TRUE<\/span>)<\/span>\r\n    )<\/span>,\r\n    plotOptions<\/span> =<\/span> list<\/span>(<\/span>series<\/span> =<\/span> list<\/span>(<\/span>showInLegend<\/span> =<\/span> FALSE<\/span>)<\/span>)<\/span>\r\n  )<\/span>\r\n)<\/span>\r\ndf<\/span> <-<\/span> read_csv<\/span>(<\/span>\"https:\/\/raw.githubusercontent.com\/hrbrmstr\/hadcrut\/master\/data\/temps.csv\"<\/span>)<\/span>\r\ndf<\/span> <-<\/span> df<\/span> %>%<\/span> \r\n  mutate<\/span>(<\/span>date<\/span> =<\/span> ymd<\/span>(<\/span>year_mon<\/span>)<\/span>,\r\n         tmpstmp<\/span> =<\/span> datetime_to_timestamp<\/span>(<\/span>date<\/span>)<\/span>,\r\n         year<\/span> =<\/span> year<\/span>(<\/span>date<\/span>)<\/span>,\r\n         month<\/span> =<\/span> month<\/span>(<\/span>date<\/span>, label<\/span> =<\/span> TRUE<\/span>)<\/span>,\r\n         color_m<\/span> =<\/span> colorize<\/span>(<\/span>median<\/span>, viridis<\/span>(<\/span>10<\/span>, option<\/span> =<\/span> \"B\"<\/span>)<\/span>)<\/span>,\r\n         color_m<\/span> =<\/span> hex_to_rgba<\/span>(<\/span>color_m<\/span>, 0.65<\/span>)<\/span>)<\/span>\r\ndfcolyrs<\/span> <-<\/span> df<\/span> %>%<\/span> \r\n  group_by<\/span>(<\/span>year<\/span>)<\/span> %>%<\/span> \r\n  summarise<\/span>(<\/span>median<\/span> =<\/span> median<\/span>(<\/span>median<\/span>)<\/span>)<\/span> %>%<\/span> \r\n  ungroup<\/span>(<\/span>)<\/span> %>%<\/span> \r\n  mutate<\/span>(<\/span>color_y<\/span> =<\/span> colorize<\/span>(<\/span>median<\/span>, viridis<\/span>(<\/span>10<\/span>, option<\/span> =<\/span> \"B\"<\/span>)<\/span>)<\/span>,\r\n         color_y<\/span> =<\/span> hex_to_rgba<\/span>(<\/span>color_y<\/span>, 0.65<\/span>)<\/span>)<\/span> %>%<\/span> \r\n  select<\/span>(<\/span>-<\/span>median<\/span>)<\/span>\r\ndf<\/span> <-<\/span> left_join<\/span>(<\/span>df<\/span>, dfcolyrs<\/span>, by<\/span> =<\/span> \"year\"<\/span>)<\/span><\/pre>\n
The data is ready. Let\u2019s go!<\/p>\n\n\n\n\n\n\n\n\n\n\n
year_mon<\/th>\nmedian<\/th>\nlower<\/th>\nupper<\/th>\nyear<\/th>\ndecade<\/th>\nmonth<\/th>\ndate<\/th>\ntmpstmp<\/th>\ncolor_m<\/th>\ncolor_y<\/th>\n<\/tr>\n<\/thead>\n
1850-01-01<\/td>\n-0.702<\/td>\n-1.102<\/td>\n-0.299<\/td>\n1850<\/td>\n1850<\/td>\nJan<\/td>\n1850-01-01<\/td>\n-3.786826e+12<\/td>\nrgba(2,1,10,0.65)<\/td>\nrgba(87,16,107,0.65)<\/td>\n<\/tr>\n
1850-02-01<\/td>\n-0.284<\/td>\n-0.675<\/td>\n0.114<\/td>\n1850<\/td>\n1850<\/td>\nFeb<\/td>\n1850-02-01<\/td>\n-3.784147e+12<\/td>\nrgba(107,23,108,0.65)<\/td>\nrgba(87,16,107,0.65)<\/td>\n<\/tr>\n
1850-03-01<\/td>\n-0.732<\/td>\n-1.080<\/td>\n-0.383<\/td>\n1850<\/td>\n1850<\/td>\nMar<\/td>\n1850-03-01<\/td>\n-3.781728e+12<\/td>\nrgba(1,0,8,0.65)<\/td>\nrgba(87,16,107,0.65)<\/td>\n<\/tr>\n
1850-04-01<\/td>\n-0.570<\/td>\n-0.903<\/td>\n-0.237<\/td>\n1850<\/td>\n1850<\/td>\nApr<\/td>\n1850-04-01<\/td>\n-3.779050e+12<\/td>\nrgba(9,4,26,0.65)<\/td>\nrgba(87,16,107,0.65)<\/td>\n<\/tr>\n
1850-05-01<\/td>\n-0.325<\/td>\n-0.662<\/td>\n0.006<\/td>\n1850<\/td>\n1850<\/td>\nMay<\/td>\n1850-05-01<\/td>\n-3.776458e+12<\/td>\nrgba(84,15,107,0.65)<\/td>\nrgba(87,16,107,0.65)<\/td>\n<\/tr>\n
1850-06-01<\/td>\n-0.213<\/td>\n-0.515<\/td>\n0.084<\/td>\n1850<\/td>\n1850<\/td>\nJun<\/td>\n1850-06-01<\/td>\n-3.773779e+12<\/td>\nrgba(148,38,100,0.65)<\/td>\nrgba(87,16,107,0.65)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
SPIRAL<\/h2>\n
First of all let\u2019s try to replicate the chart\/gif\/animation. \u00a0Here we\u2019ll construct a\u00a0list<\/code>\u00a0of series to use with\u00a0hc_add_series_list<\/code>\u00a0function.<\/p>\n
lsseries<\/span> <-<\/span> df<\/span> %>%<\/span> \r\n  group_by<\/span>(<\/span>year<\/span>)<\/span> %>%<\/span> \r\n  do<\/span>(<\/span>\r\n    data<\/span> =<\/span> .$<\/span>median<\/span>,\r\n    color<\/span> =<\/span> first<\/span>(<\/span>.$<\/span>color_y<\/span>)<\/span>)<\/span> %>%<\/span> \r\n  mutate<\/span>(<\/span>name<\/span> =<\/span> year<\/span>)<\/span> %>%<\/span> \r\n  list.parse3<\/span>(<\/span>)<\/span>\r\nhc1<\/span> <-<\/span> highchart<\/span>(<\/span>)<\/span> %>%<\/span> \r\n  hc_chart<\/span>(<\/span>polar<\/span> =<\/span> TRUE<\/span>)<\/span> %>%<\/span> \r\n  hc_plotOptions<\/span>(<\/span>\r\n    series<\/span> =<\/span> list<\/span>(<\/span>\r\n      marker<\/span> =<\/span> list<\/span>(<\/span>enabled<\/span> =<\/span> FALSE<\/span>)<\/span>,\r\n      animation<\/span> =<\/span> TRUE<\/span>,\r\n      pointIntervalUnit<\/span> =<\/span> \"month\"<\/span>)<\/span>\r\n  )<\/span> %>%<\/span>\r\n  hc_legend<\/span>(<\/span>enabled<\/span> =<\/span> FALSE<\/span>)<\/span> %>%<\/span> \r\n  hc_xAxis<\/span>(<\/span>type<\/span> =<\/span> \"datetime\"<\/span>, min<\/span> =<\/span> 0<\/span>, max<\/span> =<\/span> 365<\/span> *<\/span> 24<\/span> *<\/span> 36e5<\/span>,\r\n           labels<\/span> =<\/span> list<\/span>(<\/span>format<\/span> =<\/span> \"{value:%B}\"<\/span>)<\/span>)<\/span> %>%<\/span>\r\n  hc_tooltip<\/span>(<\/span>headerFormat<\/span> =<\/span> \"{point.key}\"<\/span>,\r\n             xDateFormat<\/span> =<\/span> \"%B\"<\/span>,\r\n             pointFormat<\/span> =<\/span> \" {series.name}: {point.y}\"<\/span>)<\/span> %>%<\/span> \r\n  hc_add_series_list<\/span>(<\/span>lsseries<\/span>)<\/span>\r\nhc1<\/span><\/pre>\n
Ok!
\n(Without the glitz of the animation component, this doesn’t work that well…)
\n