Getting the Most Out of a Squarespace Website
Squarespace’s attraction is how artistic and balanced its landing pages look. Squarespace made my work look professional, but I had plenty of reservations about how flexible its platform was. Since I’m someone who does primarily data and visualization, the question was whether I could integrate many of the tools that were a part of my workflow in data science. Blogging is only effective when readers gain insight from your work. With the idea of improving the looks of my website, I migrated from Jekyll—a static website generator— to Squarespace. Jekyll was awesome in that it teaches you how webpages are put together and organized. But since I’ve started blogging in Squarespace, it’s made uploading images and messing around with document formatting a lot easier. The experimental part of the migration was whether I could incorporate third-party plugins. Below are some web services that help present content in the most effective way for readers.
When summarizing a document, many readers prefer to verify conclusions themselves. Thus, a document viewer that could be embedded into a a webpage was a necessity. There were two that were considered: Google Documents and Scribd. Eventually, Google Docs was given preference because it allowed for annotations to be made. The embedded document is included below.
Another service that dovetails with R—the language I’m most proficient in— is leaflet. You can assign locations to a map using the service and it allows for interactivity between the user and the location. Below is a map where Henderson, Kentucky, is set as the center point of the map and a marker where my house is located. The bounding box was set the width of the page but 400px in length to conserve vertical space.
When writing code, it is helpful if parts of it are colored to help distinguish, for example, variables from comments. To date, code has not been included in any of my blog posts, but I wanted the flexibility to write about issues in R. If code was included, syntax highlighting would help make it more readable and would allow for readers to copy it for their own uses. There are many open-source syntax highlighters available like prism.js , highlight.js and chroma to name a few. After experimenting a little bit, I went with what I liked which was a customized download from “highlight.js” because it included R and I chose the theme Xcode because it had a light background. (Dark backgrounds are great for seeing the code, but a pain if you actually ever have to print it.)
#this is R code with syntax highlighting by highlight.js. #the theme is Xcode a <- 1:10 b <- 1:10 #add for variable df <- data.frame(a = a, b = b) df$c <- df$b * df$a a <- 1:10 b <- 1:10 #add for variable df <- data.frame(a = a, b = b) df$c <- df$b * df$a a <- 1:10 b <- 1:10 #add for variable df <- data.frame(a = a, b = b) df$c <- df$b * df$a a <- 1:10 b <- 1:10 #add for variable df <- data.frame(a = a, b = b) df$c <- df$b * df$a
Github is a version control system and their embedded code window was new to me but I first saw it here. The “view raw” button opens a new browser window with just the text portion of the code. That’s a nice feature because sometimes you end up with white space or line numbers included in a cut and paste. However, there were no problems with cutting and pasting the code from the highlight.js window above. So I’m not sure what you gain by using the github gist embed. (Feel free to comment below if you disagree!)
Plotly allows for interactive charts and, again, plays well with R. You can do a plot in R and then upload it to Plotly. Plotly will then convert the R code and make it interactive for display on the web. The chart below took me about 20 min to make using another favorite utility of mine Tabula. (Tabula let’s you scrape a PDF table.) One fun thing about the Plotly line chart is that you can turn the different paths “off” and declutter the presentation. In a regular time series plot, three or more lines begin to look pretty busy. Feel free to experiment on Kentucky Community and Technical College System full time student enrollments. Notice that they’ve been trending downwards since the economic recovery in the 2008 recession.
Google Sheets as Tables
Originally, I went looking for a cheap, interactive table. “html” tables are static and a reader might want to sort a table based on a particular column. Plotly was tried first since they allow for embedding a table; however, it was also static. Then, a web search turned up google sheets. This solution seemed too easy since a google document fit the bill previously. The format and scrolling are definitely appealing. The viewing window was way too small so attributes were added to the iframe tag. “width: 100%;” and “height:400px” were added for the window below. Easy solution, but it’s still not interactive.