---
title: "House price trends by @lenkiefer"
output:
flexdashboard::flex_dashboard:
orientation: columns
vertical_layout: fill
social: menu
source_code: embed
theme: readable
---
```{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(plotly,quietly=T)
library(scales,quietly=T)
library(crosstalk)
library(maps)
```
```{r setup-data, cache=F,include=F}
####################
#### Load Data ####
####################
states_map <- map_data("state") # state data for map
# Load metro data
df<-fread("data/hpimetro.csv")
df$date<-as.Date(df$date, format="%m/%d/%Y")
# Load state data
df.state<-fread("data/hpistate.csv")
df.state$date<-as.Date(df.state$date, format="%m/%d/%Y")
# Load US data
df.us<-fread("data/hpiusa.csv")
df.us$date<-as.Date(df.us$date, format="%m/%d/%Y")
# Set up metro data for cross talk:
df.metro<-group_by(df,geo)
sd.metro <- SharedData$new(df.metro, ~geo)
```
About {data-navmenu="Explore"}
=====================================
Column {data-width=200}
-------------------------------------
### About this flexdashboard
This dashboard allows you to explore trends in house prices across 30 large metro areas. The metro areas covered are depicted in the nearby map. The map is colored according to Census regions. We picked the 30 largest metro areas based on population. Explore the different data visualizations above.
Column {data-width=800}
-------------------------------------
### Areas covered
```{r jan222017-map1,echo=F}
g.map<-
ggplot(df[date=="2016-09-01" ], aes(x = long, y = lat,label=geo)) +
geom_map(data=df.state[date=="2016-09-01",],aes(fill = region,map_id=tolower(statename)), map = states_map,alpha=0.25)+
borders("state", colour = "grey70",alpha=0.4)+
theme_void()+
scale_fill_viridis(name="Census Region",discrete=T,option="C")+
theme(legend.position="top",
plot.title=element_text(face="bold",size=18))+
geom_point(alpha=0.85,color="black",size=2)+
geom_text(hjust=0,size=1.75,nudge_y=-0.7)+
labs(title="Metro areas in our data",
subtitle="30 large metro areas",
caption="@lenkiefer Metro population based on U.S. Census: http://www.census.gov/programs-surveys/popest.html")+
theme(plot.caption=element_text(hjust=0,size=7))
```
```{r jan222017-map2,echo=F}
g.map
# Save image for later
ggsave("img/map.png",g.map,height=6,width=8)
```
Storyboard {.storyboard data-navmenu="Explore"}
=========================================
### Map of areas we plot
```{r}
g.map
```
### Small multiple, House Price Index
```{r sm-1-jan22-2017,fig.width=10}
g1<-ggplot(data=df,aes(x=date,y=hpi))+geom_line()+facet_wrap(~geo)+
theme_minimal()+labs(x="",y="",title="House price index by metro",
caption="@lenkiefer Source: Freddie Mac House Price Index")+
theme(plot.caption=element_text(hjust=0,size=7), plot.title=element_text(size=10),
strip.text=element_text(size=4),
axis.text.x=element_text(size=4) ,
axis.text.y=element_text(size=5) )
g1
ggsave("img/sm-1.png",g1,height=3,width=4)
```
### Small multiple, Annual house price appreciation
```{r sm-2-jan22-2017,fig.width=10}
g2<-ggplot(data=df,aes(x=date,y=hpa12))+geom_line()+facet_wrap(~geo)+
theme_minimal()+labs(x="",y="",title="Annual percent change in house price index by metro",
caption="@lenkiefer Source: Freddie Mac House Price Index")+
scale_y_continuous(label=percent)+
theme(plot.caption=element_text(hjust=0,size=7), plot.title=element_text(size=10),
strip.text=element_text(size=4),
axis.text.x=element_text(size=4) ,
axis.text.y=element_text(size=5) )
g2
ggsave("img/sm-2.png",g2,height=3,width=4)
```
### House Price Growth in West Region
```{r sm-3-jan22-2017,fig.width=10}
g3<-ggplot(data=df[region=="West Region"],aes(x=date,y=hpa12))+geom_line()+facet_wrap(~geo)+
theme_minimal()+labs(x="",y="",title="Annual percent change in house price index by metro",
caption="@lenkiefer Source: Freddie Mac House Price Index")+
scale_y_continuous(label=percent)+
theme(plot.caption=element_text(hjust=0,size=7), plot.title=element_text(size=10),
strip.text=element_text(size=6),
axis.text.x=element_text(size=6) ,
axis.text.y=element_text(size=6) )
g3
ggsave("img/sm-3.png",g3,height=3,width=4)
```
### House Price Growth in South Region
```{r sm-4-jan22-2017,fig.width=10}
g4<-ggplot(data=df[region=="South Region"],aes(x=date,y=hpa12))+geom_line()+facet_wrap(~geo)+
theme_minimal()+labs(x="",y="",title="Annual percent change in house price index by metro",
caption="@lenkiefer Source: Freddie Mac House Price Index")+
scale_y_continuous(label=percent)+
theme(plot.caption=element_text(hjust=0,size=7), plot.title=element_text(size=10),
strip.text=element_text(size=6),
axis.text.x=element_text(size=6) ,
axis.text.y=element_text(size=6) )
g4
ggsave("img/sm-4.png",g4,height=3,width=4)
```
### House Price Growth in Midwest Region
```{r sm-5-jan22-2017,fig.width=10}
g5<-ggplot(data=df[region=="Midwest Region"],aes(x=date,y=hpa12))+geom_line()+facet_wrap(~geo)+
theme_minimal()+labs(x="",y="",title="Annual percent change in house price index by metro",
caption="@lenkiefer Source: Freddie Mac House Price Index")+
scale_y_continuous(label=percent)+
theme(plot.caption=element_text(hjust=0,size=7), plot.title=element_text(size=10),
strip.text=element_text(size=6),
axis.text.x=element_text(size=6) ,
axis.text.y=element_text(size=6) )
g5
ggsave("img/sm-5.png",g5,height=3,width=4)
```
### House Price Growth in Northeast Region
```{r sm-6-jan22-2017,fig.width=10}
g6<-ggplot(data=df[region=="Northeast Region"],aes(x=date,y=hpa12))+geom_line()+facet_wrap(~geo)+
theme_minimal()+labs(x="",y="",title="Annual percent change in house price index by metro",
caption="@lenkiefer Source: Freddie Mac House Price Index")+
scale_y_continuous(label=percent)+
theme(plot.caption=element_text(hjust=0,size=7),
plot.title=element_text(size=10),
strip.text=element_text(size=6),
axis.text.x=element_text(size=6) ,
axis.text.y=element_text(size=6) )
g6
ggsave("img/sm-6.png",g6,height=3,width=4)
```
Interactive chart {data-navmenu="Explore"}
=====================================
### Metro Price Trends
Each line represents a metro. Use the filter box to highlight an individual state.
```{r, eval=T}
g.map<-
ggplot(sd.metro, aes(x = long, y = lat)) +
borders("state", colour = "grey70",fill="lightgray",alpha=0.5)+
theme_void()+
theme(legend.position="none",
plot.title=element_text(face="bold",size=18))+
geom_point(alpha=0.82,color="black",size=3)+
labs(title="Selected Metro(s)",
subtitle=head(df,1)$geo,
caption="@lenkiefer Source: Freddie Mac House Price Index through September 2016")+
theme(plot.caption=element_text(hjust=0))
p0<-
plot_ly(data=sd.metro,x = ~date, y = ~hpi, height=750) %>%
add_lines(name="Index",colors="gray",alpha=0.7) %>%
add_lines(name="All metros",data=df,x=~date,y=~hpi,
colors="black",color=~geo,alpha=0.1,showlegend=F,hoverinfo="none") %>%
layout(title = "House Price Trends by Metro",xaxis = list(title="Date"), yaxis = list(title="House Price Index"))
p1<-
plot_ly(data=sd.metro,x = ~date, y = ~hpa12, height=750) %>%
add_lines(name="Annual % change",colors="gray",alpha=0.7) %>%
add_lines(name="All metros",data=df,x=~date,y=~hpa12,
colors="black",color=~geo,alpha=0.1,showlegend=F,hoverinfo="none") %>%
layout(title = "House Price Trends by Metro",xaxis = list(title="Date"), yaxis = list(title="Annual % Change in House Price Index"))
bscols(widths=c(2,6,4),
list(filter_select("metro", "Select metro to highlight for plot", sd.metro, ~geo,multiple=F)),
subplot(p0,p1,nrows=2,titleY=T),
ggplotly(g.map)
)
```
Animation {data-navmenu="Explore"}
=====================================
### Animated tour of house price trends by metro. Click the play button to travel around the the 30 metro areas and view house price trends.
```{r,eval=T}
#d3.Key <- crosstalk::SharedData$new(d3.m, ~geo)
g.map2<-
ggplot(sd.metro, aes(x = long, y = lat,frame=geo,label=paste("\n\n ",geo),color=geo)) +
borders("state", colour = "grey70",fill="lightgray",alpha=0.5)+
theme_void()+
theme(legend.position="none",
plot.title=element_text(face="bold",size=18))+
geom_point(alpha=0.5,size=1)+
geom_text(hjust=0)+
labs(title="House price trends around the U.S.")+
theme(plot.caption=element_text(hjust=0))
p2<-
ggplot(data=sd.metro,aes(x=date,y=hpa12))+
#geom_point()+geom_segment(aes(xend=date,yend=0))+
geom_line(aes(frame=geo,ids=date,label=geo,color=geo))+
scale_y_continuous(labels=scales::percent)+
geom_line(data=df.us,color="gray",linetype=2)+
#scale_fill_viridis()+ scale_color_viridis()+
theme_minimal()+labs(x="",y="Annual House Price Appreciation y/y %",title="Annual Price Growth")
#+ geom_text(data=d3.m[date==median(d3.m$date)],fontface="bold",y=16,size=8)
p3<-
ggplot(data=sd.metro,aes(x=date,y=hpi))+
geom_line(aes(frame=geo,ids=date,label=geo,color=geo))+
theme_minimal()+labs(x="",y="House Price Index",title="House Price Index")+
geom_line(data=df.us,color="gray",linetype=2)
subplot(subplot(ggplotly(p3),ggplotly(p2),nrows=2,titleY=T), ggplotly(g.map2), nrows = 1, widths = c(0.35, 0.65), titleX = TRUE,titleY=T) %>%
hide_legend() %>%
animation_opts(2000,transition=500) %>% layout(title="House price tour, solid line metro, dotted line U.S.")
```
