SveltR

A blogdown boilerplate for creating truly epic visualizations

This is a boilerplate for using blogdown (R Markdown x Hugo) as a static site generator and SvelteJS as your reactive app engine. This project is released under the MIT license. Please make sure you understand its implications and guarantees.

Enjoy!! 🦊

This page is the product of an R Markdown document and an embedded Svelte app. The <div id="tech-app"></div> HTML tag embedded in this page contains the “tech-app” id attribute which is a DOM element id that TestApp.svelte has been instructed to find in order to instantiate the interactive graphics above. To learn more about developing SvelteJS applications see https://svelte.dev/tutorial/basics. Markdown is a simple formatting syntax for authoring HTML, PDF, and MS Word documents. For more details on using R Markdown see http://rmarkdown.rstudio.com.

You can embed an R code chunk like this:

print(mean(1 : 5))

## [1] 3

Sys.getenv("R_HOME")

## [1] "/var/task/lib64/R"

r_profiles <- c(file.path(Sys.getenv("R_HOME"), "etc", "Rprofile.site"),
                file.path(Sys.getenv("R_HOME"), "etc", "Rprofile"),
                file.path(Sys.getenv("R_HOME"), "library", "base", "R", "Rprofile") )

Filter(file.exists, r_profiles)

## [1] "/var/task/lib64/R/etc/Rprofile.site"
## [2] "/var/task/lib64/R/library/base/R/Rprofile"

.libPaths()

## [1] "/var/task/lib64/R/library"

Including Plots

You can also embed (static) plots…

Note that the echo = FALSE parameter was added to the code chunk to prevent printing of the R code that generated the plot. Otherwise, the code chunk will be printed on the page, like this plotly example:

options(warn = -1)
if (!require("plotly")) {
  install.packages(c("plotly"))
  library(plotly)
}

## Loading required package: plotly

## also installing the dependency 'hexbin'

## Updating HTML index of packages in '.Library'

## Making 'packages.html' ... done
## Loading required package: ggplot2
##
## Attaching package: 'plotly'
##
## The following object is masked from 'package:ggplot2':
##
##     last_plot
##
## The following object is masked from 'package:stats':
##
##     filter
##
## The following object is masked from 'package:graphics':
##
##     layout

fig <- plot_ly(midwest, x = ~percollege, color = ~state, type = "box", width = 604, height = 400)
fig

Use R’s geospatial packages to plot data on maps. For the following example, you will need to have installed the following native libraries on the host operating system: pandoc gdal geos proj udunits2:

## Loading required package: maptools

## also installing the dependencies 'e1071', 'classInt', 'units'

## Updating HTML index of packages in '.Library'

## Making 'packages.html' ... done
## Loading required package: sp
## Loading required package: rgdal
## rgdal: version: 1.5-16, (SVN revision 1050)
## Geospatial Data Abstraction Library extensions to R successfully loaded
## Loaded GDAL runtime: GDAL 2.4.4, released 2020/01/08
## Path to GDAL shared files: /usr/local/share/gdal
## GDAL binary built with GEOS: TRUE
## Loaded PROJ runtime: Rel. 4.8.0, 6 March 2012, [PJ_VERSION: 480]
## Path to PROJ shared files: (autodetected)
## Linking to sp version:1.4-2
## Loading required package: rgeos
## rgeos version: 0.5-3, (SVN revision 634)
##  GEOS runtime version: 3.4.2-CAPI-1.8.2
##  Linking to sp version: 1.4-2
##  Polygon checking: TRUE

require(maptools)

## Loading required package: maptools

## Checking rgeos availability: TRUE

data(wrld_simpl)
xlim <- c(-130,-60)
ylim <- c(35,50)
plot(wrld_simpl,xlim=xlim,ylim=ylim,col='olivedrab3',bg='lightblue')

coords <- matrix(c(-122.92,-79.4, 49.277,43.66),ncol=2)
coords <- coordinates(coords)
spoints <- SpatialPoints(coords)
df <- data.frame(location=c("SFU","UofT"))
spointsdf <- SpatialPointsDataFrame(spoints,df)
plot(wrld_simpl) + plot(spointsdf,add=T,col=c('red','blue'),pch=16)

## integer(0)

Embedding JSON data in HTML

If the output target is HTML, R has some methods for turning R data into JavaScript or JSON data and printing the results within HTML tags:

head(mtcars)

##                    mpg cyl disp  hp drat    wt  qsec vs am gear carb
## Mazda RX4         21.0   6  160 110 3.90 2.620 16.46  0  1    4    4
## Mazda RX4 Wag     21.0   6  160 110 3.90 2.875 17.02  0  1    4    4
## Datsun 710        22.8   4  108  93 3.85 2.320 18.61  1  1    4    1
## Hornet 4 Drive    21.4   6  258 110 3.08 3.215 19.44  1  0    3    1
## Hornet Sportabout 18.7   8  360 175 3.15 3.440 17.02  0  0    3    2
## Valiant           18.1   6  225 105 2.76 3.460 20.22  1  0    3    1

