Merge pull request #47 from xiaoyuanf/master

added layout

scripts/app.R

@@ -6,7 +6,7 @@
 Usage: app.R
 "
 
-### Load libraries
+# Load libraries
 
 library(dash)
 library(dashCoreComponents)
@@ -15,103 +15,59 @@ library(ggplot2)
 library(plotly)
 library(tidyverse)
 library(here)
+library(viridis)
 
 app <- Dash$new()
 
-### Load the data
+# Load the data
 df_clean <- read.csv(here("data", "cleaned_data.csv"))
 df <- read.csv(here("data", "raw_data.csv"))
+df_clean_sample <- sample_n(df_clean, 5000)
 
+# source
+source(here("scripts/dash_functions.R"))
+source(here("scripts/dash_components.R"))
 
 
 
-
-### Line graph and slider: readers can change the range of time to see how [pm2.5] changes with time
-### Slider
-year_slider <- dccRangeSlider(
-  id='year-slider',
-  min=14611, # 2010-01-02
-  max=16435, # 2014-12-31
-  step=1, # each move is 1
-  value=list(14611, 16435),
-  marks = list(
-    "14611" = list("label" = "2010"), # marks the start of each year
-    "14976" = list("label" = "2011"),
-    "15341" = list("label" = "2012"),
-    "15706" = list("label" = "2013"),
-    "16071" = list("label" = "2014"),
-    "16435" = list("label" = "2015")
-  )
-)
-
-### Line graph: change the time range 
-make_line_graph <- function(value=list(14611, 16435)){
-
-  ## Convert input values to integer then to date
-  # `as.Date()` convert input (must be integer) to date format
-  # `as.integer()` convert input to integer format
-  date1 <- as.Date(as.integer(value[1]), origin = "1970-01-01")
-  date2 <- as.Date(as.integer(value[2]), origin = "1970-01-01")
-
-  ## Get a new dataframe
-  df_year_change <- df_clean
-  # add "date" column
-  df_year_change$date = as.Date(with(df_year_change, paste(year, month, day,sep="-")), "%Y-%m-%d") # Combine day, month and year to date
-  # calculate the mean for each date
-  df_year_change = aggregate(df_year_change$pm2.5,
-                             by = list(df_year_change$date),
-                             FUN = mean) # Mean [pm2.5] of each date
-  # rename date and pm2.5 column
-  names(df_year_change) <- c("date", "pm2.5")
-
-  ## plotting
-  plot_year_change <- ggplot(df_year_change) +
-    geom_line(aes(x=date, y=pm2.5),
-              alpha = 0.6,
-              size = 0.6) +
-    geom_vline(xintercept = as.numeric(as.Date("2013-09-01")),
-               linetype=4, color = "blue", size = 1) +
-    labs(x = "Time",
-         y = "[pm2.5]",
-         title = "[pm2.5] VS Time") +
-    theme_classic() +
-    # change the range of date on x axis
-    scale_x_date(date_labels = "%Y-%m-%d", limits = as.Date(c(date1,date2)))
-    # add a vertical line showing the time when Chinese overnment launched the plan to control pm2.5
-
-    # convert to ggplotly()
-  ggplotly(plot_year_change)
-}
-
-
-# Graph
-graph_time <- dccGraph(
-  id = 'graph_time',
-  figure = make_line_graph()
-)
-
-
-### layout
+# layout
 app$layout(
+  title,
   htmlDiv(
+    className = "pretty_container",
     list(
-      htmlH1("Beijing PM2.5 Data"),
-
+      intro,
+      overview_header,
+      div_checklist,
+      overview_heatmap,
+      time_header,
       # Slider for changing time range
-      year_slider,
+      div_slider,
       # Graph for time range
       graph_time,
-
-
+      factors_header,
+      div_radio,
+      factor_scatterplot,
       dccMarkdown("[Data Source](https://archive.ics.uci.edu/ml/datasets/Beijing+PM2.5+Data#)")
-      )
+      ), style = list('display' = 'block',
+                      'margin-left' = 'auto',
+                      'margin-right' = 'auto',
+                      'width'='90%')
 
           )
 )
 
-### app callback
+# app callback
+## year checklist callback
+app$callback(
+  output=list(id='heat', property='figure'),
+  params=list(input(id='year_checklist', property='value')),
+  function(yearCheck) {
+    make_heatmap(yearCheck)
+  }
+)
 
-# year_time callback
+## year_time callback
 app$callback(
   output=list(id = 'graph_time', property='figure'),
   params=list(input(id='year-slider', property='value')),
@@ -120,7 +76,15 @@ app$callback(
     make_line_graph(value)
   })
 
+## weather factor callback
+app$callback(
+  output=list(id='scatter', property='figure'),
+  params=list(input(id='factor_radio', property='value')),
+  function(x_axis) {
+    make_scatter(x_axis)
+  }
+)
 
 
-### Run app
+# Run app
 app$run_server(debug=TRUE)

