{"id":11708,"date":"2017-03-02T23:17:54","date_gmt":"2017-03-02T22:17:54","guid":{"rendered":"http:\/\/www.highcharts.com\/blog\/?p=11708"},"modified":"2026-01-12T09:16:08","modified_gmt":"2026-01-12T09:16:08","slug":"replicating-nyt-weather-app","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/tutorials\/replicating-nyt-weather-app\/","title":{"rendered":"Replicating NYT weather App"},"content":{"rendered":"

Here comes another treatment of the well-known Tufte weather chart. This time we will use it to demonstrate how to use hc_add_series, a new feature of Highcharter <\/a>package. This feature makes the more readable by allowing you to add the data argument as numeric, data frame, time series (ts, xts, ohlc) and more.<\/p>\n

For this demonstration we will try to replicate the design of the New York Time interactive chart: How Much Warmer Was Your City in 2015<\/b><\/a>, where you can choose among over 3K cities<\/b>! Let\u2019s start.<\/p>\n

\"\"<\/a><\/p>\n

DATA<\/b><\/h2>\n

First, let\u2019s download the source data from The New York Times, and the create an extra variable dt <\/i>to store the date time in a numeric format.<\/p>\n

library(printr)\r\nlibrary(tidyverse)\r\nlibrary(highcharter)\r\nlibrary(lubridate)\r\nlibrary(stringr)\r\nlibrary(forcats)\r\n\r\nurl_base <- \"http:\/\/graphics8.nytimes.com\/newsgraphics\/2016\/01\/01\/weather\/assets\"\r\nfile <- \"new-york_ny.csv\" # \"san-francisco_ca.csv\"\r\nurl_file<\/pre>\n
 <\/p>\n\n\n\n\n\n\n\n\n\n\n
date<\/th>\nmonth<\/th>\ntemp_max<\/th>\ntemp_min<\/th>\ntemp_rec_max<\/th>\ntemp_rec_min<\/th>\ntemp_avg_max<\/th>\ntemp_avg_min<\/th>\ntemp_rec_high<\/th>\ntemp_rec_low<\/th>\nprecip_value<\/th>\nprecip_actual<\/th>\nprecip_normal<\/th>\nprecip_rec<\/th>\nsnow_rec<\/th>\nannual_average_temperature<\/th>\ndeparture_from_normal<\/th>\ntotal_precipitation<\/th>\nprecipitation_departure_from_normal<\/th>\ndt<\/th>\n<\/tr>\n<\/thead>\n
2015-01-01<\/td>\n1<\/td>\n39<\/td>\n27<\/td>\n62<\/td>\n-4<\/td>\n39<\/td>\n28<\/td>\nNULL<\/td>\nNULL<\/td>\n0.00<\/td>\n5.23<\/td>\n3.65<\/td>\nNULL<\/td>\nNULL<\/td>\nNA<\/td>\nNA<\/td>\nNA<\/td>\nNA<\/td>\n1.42e+12<\/td>\n<\/tr>\n
2015-01-02<\/td>\n1<\/td>\n42<\/td>\n35<\/td>\n68<\/td>\n2<\/td>\n39<\/td>\n28<\/td>\nNULL<\/td>\nNULL<\/td>\n0.00<\/td>\nNA<\/td>\nNA<\/td>\nNULL<\/td>\nNULL<\/td>\nNA<\/td>\nNA<\/td>\nNA<\/td>\nNA<\/td>\n1.42e+12<\/td>\n<\/tr>\n
2015-01-03<\/td>\n1<\/td>\n42<\/td>\n33<\/td>\n64<\/td>\n-4<\/td>\n39<\/td>\n28<\/td>\nNULL<\/td>\nNULL<\/td>\n0.71<\/td>\nNA<\/td>\nNA<\/td>\nNULL<\/td>\nNA<\/td>\nNA<\/td>\nNA<\/td>\nNA<\/td>\nNA<\/td>\n1.42e+12<\/td>\n<\/tr>\n
2015-01-04<\/td>\n1<\/td>\n56<\/td>\n41<\/td>\n66<\/td>\n-3<\/td>\n39<\/td>\n27<\/td>\nNULL<\/td>\nNULL<\/td>\n1.01<\/td>\nNA<\/td>\nNA<\/td>\nNULL<\/td>\nNULL<\/td>\nNA<\/td>\nNA<\/td>\nNA<\/td>\nNA<\/td>\n1.42e+12<\/td>\n<\/tr>\n
2015-01-05<\/td>\n1<\/td>\n49<\/td>\n21<\/td>\n64<\/td>\n-4<\/td>\n38<\/td>\n27<\/td>\nNULL<\/td>\nNULL<\/td>\n1.01<\/td>\nNA<\/td>\nNA<\/td>\nNULL<\/td>\nNULL<\/td>\nNA<\/td>\nNA<\/td>\nNA<\/td>\nNA<\/td>\n1.42e+12<\/td>\n<\/tr>\n
2015-01-06<\/td>\n1<\/td>\n22<\/td>\n19<\/td>\n72<\/td>\n-2<\/td>\n38<\/td>\n27<\/td>\nNULL<\/td>\nNULL<\/td>\n1.06<\/td>\nNA<\/td>\nNA<\/td>\nNULL<\/td>\nNULL<\/td>\nNA<\/td>\nNA<\/td>\nNA<\/td>\nNA<\/td>\n1.42e+12<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
SETUP<\/h2>\n
Next,\u00a0we\u2019ll create a chart framework using Highcharts library:<\/p>\n
hc %\r\n  hc_xAxis(type = \"datetime\", showLastLabel = FALSE,\r\n           dateTimeLabelFormats = list(month = \"%B\")) %>% \r\n  hc_tooltip(shared = TRUE, useHTML = TRUE,\r\n             headerFormat = as.character(tags$small(\"{point.x: %b %d}\", tags$br()))) %>% \r\n  hc_plotOptions(series = list(borderWidth = 0, pointWidth = 4)) %>% \r\n  hc_add_theme(hc_theme_smpl())\r\n\r\nhc\r\n<\/pre>\n