Read about this demo at rostrum.blog2020/02/05/slickr/.
# This code prepares the dataset to be used in the carousel
# Packages ----------------------------------------------------------------
library(dplyr)
# Table of Pokemon --------------------------------------------------------
# Table of first gen Pokemon with numbers, names, link to Bulbapedia and source
# for sprite images
pkmn <- tibble(
ndex_num = 1:151,
ndex_char = c(
"001", "002", "003", "004", "005", "006", "007", "008", "009", "010",
"011", "012", "013", "014", "015", "016", "017", "018", "019", "020",
"021", "022", "023", "024", "025", "026", "027", "028", "029", "030",
"031", "032", "033", "034", "035", "036", "037", "038", "039", "040",
"041", "042", "043", "044", "045", "046", "047", "048", "049", "050",
"051", "052", "053", "054", "055", "056", "057", "058", "059", "060",
"061", "062", "063", "064", "065", "066", "067", "068", "069", "070",
"071", "072", "073", "074", "075", "076", "077", "078", "079", "080",
"081", "082", "083", "084", "085", "086", "087", "088", "089", "090",
"091", "092", "093", "094", "095", "096", "097", "098", "099", "100",
"101", "102", "103", "104", "105", "106", "107", "108", "109", "110",
"111", "112", "113", "114", "115", "116", "117", "118", "119", "120",
"121", "122", "123", "124", "125", "126", "127", "128", "129", "130",
"131", "132", "133", "134", "135", "136", "137", "138", "139", "140",
"141", "142", "143", "144", "145", "146", "147", "148", "149", "150",
"151"
),
name = c(
"Bulbasaur", "Ivysaur", "Venusaur", "Charmander", "Charmeleon",
"Charizard", "Squirtle", "Wartortle", "Blastoise", "Caterpie", "Metapod",
"Butterfree", "Weedle", "Kakuna", "Beedrill", "Pidgey", "Pidgeotto",
"Pidgeot", "Rattata", "Raticate", "Spearow", "Fearow", "Ekans", "Arbok",
"Pikachu", "Raichu", "Sandshrew", "Sandslash", "Nidoran♀", "Nidorina",
"Nidoqueen", "Nidoran♂", "Nidorino", "Nidoking", "Clefairy", "Clefable",
"Vulpix", "Ninetales", "Jigglypuff", "Wigglytuff", "Zubat", "Golbat",
"Oddish", "Gloom", "Vileplume", "Paras", "Parasect", "Venonat",
"Venomoth", "Diglett", "Dugtrio", "Meowth", "Persian", "Psyduck",
"Golduck", "Mankey", "Primeape", "Growlithe", "Arcanine", "Poliwag",
"Poliwhirl", "Poliwrath", "Abra", "Kadabra", "Alakazam", "Machop",
"Machoke", "Machamp", "Bellsprout", "Weepinbell", "Victreebel",
"Tentacool", "Tentacruel", "Geodude", "Graveler", "Golem", "Ponyta",
"Rapidash", "Slowpoke", "Slowbro", "Magnemite", "Magneton", "Farfetch'd",
"Doduo", "Dodrio", "Seel", "Dewgong", "Grimer", "Muk", "Shellder",
"Cloyster", "Gastly", "Haunter", "Gengar", "Onix", "Drowzee", "Hypno",
"Krabby", "Kingler", "Voltorb", "Electrode", "Exeggcute", "Exeggutor",
"Cubone", "Marowak", "Hitmonlee", "Hitmonchan", "Lickitung", "Koffing",
"Weezing", "Rhyhorn", "Rhydon", "Chansey", "Tangela", "Kangaskhan",
"Horsea", "Seadra", "Goldeen", "Seaking", "Staryu", "Starmie", "Mr. Mime",
"Scyther", "Jynx", "Electabuzz", "Magmar", "Pinsir", "Tauros", "Magikarp",
"Gyarados", "Lapras", "Ditto", "Eevee", "Vaporeon", "Jolteon", "Flareon",
"Porygon", "Omanyte", "Omastar", "Kabuto", "Kabutops", "Aerodactyl",
"Snorlax", "Articuno", "Zapdos", "Moltres", "Dratini", "Dragonair",
"Dragonite", "Mewtwo", "Mew"
)
) %>%
mutate(
url = paste0("https://bulbapedia.bulbagarden.net/wiki/", name, "_(Pok%C3%A9mon)"),
sprite_front_src = paste0("data/sprites/front/", ndex_num, ".png"),
sprite_back_src = paste0("data/sprites/back/", ndex_num, ".png"),
)
# Organise evolutionary chains --------------------------------------------
# Within each 'page' I want to show each evolutionary chain. This means I'll
# be showing three Pokemon maximum, since this is the longest chain (e.g.
# Bulbasaur, Ivysaur, Venusaur). But some chains are length one or two, so
# I'm gong to introduce a 'blank' to pad these 'pages'.
# Blank for padding evolutionary chains of length < 3
blank <- tibble(
ndex_num = NA_integer_,
ndex_char = "",
name = "",
url = NA_character_,
sprite_src = NA_character_
)
# Create second version of the main data set where blanks are introduced to pad
# each evolutionary chain to length 3.
pkmn2 <- bind_rows(
slice(pkmn, 1:3), # Bulbasaur, Ivysaur, Venusaur
slice(pkmn, 4:6),
slice(pkmn, 7:9),
slice(pkmn, 10:12),
slice(pkmn, 13:15),
slice(pkmn, 16:18),
slice(pkmn, 19:20), blank, # Rattata, Raticate, [blank]
slice(pkmn, 21:22), blank,
slice(pkmn, 23:24), blank,
slice(pkmn, 25:26), blank,
slice(pkmn, 27:28), blank,
slice(pkmn, 29:31),
slice(pkmn, 32:34),
slice(pkmn, 35:36), blank,
slice(pkmn, 37:38), blank,
slice(pkmn, 39:40), blank,
slice(pkmn, 41:42), blank,
slice(pkmn, 43:45),
slice(pkmn, 46:47), blank,
slice(pkmn, 48:49), blank,
slice(pkmn, 50:51), blank,
slice(pkmn, 52:53), blank,
slice(pkmn, 54:55), blank,
slice(pkmn, 56:57), blank,
slice(pkmn, 58:59), blank,
slice(pkmn, 60:62),
slice(pkmn, 63:65),
slice(pkmn, 66:68),
slice(pkmn, 69:71),
slice(pkmn, 72:73), blank,
slice(pkmn, 74:76),
slice(pkmn, 77:78), blank,
slice(pkmn, 79:80), blank,
slice(pkmn, 81:82), blank,
slice(pkmn, 83), blank, blank, # Farfetch'd, [blank], [blank]
slice(pkmn, 84:85), blank,
slice(pkmn, 86:87), blank,
slice(pkmn, 88:89), blank,
slice(pkmn, 90:91), blank,
slice(pkmn, 92:94),
slice(pkmn, 95), blank, blank,
slice(pkmn, 96:97), blank,
slice(pkmn, 98:99), blank,
slice(pkmn, 100:101), blank,
slice(pkmn, 102:103), blank,
slice(pkmn, 104:105), blank,
slice(pkmn, 106), blank, blank,
slice(pkmn, 107), blank, blank,
slice(pkmn, 108), blank, blank,
slice(pkmn, 109:110), blank,
slice(pkmn, 111:112), blank,
slice(pkmn, 113), blank, blank,
slice(pkmn, 114), blank, blank,
slice(pkmn, 115), blank, blank,
slice(pkmn, 116:117), blank,
slice(pkmn, 118:119), blank,
slice(pkmn, 120:121), blank,
slice(pkmn, 122), blank, blank,
slice(pkmn, 123), blank, blank,
slice(pkmn, 124), blank, blank,
slice(pkmn, 125), blank, blank,
slice(pkmn, 126), blank, blank,
slice(pkmn, 127), blank, blank,
slice(pkmn, 128), blank, blank,
slice(pkmn, 129:130), blank,
slice(pkmn, 131), blank, blank,
slice(pkmn, 132), blank, blank,
slice(pkmn, 133:134), blank,
slice(pkmn, c(133, 135)), blank,
slice(pkmn, c(133, 136)), blank,
slice(pkmn, 137), blank, blank,
slice(pkmn, 138:139), blank,
slice(pkmn, 140:141), blank,
slice(pkmn, 142), blank, blank,
slice(pkmn, 143), blank, blank,
slice(pkmn, 144), blank, blank,
slice(pkmn, 145), blank, blank,
slice(pkmn, 146), blank, blank,
slice(pkmn, 147:149),
slice(pkmn, 150), blank, blank,
slice(pkmn, 151), blank, blank
)
# Numbers for the first evolution in each chain. The front-sprite will be used
# as 'page dots' so users can jumo to the evolutionary chain starting with that
# Pokemon.
start_evo_sprite <- pkmn[c(
1, 4, 7, 10, 13, 16, 19, 21, 23, 25, 27, 29, 32, 35, 37, 39, 41, 43, 46, 48,
50, 52, 54, 56, 58, 60, 63, 66, 69, 72, 74, 77, 79, 81, 83, 84, 86, 88, 90, 92,
95, 96, 98, 100, 102, 104, 106, 107, 108, 109, 111, 113, 114, 115, 116, 118,
120, 122, 123, 124, 125, 126, 127, 128, 129, 131, 132, 133, 133, 133, 137, 138,
140, 142, 143, 144, 145, 146, 147, 150, 151
), "sprite_front_src"][[1]]# This code creates the carousel
# Packages ----------------------------------------------------------------
library(htmlwidgets)
library(slickR)
# Set up carousel indivdual carousels ------------------------------------
# Set variables
my_height <- 200
my_width <- "75%"
my_slides_show <- 3
my_slides_scroll <- 3
# Set custom paging
my_cp <- JS("function(slick,index) {
return '<a><img src= ' + dotObj[index] + ' width=100% height=100%></a>';
}")
# Set common settings
my_settings <- settings(
autoplay = TRUE, arrows = FALSE,
slidesToShow = my_slides_show,
slidesToScroll = my_slides_scroll
)
# Carousel with front-facing sprites
front_carousel <- slickR(
obj = pkmn2$sprite_front_src,
objLinks = pkmn2$url,
height = my_height, width = my_width
) + my_settings
# Carousel with back-facing sprites
back_carousel <- slickR(
obj = pkmn2$sprite_back_src,
objLinks = pkmn2$url,
height = my_height, width = my_width
) + my_settings
# Carousel with National Dex numbers and names
names_carousel <- slickR(
paste(pkmn2$ndex_char, pkmn2$name),
slideType = 'p'
) +
settings(
autoplay = TRUE, arrows = TRUE,
slidesToShow = my_slides_show,
slidesToScroll = my_slides_scroll,
dots = TRUE, customPaging = my_cp
)
# Generate the carousel ---------------------------------------------------
# Synchronise the carousels
carousel <-
front_carousel %synch%
back_carousel %synch%
names_carousel
# Dots are sprites
my_sprite_dots <- htmltools::tags$script(
sprintf("var dotObj = %s", jsonlite::toJSON(start_evo_sprite))
)
# Apply sprite dots
htmltools::browsable(
htmltools::tagList(my_sprite_dots, carousel)
)Click for R session information
## [1] "Last updated 2020-02-08"## ─ Session info ───────────────────────────────────────────────────────────────
## setting value
## version R version 3.6.1 (2019-07-05)
## os macOS Sierra 10.12.6
## system x86_64, darwin15.6.0
## ui X11
## language (EN)
## collate en_GB.UTF-8
## ctype en_GB.UTF-8
## tz Europe/London
## date 2020-02-08
##
## ─ Packages ───────────────────────────────────────────────────────────────────
## package * version date lib
## assertthat 0.2.1 2019-03-21 [1]
## base64enc 0.1-3 2015-07-28 [1]
## cli 2.0.1 2020-01-08 [1]
## crayon 1.3.4 2017-09-16 [1]
## digest 0.6.23 2019-11-23 [1]
## dplyr * 0.8.3 2019-07-04 [1]
## evaluate 0.14 2019-05-28 [1]
## fansi 0.4.1 2020-01-08 [1]
## glue 1.3.1 2019-03-12 [1]
## htmltools 0.4.0 2019-10-04 [1]
## htmlwidgets * 1.5.1 2019-10-08 [1]
## jsonlite 1.6.1 2020-02-02 [1]
## knitr 1.26 2019-11-12 [1]
## lifecycle 0.1.0 2019-08-01 [1]
## magrittr 1.5 2014-11-22 [1]
## pillar 1.4.3 2019-12-20 [1]
## pkgconfig 2.0.3 2019-09-22 [1]
## purrr 0.3.3 2019-10-18 [1]
## R6 2.4.1 2019-11-12 [1]
## Rcpp 1.0.3 2019-11-08 [1]
## rlang 0.4.4 2020-01-28 [1]
## rmarkdown 2.0 2019-12-12 [1]
## sessioninfo 1.1.1 2018-11-05 [1]
## slickR * 0.4.9 2020-02-08 [1]
## stringi 1.4.5 2020-01-11 [1]
## stringr 1.4.0 2019-02-10 [1]
## tibble 2.1.3 2019-06-06 [1]
## tidyselect 0.2.5 2018-10-11 [1]
## withr 2.1.2 2018-03-15 [1]
## xfun 0.12 2020-01-13 [1]
## xml2 1.2.2 2019-08-09 [1]
## yaml 2.2.1 2020-02-01 [1]
## source
## CRAN (R 3.6.0)
## CRAN (R 3.6.0)
## CRAN (R 3.6.0)
## CRAN (R 3.6.0)
## CRAN (R 3.6.0)
## CRAN (R 3.6.0)
## CRAN (R 3.6.0)
## CRAN (R 3.6.0)
## CRAN (R 3.6.0)
## CRAN (R 3.6.0)
## CRAN (R 3.6.0)
## CRAN (R 3.6.0)
## CRAN (R 3.6.0)
## CRAN (R 3.6.0)
## CRAN (R 3.6.0)
## CRAN (R 3.6.0)
## CRAN (R 3.6.0)
## CRAN (R 3.6.0)
## CRAN (R 3.6.0)
## CRAN (R 3.6.0)
## CRAN (R 3.6.1)
## CRAN (R 3.6.0)
## CRAN (R 3.6.0)
## Github (metrumresearchgroup/slickR@105d48d)
## CRAN (R 3.6.0)
## CRAN (R 3.6.0)
## CRAN (R 3.6.0)
## CRAN (R 3.6.0)
## CRAN (R 3.6.0)
## CRAN (R 3.6.0)
## CRAN (R 3.6.0)
## CRAN (R 3.6.0)
##
## [1] /Users/matt.dray/Library/R/3.6/library
## [2] /Library/Frameworks/R.framework/Versions/3.6/Resources/library