The mtcars sample dataset printed above has been serialized to JSON and added to a <script> tag contained within a <div id="car_data_in_html">.

require(jsonlite)

## Loading required package: jsonlite

# print without tabs so R markdown will add it to the DOM tree of the resulting page
cat(paste('<div id="car_data_in_html"><script type="application/json">', toJSON(mtcars), '\n</script>\n</div>', sep=""))

<div id="car_data_in_html">
    <script type="application/json">[{"mpg":21,"cyl":6,"disp":160,"hp":110,"drat":3.9,"wt":2.62,"qsec":16.46,"vs":0,"am":1,"gear":4,"carb":4,"_row":"Mazda RX4"},{"mpg":21,"cyl":6,"disp":160,"hp":110,"drat":3.9,"wt":2.875,"qsec":17.02,"vs":0,"am":1,"gear":4,"carb":4,"_row":"Mazda RX4 Wag"},{"mpg":22.8,"cyl":4,"disp":108,"hp":93,"drat":3.85,"wt":2.32,"qsec":18.61,"vs":1,"am":1,"gear":4,"carb":1,"_row":"Datsun 710"},{"mpg":21.4,"cyl":6,"disp":258,"hp":110,"drat":3.08,"wt":3.215,"qsec":19.44,"vs":1,"am":0,"gear":3,"carb":1,"_row":"Hornet 4 Drive"},{"mpg":18.7,"cyl":8,"disp":360,"hp":175,"drat":3.15,"wt":3.44,"qsec":17.02,"vs":0,"am":0,"gear":3,"carb":2,"_row":"Hornet Sportabout"},{"mpg":18.1,"cyl":6,"disp":225,"hp":105,"drat":2.76,"wt":3.46,"qsec":20.22,"vs":1,"am":0,"gear":3,"carb":1,"_row":"Valiant"},{"mpg":14.3,"cyl":8,"disp":360,"hp":245,"drat":3.21,"wt":3.57,"qsec":15.84,"vs":0,"am":0,"gear":3,"carb":4,"_row":"Duster 360"},{"mpg":24.4,"cyl":4,"disp":146.7,"hp":62,"drat":3.69,"wt":3.19,"qsec":20,"vs":1,"am":0,"gear":4,"carb":2,"_row":"Merc 240D"},{"mpg":22.8,"cyl":4,"disp":140.8,"hp":95,"drat":3.92,"wt":3.15,"qsec":22.9,"vs":1,"am":0,"gear":4,"carb":2,"_row":"Merc 230"},{"mpg":19.2,"cyl":6,"disp":167.6,"hp":123,"drat":3.92,"wt":3.44,"qsec":18.3,"vs":1,"am":0,"gear":4,"carb":4,"_row":"Merc 280"},{"mpg":17.8,"cyl":6,"disp":167.6,"hp":123,"drat":3.92,"wt":3.44,"qsec":18.9,"vs":1,"am":0,"gear":4,"carb":4,"_row":"Merc 280C"},{"mpg":16.4,"cyl":8,"disp":275.8,"hp":180,"drat":3.07,"wt":4.07,"qsec":17.4,"vs":0,"am":0,"gear":3,"carb":3,"_row":"Merc 450SE"},{"mpg":17.3,"cyl":8,"disp":275.8,"hp":180,"drat":3.07,"wt":3.73,"qsec":17.6,"vs":0,"am":0,"gear":3,"carb":3,"_row":"Merc 450SL"},{"mpg":15.2,"cyl":8,"disp":275.8,"hp":180,"drat":3.07,"wt":3.78,"qsec":18,"vs":0,"am":0,"gear":3,"carb":3,"_row":"Merc 450SLC"},{"mpg":10.4,"cyl":8,"disp":472,"hp":205,"drat":2.93,"wt":5.25,"qsec":17.98,"vs":0,"am":0,"gear":3,"carb":4,"_row":"Cadillac Fleetwood"},{"mpg":10.4,"cyl":8,"disp":460,"hp":215,"drat":3,"wt":5.424,"qsec":17.82,"vs":0,"am":0,"gear":3,"carb":4,"_row":"Lincoln Continental"},{"mpg":14.7,"cyl":8,"disp":440,"hp":230,"drat":3.23,"wt":5.345,"qsec":17.42,"vs":0,"am":0,"gear":3,"carb":4,"_row":"Chrysler Imperial"},{"mpg":32.4,"cyl":4,"disp":78.7,"hp":66,"drat":4.08,"wt":2.2,"qsec":19.47,"vs":1,"am":1,"gear":4,"carb":1,"_row":"Fiat 128"},{"mpg":30.4,"cyl":4,"disp":75.7,"hp":52,"drat":4.93,"wt":1.615,"qsec":18.52,"vs":1,"am":1,"gear":4,"carb":2,"_row":"Honda Civic"},{"mpg":33.9,"cyl":4,"disp":71.1,"hp":65,"drat":4.22,"wt":1.835,"qsec":19.9,"vs":1,"am":1,"gear":4,"carb":1,"_row":"Toyota Corolla"},{"mpg":21.5,"cyl":4,"disp":120.1,"hp":97,"drat":3.7,"wt":2.465,"qsec":20.01,"vs":1,"am":0,"gear":3,"carb":1,"_row":"Toyota Corona"},{"mpg":15.5,"cyl":8,"disp":318,"hp":150,"drat":2.76,"wt":3.52,"qsec":16.87,"vs":0,"am":0,"gear":3,"carb":2,"_row":"Dodge Challenger"},{"mpg":15.2,"cyl":8,"disp":304,"hp":150,"drat":3.15,"wt":3.435,"qsec":17.3,"vs":0,"am":0,"gear":3,"carb":2,"_row":"AMC Javelin"},{"mpg":13.3,"cyl":8,"disp":350,"hp":245,"drat":3.73,"wt":3.84,"qsec":15.41,"vs":0,"am":0,"gear":3,"carb":4,"_row":"Camaro Z28"},{"mpg":19.2,"cyl":8,"disp":400,"hp":175,"drat":3.08,"wt":3.845,"qsec":17.05,"vs":0,"am":0,"gear":3,"carb":2,"_row":"Pontiac Firebird"},{"mpg":27.3,"cyl":4,"disp":79,"hp":66,"drat":4.08,"wt":1.935,"qsec":18.9,"vs":1,"am":1,"gear":4,"carb":1,"_row":"Fiat X1-9"},{"mpg":26,"cyl":4,"disp":120.3,"hp":91,"drat":4.43,"wt":2.14,"qsec":16.7,"vs":0,"am":1,"gear":5,"carb":2,"_row":"Porsche 914-2"},{"mpg":30.4,"cyl":4,"disp":95.1,"hp":113,"drat":3.77,"wt":1.513,"qsec":16.9,"vs":1,"am":1,"gear":5,"carb":2,"_row":"Lotus Europa"},{"mpg":15.8,"cyl":8,"disp":351,"hp":264,"drat":4.22,"wt":3.17,"qsec":14.5,"vs":0,"am":1,"gear":5,"carb":4,"_row":"Ford Pantera L"},{"mpg":19.7,"cyl":6,"disp":145,"hp":175,"drat":3.62,"wt":2.77,"qsec":15.5,"vs":0,"am":1,"gear":5,"carb":6,"_row":"Ferrari Dino"},{"mpg":15,"cyl":8,"disp":301,"hp":335,"drat":3.54,"wt":3.57,"qsec":14.6,"vs":0,"am":1,"gear":5,"carb":8,"_row":"Maserati Bora"},{"mpg":21.4,"cyl":4,"disp":121,"hp":109,"drat":4.11,"wt":2.78,"qsec":18.6,"vs":1,"am":1,"gear":4,"carb":2,"_row":"Volvo 142E"}]
    </script>
