---
title: "HTML Widgets Showcase"
output: 
  flexdashboard::flex_dashboard:
    storyboard: true
    social: menu
    source: embed
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = FALSE)
library(flexdashboard)
library(knitr)
library(ggplot2)
library(tidyverse)
library(readxl)
library(dplyr)
library(xts)
library(zoo)
library(lubridate) 

fit <- read.csv("~/Documents/CourseWork/Grad Program/Summer 2017/Final Assignment/fitbit_dataset.csv")
fit_rev <- subset(fit, fit$Time.in.Bed > 0)

## combine activity values into a summary column
fit_rev$total_act <- fit_rev[,7]+fit_rev[,8]+fit_rev[,9]

## convert minutes to hours
fit_rev$Minutes.Asleep <- fit_rev[,11]/60

## create day of week day column
fit_rev$Weekday <- wday(parse_date_time(fit_rev[,1], 'mdy'))

## create day of week day column
fit_rev$Month <- month(parse_date_time(fit_rev[,1], 'mdy'))

```

### The Quantified Self assignment overview

```{r}
gauge(42, min = 0, max = 100, symbol = '%', gaugeSectors(
success = c(80, 100), warning = c(40, 79), danger = c(0, 39)
))
```

***
A project for ANLY512: Data Visualization

The Quantified Self movement grew from the popularity and growth of the internet of things, the mass collection of personal information, and mobile technologies (primarily wearable computing). This final class project uses a collection of seven months of data on sleep habits and physical activity captured by an activity tracker. In particular, I used a Fitbit Charge 2 which tracks a wide variety of data points related to body, food intake, physical activity, and sleep. 

The goal of the project is to collect, analyze and visualize the data using the tools and methods covered in class. Additionally, using the data-driven approach, I will create a summary which answers the following questions based on the data collected 1) how much sleep am I getting 2) how does an abundance or lack of sleep affect my activity level 3) when am I the most active 4) how do 'Number of Awakenings' effect my sleep 5) 


### Data preparation

```{r}
kable(fit_rev[1:25,], caption="Sample raw data")

```

***

https://github.com/rstudio/d3heatmap/

- Highlight rows/columns by clicking axis labels

- Click and drag over colormap to zoom in (click on colormap to zoom out)

- Optional clustering and dendrograms, courtesy of base::heatmap


### Question 1

```{r}
fill <- "gold1"
line <- "goldenrod2"

p1 <- ggplot(fit_rev, aes(x = Weekday, y=Minutes.Asleep)) + 
  geom_boxplot(aes(group = Weekday), fill = fill, colour = line) +
  scale_x_discrete(limits=c("Sun","Mon","Tues","Wed","Thur","Fri","Sat")) +
  labs(title = "Hours asleep per week day", x = "Weekdays", y = "Hours") +
  theme_minimal()
p1
p2 <- ggplot(fit_rev, aes(x = Month, y=Minutes.Asleep)) + 
  geom_boxplot(aes(group = Month), fill = fill, colour = line) +
  scale_x_discrete(limits=c("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")) +
  labs(title = "Hours asleep per month", x = "Months", y = "Hours") +
  theme_minimal()
p2
#fit <- fit[1:196,]
#fit$Weekday <- factor(fit$Weekday, #levels=c("Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"))
#fit_bg <- fit

#p <- ggplot(fit, aes(x=fit$Date, y=fit$hrs.asleep, group=fit$Weekday)) + 
#  geom_line(mapping=aes(color=fit$Weekday)) + theme_light() + 
#  theme(axis.ticks = element_blank(), axis.text.x = element_blank()) +
#  guides(colour = guide_legend("DOW")) +
#  labs(title = "#1 Hours asleep by Day of Week (DOW)",x = "Jan 1 - July 31", y="Hours asleep")
#p
```

***

https://rstudio.github.io/dygraphs/

- Automatically plots xts time series objects (or any object convertible to xts).

- Highly configurable axis and series display (including optional second Y-axis).

- Rich interactive features including zoom/pan and series/point highlighting.

- Display upper/lower bars (e.g. prediction intervals) around series.
- Various graph overlays including shaded regions, event lines, and point annotations.


### Question 2

```{r}
library(plotly)
p <- ggplot(data = diamonds, aes(x = cut, fill = clarity)) +
            geom_bar(position = "dodge")
ggplotly(p)
```

***

https://plot.ly/ggplot2/

If you use ggplot2, `ggplotly()` converts your plots to an interactive, web-based version! It also provides sensible tooltips, which assists decoding of values encoded as visual properties in the plot.

plotly supports some chart types that ggplot2 doesn't (such as 3D surface, point, and line plots). You can create these (or any other plotly) charts using `plot_ly()`.


### Question 3

```{r}
library(metricsgraphics)
mjs_plot(mtcars, x=wt, y=mpg) %>%
  mjs_point(color_accessor=carb, size_accessor=carb) %>%
  mjs_labs(x="Weight of Car", y="Miles per Gallon")
```

***

https://hrbrmstr.github.io/metricsgraphics/

Building metricsgraphics charts follows the “piping” idiom made popular through the magrittr, ggvis and dplyr packages. This makes it possible to avoid one giant function with a ton of parameters and facilitates breaking out the chart building into logical steps. 

While MetricsGraphics.js charts may not have the flexibility of ggplot2


### Question 4

```{r}
library(metricsgraphics)
mjs_plot(mtcars, x=wt, y=mpg) %>%
  mjs_point(color_accessor=carb, size_accessor=carb) %>%
  mjs_labs(x="Weight of Car", y="Miles per Gallon")
```

***

https://hrbrmstr.github.io/metricsgraphics/

Building metricsgraphics charts follows the “piping” idiom made popular through the magrittr, ggvis and dplyr packages. This makes it possible to avoid one giant function with a ton of parameters and facilitates breaking out the chart building into logical steps. 

While MetricsGraphics.js charts may not have the flexibility of ggplot2


### Question 5

```{r}
library(metricsgraphics)
mjs_plot(mtcars, x=wt, y=mpg) %>%
  mjs_point(color_accessor=carb, size_accessor=carb) %>%
  mjs_labs(x="Weight of Car", y="Miles per Gallon")
```

***

https://hrbrmstr.github.io/metricsgraphics/

Building metricsgraphics charts follows the “piping” idiom made popular through the magrittr, ggvis and dplyr packages. This makes it possible to avoid one giant function with a ton of parameters and facilitates breaking out the chart building into logical steps. 

While MetricsGraphics.js charts may not have the flexibility of ggplot2


### Summary

```{r}
library(metricsgraphics)
mjs_plot(mtcars, x=wt, y=mpg) %>%
  mjs_point(color_accessor=carb, size_accessor=carb) %>%
  mjs_labs(x="Weight of Car", y="Miles per Gallon")
```

***

https://hrbrmstr.github.io/metricsgraphics/

Building metricsgraphics charts follows the “piping” idiom made popular through the magrittr, ggvis and dplyr packages. This makes it possible to avoid one giant function with a ton of parameters and facilitates breaking out the chart building into logical steps. 

While MetricsGraphics.js charts may not have the flexibility of ggplot2