├── .gitattributes ├── .gitignore ├── README.md ├── booms ├── index.Rmd ├── index.html └── styles.css ├── flexdashboard-highcharter-examples.Rproj ├── index.html ├── pokemon ├── PokemonHollow.ttf ├── PokemonSolid.ttf ├── hcpkmn.RData ├── index.Rmd ├── index.html └── styles.css ├── sales-report ├── index.Rmd └── index.html └── scripts ├── index.md └── make_index.R /.gitattributes: -------------------------------------------------------------------------------- 1 | *.html linguist-vendored 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # History files 2 | .Rhistory 3 | .Rapp.history 4 | 5 | # Session Data files 6 | .RData 7 | 8 | # Example code in package build process 9 | *-Ex.R 10 | 11 | # RStudio files 12 | .Rproj.user/ 13 | 14 | # produced vignettes 15 | vignettes/*.html 16 | vignettes/*.pdf 17 | 18 | # OAuth2 token, see https://github.com/hadley/httr/releases/tag/v0.3 19 | .httr-oauth 20 | .Rproj.user 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # flexdashboard-highcharter-example 2 | 3 | highcharter examples via http://rstudio.github.io/flexdashboard/ 4 | 5 | see: 6 | 7 | http://jkunst.com/flexdashboard-highcharter-examples/index.html 8 | 9 | -------------------------------------------------------------------------------- /booms/index.Rmd: -------------------------------------------------------------------------------- 1 | --- 2 | output: 3 | flexdashboard::flex_dashboard: 4 | css: styles.css 5 | orientation: rows 6 | 7 | --- 8 | 9 | ```{r setup, include=FALSE} 10 | knitr::opts_chunk$set(message = FALSE, warning = FALSE) 11 | library("flexdashboard") 12 | library("highcharter") 13 | library("dplyr") 14 | library("tidyr") 15 | library("purrr") 16 | library("readr") 17 | library("ggplot2") 18 | 19 | urldata <- "https://raw.githubusercontent.com/data-is-plural/nuclear-explosions/master/data/sipri-report-explosions.csv" 20 | df <- read_csv(urldata) 21 | df <- df %>% 22 | mutate(date = as.Date(as.character(date_long), format = "%Y%m%d"), 23 | country = sub("^(PAKIST|INDIA)$", "INDIA & PAKISTAN", country)) %>% 24 | arrange(date) %>% 25 | group_by(country) %>% 26 | mutate(rn = row_number()) %>% 27 | ungroup() 28 | 29 | ggplot(df) + geom_line(aes(date, rn, color = country)) + scale_y_sqrt() 30 | ggplot(df) + geom_point(aes(date, country, color = country), size = 3, alpha = 0.25) 31 | 32 | thm <- hc_theme( 33 | chart = list(backgroundColor = "#2B2B2B"), 34 | colors = c("#E71409", "#337DBA", "#49B044", "#9B4BA7", "#A55B12", "#ACAD1F", "#302C2A") 35 | ) 36 | ``` 37 | 38 | Row 39 | ----------------------------------------------------------------------- 40 | 41 | ### 42 | 43 | ```{r} 44 | library("httr") 45 | library("geojsonio") 46 | 47 | world <- "https://raw.githubusercontent.com/johan/world.geo.json/master/countries.geo.json" %>% 48 | GET() %>% 49 | content() %>% 50 | jsonlite::fromJSON(simplifyVector = FALSE) 51 | 52 | # world$features %>% purrr::map_chr(function(x) x$properties$name) %>% { which(. == "Antarctica")} 53 | world$features[[7]] <- NULL 54 | 55 | dfbooms <- df %>% 56 | select(country, latitude, longitude, year, date, name) 57 | 58 | boomsjson <- geojson_json(dfbooms, lat = "latitude", lon = "longitude") 59 | 60 | highchart(type = "map") %>% 61 | hc_add_theme(thm) %>% 62 | hc_plotOptions( 63 | series = list( 64 | showInLegend = FALSE 65 | ) 66 | ) %>% 67 | hc_add_series(mapData = world, nullColor = "#2b2b2b") %>% 68 | hc_add_series(data = boomsjson, type = "mappoint", dataLabels = list(enabled = FALSE), 69 | name = "Airports", color = 'rgba(250, 250, 250, 0.7)', 70 | tooltip = list(pointFormat = "{point.properties.name}: {point.properties.date}")) 71 | 72 | 73 | ``` 74 | 75 | Row 76 | ----------------------------------------------------------------------- 77 | 78 | ### 79 | 80 | ```{r} 81 | hc <- highchart() %>% 82 | hc_add_theme(thm) %>% 83 | hc_legend(enabled = FALSE) %>% 84 | hc_yAxis(max = 1200) %>% 85 | hc_plotOptions( 86 | series = list(animation = list(duration = 10*1000)) 87 | ) 88 | for (c in unique(df$country)) { 89 | df2 <- df %>% filter(country == c) 90 | hc <- hc %>% hc_add_series_times_values(df2$date, df2$rn, name = c) 91 | } 92 | hc 93 | ``` 94 | 95 | ### 96 | 97 | ```{r} 98 | dfexp <- df %>% 99 | select(country, year) %>% 100 | distinct() %>% 101 | expand(country, year) %>% 102 | left_join( 103 | df %>% 104 | group_by(country, year) %>% 105 | summarize(nb = n()) %>% 106 | ungroup(), 107 | by = c("country", "year") 108 | ) %>% 109 | mutate(nb = ifelse(is.na(nb), 0, nb)) %>% 110 | arrange(country, year) %>% 111 | group_by(country) %>% 112 | mutate(nbcum = cumsum(nb)) 113 | 114 | # dfexp %>% group_by(country) %>% summarise(nb = sum(nb)) %>% arrange(desc(nb)) 115 | # df %>% count(country) %>% arrange(desc(n)) 116 | 117 | ds <- dfexp %>% 118 | group_by(country) %>% 119 | do(seq = list(sequence = .$nbcum)) %>% 120 | ungroup() %>% 121 | .$seq 122 | 123 | orderls <- ds %>% map(function(x) tail(x[[1]], 1)) %>% 124 | unlist() %>% 125 | order(decreasing = TRUE) 126 | 127 | ds <- ds[orderls] 128 | 129 | df2 <- df %>% count(country) %>% arrange(desc(n)) 130 | 131 | highchart() %>% 132 | hc_add_theme(thm) %>% 133 | hc_chart(type = "column") %>% 134 | hc_xAxis(categories = df2$country) %>% 135 | hc_yAxis(max = 1200) %>% 136 | hc_add_series(name = "B", data = ds, colorByPoint = TRUE, 137 | showInLegend = FALSE 138 | ) %>% 139 | hc_motion(enabled = TRUE, 140 | updateInerval = 50, 141 | autoPlay = TRUE, 142 | labels = unique(dfexp$year)) 143 | # df2 <- df %>% count(country) %>% arrange(desc(n)) 144 | # hc <- highchart() %>% 145 | # hc_legend(enabled = FALSE) %>% 146 | # hc_chart(type = "column") %>% 147 | # hc_xAxis(categories = df2$country) %>% 148 | # hc_add_series_labels_values(df2$country, df2$n, colorByPoint = TRUE) 149 | # hc 150 | ``` 151 | -------------------------------------------------------------------------------- /booms/styles.css: -------------------------------------------------------------------------------- 1 | .navbar { 2 | display: none; 3 | } 4 | 5 | body { 6 | padding-top: 7px; 7 | } 8 | 9 | body, .navbar-inverse, .chart-stage, .chart-stage-flex { 10 | background-color: #2B2B2B; 11 | border-color: #2B2B2B; 12 | } -------------------------------------------------------------------------------- /flexdashboard-highcharter-examples.Rproj: -------------------------------------------------------------------------------- 1 | Version: 1.0 2 | 3 | RestoreWorkspace: Default 4 | SaveWorkspace: Default 5 | AlwaysSaveHistory: Default 6 | 7 | EnableCodeIndexing: Yes 8 | UseSpacesForTab: Yes 9 | NumSpacesForTab: 2 10 | Encoding: UTF-8 11 | 12 | RnwWeave: Sweave 13 | LaTeX: pdfLaTeX 14 | -------------------------------------------------------------------------------- /pokemon/PokemonHollow.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jbkunst/flexdashboard-highcharter-examples/3fe458c8433b6fb959e0552d289bbba2dd8d1dba/pokemon/PokemonHollow.ttf -------------------------------------------------------------------------------- /pokemon/PokemonSolid.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jbkunst/flexdashboard-highcharter-examples/3fe458c8433b6fb959e0552d289bbba2dd8d1dba/pokemon/PokemonSolid.ttf -------------------------------------------------------------------------------- /pokemon/hcpkmn.RData: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jbkunst/flexdashboard-highcharter-examples/3fe458c8433b6fb959e0552d289bbba2dd8d1dba/pokemon/hcpkmn.RData -------------------------------------------------------------------------------- /pokemon/index.Rmd: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Pokemon Dashboard" 3 | output: 4 | flexdashboard::flex_dashboard: 5 | social: [ "twitter", "facebook", "linkedin", "pinterest" ] 6 | css: styles.css 7 | source_code: https://github.com/jbkunst/flexdashboard-highcharter-examples/tree/gh-pages/pokemon 8 | --- 9 | 10 | 11 | ```{r setup, include=FALSE} 12 | library("highcharter") 13 | load(file = "hcpkmn.RData") 14 | ``` 15 | 16 | 17 | Column {data-width=600} 18 | ------------------------------------- 19 | 20 | ### t-SNE algorithm 21 | 22 | ```{r} 23 | hctsne 24 | ``` 25 | 26 | Column {data-width=400} 27 | ------------------------------------- 28 | 29 | ### Species count by main type 30 | 31 | ```{r} 32 | hcbar 33 | ``` 34 | 35 | ### Types treemap 36 | 37 | ```{r} 38 | hctmpkmn %>% 39 | hc_plotOptions( 40 | series = list( 41 | borderWidth = 0.5, 42 | dataLabels = list( 43 | style = list( 44 | fontSize = "12px", 45 | textOutline = FALSE 46 | ) 47 | ) 48 | ) 49 | ) 50 | ``` 51 | -------------------------------------------------------------------------------- /pokemon/styles.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: Pokemon; 3 | src: url(PokemonSolid.ttf); 4 | } 5 | 6 | .navbar-inverse { 7 | background-color: #FFCA05; 8 | border-color: #FFCA05; 9 | } 10 | 11 | .navbar-inverse .navbar-brand { 12 | font-family: 'Pokemon'; 13 | color: #2780e3; 14 | } -------------------------------------------------------------------------------- /sales-report/index.Rmd: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Sales Report with Highcharter" 3 | author: "Joshua Kunst" 4 | output: 5 | flexdashboard::flex_dashboard: 6 | orientation: rows 7 | social: [ "twitter", "facebook" ] 8 | source_code: "https://git.io/v2H3E" 9 | --- 10 | 11 | 12 | 13 | 14 | ```{r setup, include=FALSE} 15 | # Load packages here 16 | library("highcharter") 17 | library("dplyr") 18 | library("viridisLite") 19 | library("forecast") 20 | library("treemap") 21 | 22 | thm <- 23 | hc_theme( 24 | colors = c("#1a6ecc", "#434348", "#90ed7d"), 25 | chart = list( 26 | backgroundColor = "transparent", 27 | style = list(fontFamily = "Source Sans Pro") 28 | ), 29 | xAxis = list( 30 | gridLineWidth = 1 31 | ) 32 | ) 33 | 34 | ``` 35 | 36 | 37 | Row 38 | ------------------------------------- 39 | 40 | ### Sales Forecast 41 | 42 | ```{r} 43 | AirPassengers %>% 44 | forecast(level = 90) %>% 45 | hchart() %>% 46 | hc_add_theme(thm) 47 | ``` 48 | 49 | ### Sales by State 50 | 51 | ```{r} 52 | data("USArrests", package = "datasets") 53 | data("usgeojson") 54 | 55 | USArrests <- USArrests %>% 56 | mutate(state = rownames(.)) 57 | 58 | n <- 4 59 | colstops <- data.frame( 60 | q = 0:n/n, 61 | c = substring(viridis(n + 1), 0, 7)) %>% 62 | list.parse2() 63 | 64 | highchart() %>% 65 | hc_add_series_map(usgeojson, USArrests, name = "Sales", 66 | value = "Murder", joinBy = c("woename", "state"), 67 | dataLabels = list(enabled = TRUE, 68 | format = '{point.properties.postalcode}')) %>% 69 | hc_colorAxis(stops = colstops) %>% 70 | hc_legend(valueDecimals = 0, valueSuffix = "%") %>% 71 | hc_mapNavigation(enabled = TRUE) %>% 72 | hc_add_theme(thm) 73 | ``` 74 | 75 | 76 | Row 77 | ------------------------------------- 78 | 79 | ### Sales by Category 80 | 81 | ```{r, fig.keep='none'} 82 | data("Groceries", package = "arules") 83 | dfitems <- tbl_df(Groceries@itemInfo) 84 | 85 | set.seed(10) 86 | 87 | dfitemsg <- dfitems %>% 88 | mutate(category = gsub(" ", "-", level1), 89 | subcategory = gsub(" ", "-", level2)) %>% 90 | group_by(category, subcategory) %>% 91 | summarise(sales = n() ^ 3 ) %>% 92 | ungroup() %>% 93 | sample_n(31) 94 | 95 | tm <- treemap(dfitemsg, index = c("category", "subcategory"), 96 | vSize = "sales", vColor = "sales", 97 | type = "value", palette = rev(viridis(6))) 98 | 99 | highchart() %>% 100 | hc_add_series_treemap(tm, allowDrillToNode = TRUE, 101 | layoutAlgorithm = "squarified") %>% 102 | hc_add_theme(thm) 103 | ``` 104 | 105 | ### Best Sellers 106 | 107 | ```{r} 108 | set.seed(2) 109 | 110 | nprods <- 10 111 | 112 | dfitems %>% 113 | sample_n(nprods) %>% 114 | .$labels %>% 115 | rep(times = sort(sample( 1e4:2e4, size = nprods), decreasing = TRUE)) %>% 116 | factor(levels = unique(.)) %>% 117 | hchart(showInLegend = FALSE, name = "Sales", pointWidth = 10) %>% 118 | hc_add_theme(thm) %>% 119 | hc_chart(type = "bar") 120 | 121 | ``` 122 | 123 | -------------------------------------------------------------------------------- /scripts/index.md: -------------------------------------------------------------------------------- 1 |
2 | booms 3 |
4 |
5 | pokemon 6 |
7 |
8 | sales report 9 |
10 | -------------------------------------------------------------------------------- /scripts/make_index.R: -------------------------------------------------------------------------------- 1 | library(stringr) 2 | library(dplyr) 3 | library(htmltools) 4 | library(purrr) 5 | 6 | files <- dir(pattern = "index.html", recursive = TRUE, full.names = TRUE) 7 | files <- setdiff(files, "./index.html") 8 | 9 | folders <- files %>% 10 | str_extract( "/.*/") %>% 11 | str_replace_all("/", "") %>% 12 | str_replace_all("-", " ") 13 | 14 | 15 | links <- data_frame(file = files, folder = folders) %>% 16 | pmap_chr(function(file = "./booms/index.html", folder = "booms"){ 17 | tags$a(folder, href = file, target = "_blank") %>% 18 | tags$h5() %>% 19 | as.character() 20 | }) 21 | 22 | 23 | writeLines(links, "scripts/index.md") 24 | 25 | rmarkdown::render("scripts/index.md", 26 | output_file = "../index.html", 27 | clean = TRUE, 28 | params = list( 29 | theme = "flatly", 30 | title = "Some Ideas Highcharter + Flexdashboard") 31 | ) 32 | 33 | --------------------------------------------------------------------------------