</div>

Note the specification of the type="application/json" attribute, which prevents the browser from evaluating the contents of the <script> tag as JavaScript (if that is intended) and allows some other code block to call:

<script>
  var data = JSON.parse(document.getElementById('car_data_in_html').children[0].innerHTML);
</script>

Run Python with Reticulate

It is also possible to include Python code chunks in R Markdown, by first loading the reticulate package (in R):

## Loading required package: reticulate

library(reticulate)

py_sys <- import("sys")
print(py_sys$path)

## [1] ""
## [2] "/var/task/adam/envs/r-reticulate/bin"
## [3] "/var/task/adam/envs/r-reticulate/lib/python35.zip"
## [4] "/var/task/adam/envs/r-reticulate/lib/python3.5"
## [5] "/var/task/adam/envs/r-reticulate/lib/python3.5/plat-linux"
## [6] "/var/task/adam/envs/r-reticulate/lib/python3.5/lib-dynload"
## [7] "/var/task/adam/envs/r-reticulate/lib/python3.5/site-packages"
## [8] "/var/task/lib64/R/library/reticulate/python"

cat(list.files(py_sys$path)[grepl("matplot", list.files(py_sys$path))])

py_install("matplotlib", pip = TRUE)
py_module_available("matplotlib.pyplot")

## [1] TRUE

… and then adding the python code block(s) ({python}):

data = {"foo": {"bar": "baz"}}
string = "Reticulate"

for index, letter in enumerate(string):
    print((letter, index))

## ('R', 0)
## ('e', 1)
## ('t', 2)
## ('i', 3)
## ('c', 4)
## ('u', 5)
## ('l', 6)
## ('a', 7)
## ('t', 8)
## ('e', 9)

import sys

print(sys.path)

## ['', '/var/task/adam/envs/r-reticulate/bin', '/var/task/adam/envs/r-reticulate/lib/python35.zip', '/var/task/adam/envs/r-reticulate/lib/python3.5', '/var/task/adam/envs/r-reticulate/lib/python3.5/plat-linux', '/var/task/adam/envs/r-reticulate/lib/python3.5/lib-dynload', '/var/task/adam/envs/r-reticulate/lib/python3.5/site-packages', '/var/task/lib64/R/library/reticulate/python']