Reading

Browse the HTML Widgets page for many more examples. Take notes in your readme.md about potential uses in your project.
Explore the DyGraphs webpage

Tasks

Download daily weather data for Buffalo, NY using an API
Generate a dynamic html visualization of the timeseries.
Save the graph to your project folder using Export->Save as Webpage

Background

In this session you will explore several ways to generate dynamic and interactive data displays. These include making maps and graphs that you can pan/zoom, select features for more information, and interact with in other ways. The most common output format is HTML, which can easily be embedded in a website (such as your final project!).

library(dplyr)
library(ggplot2)
library(ggmap)
library(htmlwidgets)
library(widgetframe)

If you don’t have the packages above, install them in the package manager or by running install.packages("widgetframe"), etc.

Objective

Make a dygraph of recent daily maximum temperature data from Buffalo, NY.

Detailed Steps

First use the following code to download the daily weather data.

library(tidyverse)
library(rnoaa)
library(xts)

## Loading required package: zoo

## 
## Attaching package: 'zoo'

## The following objects are masked from 'package:base':
## 
##     as.Date, as.Date.numeric

## 
## Attaching package: 'xts'

## The following object is masked from 'package:leaflet':
## 
##     addLegend

## The following objects are masked from 'package:dplyr':
## 
##     first, last

library(dygraphs)
 
d=meteo_tidy_ghcnd("USW00014733",
                   date_min = "2016-01-01", 
                   var = c("TMAX"),
                   keep_flags=T) %>% 
   mutate(date=as.Date(date),
          tmax=as.numeric(tmax)/10) #Divide the tmax data by 10 to convert to degrees.

## using cached file: ~/Library/Caches/R/noaa_ghcnd/USW00014733.dly

## date created (size, mb): 2022-05-10 12:03:21 (8.568)

## file min/max dates: 1938-05-01 / 2022-05-31

Remaining steps:

Convert d into an xts time series object using xts(). You will need to specifify which column has the data (d$tmax) and order.by=d$date. See ?xts for help.
Use dygraph() to draw the plot
Set the title of the dygraph to be main="Daily Maximum Temperature in Buffalo, NY"
Add a dyRangeSelector() with a dateWindow of c("2020-01-01", "2020-10-31")
Explore other options. You could download another variable (precipitation?) and add it to the plot. Or imagine another way to visualize the data using one of the other interactive libraries.

Output

At a minimum, your final graph should look something like this:

What other visualizations can you make with these data?

Dynamic HTML graph of Daily Temperatures

Using DyGraph library.