scripts/assets/styles.css

@@ -0,0 +1,14 @@
+.pretty_container {
+  border-radius: 5px;
+  background-color: #F9FAFA;
+  margin: 10px;
+  padding: 15px;
+  position: relative;
+  box-shadow: 2px 2px 2px lightgrey;
+}
+
+.dcc_control {
+  margin: 0;
+  padding: 5px;
+  width: calc(100%-40px);
+}

scripts/assets/typography.css

@@ -0,0 +1 @@
+body { font-family: 'sans-serif'; } h1, h2, h3, h4, h5, h6, P { color: teal }

scripts/dash_components.R

@@ -0,0 +1,142 @@
+# to create div components for beijing pm2.5 dashboard
+
+# title
+title <- htmlDiv(
+  className = "pretty_container",
+  list(htmlH1('BEIJING PM2.5 (2011-2014)')),
+  style = list(
+    'columnCount' = 1,
+    'background-color' = '#8ECCD9',
+    'text-align' = 'center',
+    'height'=75
+  )
+)
+
+# introduction
+intro <- htmlDiv(
+  className = "pretty_container",
+  list(
+    htmlH2("Introduction"),
+    dccMarkdown('
+                Welcome to the BEIJING PM2.5 dashboard!
+                
+                This dashboard allows you to explore the [Beijing PM2.5 dataset](https://archive.ics.uci.edu/ml/datasets/Beijing+PM2.5+Data#).
+                
+                Below, you can find out how PM2.5 in Beijing from 2011-2014 changed over time, and how weather factors related the change.
+                ')
+  )
+)
+
+# headers
+overview_header <- htmlDiv(
+  className = "pretty_container",
+  list(htmlH2("Overview of Hourly PM2.5 Concentration")),
+  style = list('height'=40)
+)
+
+time_header <- htmlDiv(
+  className = "pretty_container",
+  list(htmlH2("How did Beijing PM2.5 change over time?")),
+  style = list('height'=40)
+)
+
+factors_header <- htmlDiv(
+  className = "pretty_container",
+  list(htmlH2("How did weather factors relate to PM2.5?")),
+  style = list('height'=40)
+)
+
+#overview checklist
+yearChecklist <- dccChecklist(
+  id='year_checklist',
+  options=list(
+    list("label" = "2011  ", "value" = "2011"),
+    list("label" = "2012  ", "value" = "2012"),
+    list("label" = "2013  ", "value" = "2013"),
+    list("label" = "2014", "value" = "2014")
+  ),
+  value=list("2013")
+)
+
+div_checklist <- htmlDiv(
+  list(
+    htmlLabel('Please pick one or more years you are interested in to see the hourly PM2.5 concentration: '),
+    yearChecklist
+  ), style=list(
+    'padding'=20
+  )
+)
+
+# overview heatmap
+overview_heatmap <- dccGraph(
+  id='heat',
+  figure=make_heatmap()
+)
+
+
+# Line graph and slider: readers can change the range of time to see how [pm2.5] changes with time
+## Slider
+year_slider <- dccRangeSlider(
+  id='year-slider',
+  min=14611, # 2010-01-02
+  max=16435, # 2014-12-31
+  step=1, # each move is 1
+  value=list(14611, 16435),
+  marks = list(
+    "14611" = list("label" = "2010"), # marks the start of each year
+    "14976" = list("label" = "2011"),
+    "15341" = list("label" = "2012"),
+    "15706" = list("label" = "2013"),
+    "16071" = list("label" = "2014"),
+    "16435" = list("label" = "2015")
+  )
+)
+
+div_slider <- htmlDiv(
+  list(
+    htmlLabel('Please pick the time range you are interested in to see the PM2.5 concentration across time: '),
+    year_slider,
+    dccMarkdown("The vertical blue line indicates the time when Chinese government started a PM2.5 reduction plan.")
+  ), style=list(
+    'padding'=20
+  )
+)
+
+## Graph
+graph_time <- dccGraph(
+  id = 'graph_time',
+  figure = make_line_graph()
+)
+
+# relationship scatterplot
+## weather factor radiobutton
+factor_xaxis <-
+  tibble(
+    label = c("Temperature", "Pressure","Dew Point", "Cumulated wind speed"),
+    value = c("TEMP", "PRES", "DEWP", "Iws")
+  )
+
+factorRadio <- dccRadioItems(
+  id='factor_radio',
+  options=map(1:nrow(factor_xaxis), function(i) {
+    list(label=factor_xaxis$label[i], value=factor_xaxis$value[i])
+  }),
+  value = "TEMP",
+  labelStyle = list("display" = "block")
+)
+
+div_radio <- htmlDiv(
+  list(
+    htmlLabel('Select one weather factor: '),
+    factorRadio
+  ), style=list(
+    'padding'=20
+  )
+)
+
+## scatterplot
+factor_scatterplot <- dccGraph(
+  id='scatter',
+  figure=make_scatter()
+)
+