In this video I show you how you can make nice interactive charts with the package in R. I go over some issues I ran into regarding how interacts with different date formats. Beneath the video you can find the code to reproduce it yourself and the necessary data here.

If this is useful for you please consider supporting me or join my mailing list if you want to stay up to date with videos like this one or about new tools that can help you with your data work.

The video:

The code:



#read in the data with fread from data.table
data <- data.table::fread("sunrise_vienna_2019_zamg.csv", encoding = "UTF-8")

#rename the columns
colnames(data) <- c("Day", "Month", "Year", "sunrise", "sunset", "moonrise", "moonset")

#use mgsub to rename the german months with numbers
data$Month <- textclean::mgsub(data$Month, unique(data$Month), seq(1:12))

#make a new column with the whole date, this uses data.table
data[, date := lubridate::dmy(paste(data$Day, data$Month, data$Year, sep="-"))]

#transform the time from character to a date-time format
data$sunrise <- as.POSIXct(data$sunrise, format = "%H:%M")
data$sunset <- as.POSIXct(data$sunset, format = "%H:%M")

# #lubridate doesn't work with the y-axis of plotly
# data$sunrise <- lubridate::hm(data$sunrise)
# data$sunset <- lubridate::hm(data$sunset)

#calculate the length of days and round them so they have no digits
data$day_length <- round(data$sunset - data$sunrise, 0)

#start preparing the plot
daylength_plot <- plot_ly(data = data, x = ~date, y = ~sunrise, mode = "lines", type = "scatter", 
        #we name the first line (sunrise) and edit the info for the mousover and change
        #the color and "thickness" of the line
        name = "Sunrise", line=list(width=5, color = "#ffca7c"),
        #text that is shown on the mouseover
        hoverinfo = "text", text = ~paste0("Date: ", date ,
                                           "\n", "Sunrise: ", format(sunrise, "%H:%M") ,
                                           "\n", "Sunset: ", format(sunset, "%H:%M"),
                                           "\n", "Length of Day: ", day_length)
) %>%
  #we add the second line (sunset), name it and set color and "thickness"
  add_trace(y = ~sunset, mode = 'lines', name = "Sunset", 
            line=list(width=5, color = "#d4916e")
  ) %>%
  #we add the length of the days as vertical lines
  add_segments(x = ~date, xend = ~date, y = ~sunrise, yend = ~sunset, name = "Length of Day",
               line=list(width=0.5, color = "#ffca7c")
  ) %>%
  #we set some global options for the whole plot
  layout(title = "Length of Days in Vienna 2019",
         xaxis = list(title = "Date"),
         yaxis = list(title = "Time of Day", 
                      #we revers the y-axis so the mornings are on top
                      autorange = "reversed", 
                      #we set the y-axis to date so it correctly maps the variable
                      type = "date", 
                      #we also set the ticks so they correctly map the hours and minutes

#for publishing the plot on we set our username and api key
# Sys.setenv("plotly_username"="YOURUSERNAME")
# Sys.setenv("plotly_api_key"="YOURAPIKEY")
# api_create(daylength_plot, filename = "daylength_vienna_2019", sharing = "public",
#            fileopt = "overwrite")

The chart: