---
title: "Housing market dashboard by @lenkiefer"
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
    vertical_layout: fill
    social: menu
    source_code: embed
    theme: cerulean

---

```{r setup, include=T}
library(flexdashboard)
library(tidyverse,quietly=T)
library(data.table,quietly=T)
library(htmltools)
library(htmlTable,quietly=T)
library(viridis,quietly=T)
library(DT,quietly=T)
library(plotly,quietly=T)
library(scales,quietly=T)
library(readxl)
library(crosstalk)
library(bsplus)
```


```{r setup-data, cache=F,include=F}
####################
####  Load Data ####
####################

####################################################################################################

#### Load House Price Data
#### See for discussion http://lenkiefer.com/2016/12/03/visual-meditations-on-house-prices-part7         
####################################################################################################

df <- fread("data/fmhpi2016q3.txt")


df$date<-as.Date(df$date, format="%m/%d/%Y")
df<-df[state !="US.NSA"]
df<-df[state=="US.SA",state:="US"]
#Now uses some data table caclulations to compute percent changes in house prices by state
df<-df[,hpa:=c(NA,((1+diff(hpi)/hpi))^12)-1,by=state]  
df<-df[,hpa12:=c(rep(NA,12),((1+diff(hpi,12)/hpi))^1)-1,by=state]  
df<-df[,hpa3:=c(rep(NA,12),((1+diff(hpi,3)/hpi))^4)-1,by=state]  
#create lags of state
df<-df[, hpi12 :=  shift(hpi,12), by=state]
#compute pre-2008 peak
df[,hpi.max08:=max(ifelse(year<2009,hpi,0),na.rm=T),by=state]
#compute post-2008 trough
df[,hpi.min08:=min(ifelse(year>2008,hpi,1000),na.rm=T),by=state]
df[,mytext:=paste0(state,":",round(hpi,1)," on ",as.character(date,format="%b-%Y"))]
df[,mytext2:=paste0(state,":",percent(hpa12)," on ",as.character(date,format="%b-%Y"))]

# Resrict data to only after 2004 
df<-df[year>2004,]


# Set up for cross talk:
d <- SharedData$new(df[ year>1999,], ~state)
d3a<-group_by(df[year>1999,],state)
d3a$st2<-d3a$state
d3 <- SharedData$new(d3a, ~state)

####################################################################################################

#### Load Mortgage Rates Data
#### See for discussion http://lenkiefer.com/2017/01/08/mortgage-rate-viewer

####################################################################################################

dt<- read_excel('data/rates.xlsx',sheet= 'rates')
dt$date<-as.Date(dt$date, format="%m/%d/%Y")
dt<-data.table(dt) 
dt<-as.data.frame(dt[order(-date),])  #sort, data tables make this easier
```

Info
===================================== 

Column {data-width=250}
-----------------------------------------------------------------------

### About

```{r}
valueBox("Housing market dashboard", icon = "fa-question",href="#info",color="success")
```

### Interactive mortgage rate chart

```{r}
valueBox("Mortgage rates", icon = "fa-line-chart",href="#mortgage-rates")
```


### Interactive house price chart
    
```{r}
valueBox("House Prices", icon = "fa-bar-chart",href="#house-prices")
```
   
### Interactive data tables

```{r}
valueBox("Tables", icon = "fa-table",href="#data-tables")
```

### Linked chart and table

```{r}
valueBox("Linked", icon = "fa-link",href="#linked-chart-with-table")
```
   
Column {data-width=1000}
-----------------------------------------------------------------------

### All about this page

If you have been [following me](https://twitter.com/lenkiefer), then you know I like to share all sorts of data visualizations and post some code for creating those charts on [my webpage lenkiefer.com](http://lenkiefer.com/).

In this flexdashboard I've collected some of my favorite data visualizations.  It's got:

* Interactive mortgage rate visualizations
* Interactive house price visualizations
* Data tables for mortgage rates and house prices

This simple dashboard was built in R using [crosstalk]( http://rstudio.github.io/crosstalk/), [plotly]( https://plot.ly/r/), and [data tables]( https://rstudio.github.io/DT/).  By using [htmlwidgets]( http://www.htmlwidgets.org/) we can create an interactive dashboard in a static webpage.
In this version I created a few line charts and data tables. Then I created a linked view using crosstalk to enable you to filter the table and chart simultaneously.

You can get the source code by clicking on the top right.

If you have not been following me, then maybe you want to?  Check out my timeline below for a preview of what you'll get from me.

```{r, echo=FALSE}
htmltools::includeHTML("lentweet.html")
```

Mortgage Rates
===================================== 

Column {data-width=250}
-----------------------------------------------------------------------

### About

```{r}
valueBox("Housing market dashboard", icon = "fa-question",href="#info")
```

### Interactive mortgage rate chart

```{r}
valueBox("Mortgage rates", icon = "fa-line-chart",href="#mortgage-rates",color="success")
```


### Interactive house price chart
    
```{r}
valueBox("House Prices", icon = "fa-bar-chart",href="#house-prices")
```
   
### Interactive data tables

```{r}
valueBox("Tables", icon = "fa-table",href="#data-tables")
```

### Linked chart and table

```{r}
valueBox("Linked", icon = "fa-link",href="#linked-chart-with-table")
```


Column {data-width=1000 .tabset .tabset-fade}
-----------------------------------------------------------------------

### 30-year fixed mortgage rates

```{r}
g<-
  ggplot(data=subset(dt,year(date)>1890),aes(x=date,y=rate30))+geom_line(color=viridis(10)[8])+
  theme_minimal()+
  labs(x="",y="",title="30-year fixed mortgage rates (%)",
       caption="@lenkiefer Source: Freddie Mac Primary Mortgage Market Survey")+
  theme(plot.caption=element_text(hjust=0),
        plot.title=element_text(face="bold",size=10))

ggplotly(g)
```

### 15-year fixed mortgage rates

```{r}
g<-
  ggplot(data=subset(dt,year(date)>1990),aes(x=date,y=rate15))+geom_line(color=viridis(10)[4])+
  theme_minimal()+
  labs(x="",y="",title="15-year fixed mortgage rates (%)",
       caption="@lenkiefer Source: Freddie Mac Primary Mortgage Market Survey")+
  theme(plot.caption=element_text(hjust=0),
        plot.title=element_text(face="bold",size=10))

ggplotly(g)

```


### 5/1 Hybrid Adjustable Rate Mortgage Rates

```{r}

g<-
  ggplot(data=subset(dt,year(date)>=2005),aes(x=date,y=rate51))+geom_line(color=viridis(10)[5])+
  theme_minimal()+
  labs(x="",y="",title="5/1 Hybrid adjustable rate mortgage rates (%)",
       caption="@lenkiefer Source: Freddie Mac Primary Mortgage Market Survey")+
  theme(plot.caption=element_text(hjust=0),
        plot.title=element_text(face="bold",size=10))

ggplotly(g)

```

House Prices
===================================== 

Column {data-width=250}
-----------------------------------------------------------------------

### About

```{r}
valueBox("Housing market dashboard", icon = "fa-question",href="#info")
```

### Interactive mortgage rate chart

```{r}
valueBox("Mortgage rates", icon = "fa-line-chart",href="#mortgage-rates")
```


### Interactive house price chart
    
```{r}
valueBox("House Prices", icon = "fa-bar-chart",href="#house-prices",color="success")
```
   
### Interactive data tables

```{r}
valueBox("Tables", icon = "fa-table",href="#data-tables")
```

### Linked chart and table

```{r}
valueBox("Linked", icon = "fa-link",href="#linked-chart-with-table")
```

Column {data-width=1000 .tabset .tabset-fade}
-----------------------------------------------------------------------

### National Price Trends

```{r}
g<-
  ggplot(data=df[state=="US",],aes(x=date,y=hpi,text=mytext,group=state))+geom_path()+
  theme_minimal()+labs(x="",y="Seasonally-adjusted index (December 2000=100)",title="Freddie Mac House Price Index for the United States")

ggplotly(g,tooltip=c("text"))
```

### National Annual Appreciation Trends

```{r}
g<-
  ggplot(data=df[state=="US",],aes(x=date,y=hpa12,text=mytext2,group=state))+geom_path()+
  theme_minimal()+labs(x="",y="Seasonally-adjusted index (December 2000=100)",title="Freddie Mac House Price Index for the United States")+scale_y_continuous(label=percent)

ggplotly(g,tooltip=c("text"))
```


### State Price Trends

Each line represents a state. Use the filter box to highlight an individual state.

```{r}
bscols(widths=c(2,NA),
  list(filter_select("state", "Select state to highlight for plot", d3, ~state,multiple=F)),
  plot_ly(data=d3,x = ~date, y = ~hpa12, text=~mytext2,height=750) %>% 
    add_lines(name="Selected state States",colors="red",alpha=0.7, hoverinfo = "text") %>% 
    add_lines(name="All State",data=d3a,x=~date,y=~hpa12,
              colors="black",color=~state,alpha=0.1,showlegend=F,hoverinfo="none") %>%
     layout(title = "Annual Percent Change in House Prices",xaxis = list(title="Date"), yaxis = list(title="Annual % Change in House Prices by State"))
  )
```

Data Tables
===================================== 

Column {data-width=250}
-----------------------------------------------------------------------

### About

```{r}
valueBox("Housing market dashboard", icon = "fa-question",href="#info")
```

### Interactive mortgage rate chart

```{r}
valueBox("Mortgage rates", icon = "fa-line-chart",href="#mortgage-rates")
```


### Interactive house price chart
    
```{r}
valueBox("House Prices", icon = "fa-bar-chart",href="#house-prices")
```
   
### Interactive data tables

```{r}
valueBox("Tables", icon = "fa-table",href="#data-tables",color="success")
```

### Linked chart and table

```{r}
valueBox("Linked", icon = "fa-link",href="#linked-chart-with-table")
```

Column {data-width=1000 .tabset .tabset-fade}
-----------------------------------------------------------------------

### Rates table

```{r}
dt<- read_excel('data/rates.xlsx',sheet= 'rates')
dt$date<-as.Date(dt$date, format="%m/%d/%Y")
dt<-data.table(dt) 
dt<-as.data.frame(dt[order(-date),])  #sort, data tables make this easier
datatable(dt[,1:4],filter = 'top',options=list(pageLength=25,searching=F),
          colnames=c("Date","30-year Fixed Rate Mortgage (%)","15-year Fixed Rate Mortgage (%)","5/1 Adjustable Rate Mortgage (%)"),
          caption=htmltools::tags$caption(
    style = 'caption-side: top; text-align: left;',
    htmltools::strong('Weekly Average Mortgage Rates in the US'), 
                               htmltools::br(),htmltools::em("Source: Freddie Mac Primary Mortgage Market Survey through Jan. 12, 2017" )))
```

### House Price Table

```{r}
#create state data for use
df$hpa.peak<-round(100*(df$hpi/df$hpi.max08 -1),1)
df$hpa.trough<-round(100*(df$hpi/df$hpi.min08 -1),1)
df$hpa100<-round(100*df$hpa12,1)
df$hpi.round<-round(df$hpi,1)
sdt<-df[date>="2000-01-01",c(2,1,4,5,18,17,15,16),with=F]

datatable(sdt, 
  caption =  htmltools::tags$caption(
    style = 'caption-side: top; text-align: left;',
    htmltools::strong('State house price trends, Jan 2000 to September 2016: '), 'year-over-year percent change in house prices', 
    htmltools::br(),htmltools::em("Source: Freddie Mac House Price Index, use search boxes and arrows to filter/sort data." )),
   colnames = c( "State"='state' ,
                 "Date"="date",
                 "Year"="year",
                 "Month"="month",
                 "House Price Index (Dec 2000=100)"="hpi.round",
                 "Annual percent change in house prices"="hpa100",
                "Percent Above/Below Pre-2008 Peak"="hpa.peak",
                "Percent Above post-2008 Trough"="hpa.trough"
                ),
  filter = 'top',
  class="display compact",
  options = list(  pageLength = 50,
            width=800,
            columnDefs = list(
     
  )))
```

Linked Chart with Table
===================================== 

Column {data-width=250}
-----------------------------------------------------------------------

### About

```{r}
valueBox("Housing market dashboard", icon = "fa-question",href="#info")
```

### Interactive mortgage rate chart

```{r}
valueBox("Mortgage rates", icon = "fa-line-chart",href="#mortgage-rates")
```


### Interactive house price chart
    
```{r}
valueBox("House Prices", icon = "fa-bar-chart",href="#house-prices")
```
   
### Interactive data tables

```{r}
valueBox("Tables", icon = "fa-table",href="#data-tables")
```

### Linked chart and table

```{r}
valueBox("Linked", icon = "fa-link",href="#linked-chart-with-table",color="success")
```


Column {data-width=500}
-----------------------------------------------------------------------

### Use the filter box to focus on particular state(S)

```{r}
df$hpa.peak<-round(100*(df$hpi/df$hpi.max08 -1),1)
df$hpa.trough<-round(100*(df$hpi/df$hpi.min08 -1),1)
df$hpa100<-round(100*df$hpa12,1)
df$hpi.round<-round(df$hpi,1)
sdt<-df[date>="2000-01-01",c(2,1,18,17),with=F]
sdt<-group_by(sdt,state)
sdt2 <- SharedData$new(sdt, ~state)

### Set up colors using Viridis Color Scheme ###
pal <- viridis(52)
pal <- setNames(pal, unique(sdt$state))
################################################

bscols(widths=c(2,NA),
  list(
  filter_select("state", "Select state to highlight for plot", sdt2, ~state,multiple=T)),
  plot_ly(data=sdt2,x = ~date, y = ~hpa100, height=750,text=~state) %>% 
    add_lines(name="Selected state States",alpha=0.7, showlegend = FALSE) %>%
     layout(title = "Annual Percent Change in House Prices",xaxis = list(title="Date"), yaxis = list(title="Annual % Change in House Prices by State"))
)
  

```

Column {data-width=500}
-----------------------------------------------------------------------

### You can also filter by clicking on the data table

```{r}
  datatable(sdt2,height=750, caption =  htmltools::tags$caption(
    style = 'caption-side: top; text-align: left;',
    htmltools::strong('State house price trends, Jan 2000 to September 2016: '),
    'year-over-year percent change in house prices', 
    htmltools::br(),
    htmltools::em("Source: Freddie Mac House Price Index, use search boxes and arrows to filter/sort data." )),
    colnames = c( "State"='state' ,
                 "Date"="date",
                 "House Price Index (Dec 2000=100)"="hpi.round",
                 "Annual percent change in house prices"="hpa100"
                ),
    #filter = 'top',
    class="display compact",
    options = list(  pageLength = 10)
  )
  

```