Posts tagged “tutorial”
Update: WebFaction released today a one-click installed for node.js, obviating Step 2 below. Leaving it in here for posterity.
Shiny “makes it super simple for R users like you to turn analyses into interactive web applications that anyone can use.” It’s a powerful tool with a relatively simple syntax. It’s great for local apps — but I wanted to set up a web-based app that others could access and that wasn’t beholden to Shiny and RStudio’s excellent beta server platform.
I host this site and a few others at WebFaction — an awesome service with little to no downtime, fast servers, and relatively flexible restrictions. Getting Shiny up and running on WebFaction required a little work.
Step 1: SSH into WebFaction. Follow the instructions on their website for your specific server(s).
Step 2: Make a source directory. Download and install node.js.
mkdir src cd src wget 'http://nodejs.org/dist/v0.10.20/node-v0.10.20.tar.gz' tar -xzf node-v0.10.20.tar.gz cd node-v0.10.20 python2.7 configure --prefix=$HOME make PYTHON=python2.7 make PYTHON=python2.7 install export NODE_PATH="$HOME/lib/node_modules:$NODE_PATH" echo 'export NODE_PATH="$HOME/lib/node_modules:$NODE_PATH"' >> $HOME/.bashrc
Step 3: Download and install R.
#install R wget 'http://cran.us.r-project.org/src/base/R-3/R-3.0.2.tar.gz' tar -xzf R-3.0.2.tar.gz cd R-3.0.2 ./configure --prefix $HOME make make install
Step 4: Make a temp/tmp/temporary director.
cd $HOME mkdir tmp chmod 777 tmp TMPDIR=$HOME/tmp export TMPDIR
Step 5: Download Shiny from source and install using NPM.
git clone https://github.com/rstudio/shiny-server.git npm install -g shiny-server/
installing from NPM directly did not work — Shiny would not launch. I believe this is because you’re not allowed root access on WebFaction shared accounts.
Step 6: Launch R and install whatever packages you need.
install.packages('ggplot2') install.packages('data.table') devtools::install_github("ShinyDash", "trestletech") devtools::install_github("shiny-incubator", "rstudio")
Step 7: Want plots to work? In your Shiny app’s global.R file, set
options(bitmapType = 'cairo')
Next up: a cron job to keep a Shiny instance running or to restart it if it goes down… and putting Shiny behind some light authentication to prevent pre-release apps from general consumption.
A few requests had come in to download around 12 countries worth of the recently released Global Burden of Disease from the IHME website. There’s no way to quickly download multiple files; by my count, it requires you to type the country name, click a link, click a tab, and then option-click a CSV file.
The URLs had relatively similar construction, so I wrote a quick R script to download all of the data and save each one as a separate compressed RDS file. I also dropped a couple of redundant columns to try to save some space. The compression is pretty efficient; 25-27 MB files were reduced to between 6.6 - 7.4 MB. Check it out here or below.
Update (April 2015): Updated to allow users to specify download location, making it work better ‘out of the box’; users can specify whether to download as CSV or RDS (or both); fixed some other minor bugs; fixed a major change in the URL structure.
R can be scary for those new to it, but it is exceptionally useful for a number of things, including managing, importing, and merging text files; resaving them; and performing statistical analyses to your heart’s content. It is your friend, albeit one that you must learn to love slowly and painfully.
This brief tutorial does not serve as an introduction to R. Instead, it focuses on reading in a large, complex data set with ~1 million rows and 50+ columns. It was created to help facilitate some analysis in a GBD course at Berkeley. It will help you figure out how to do some basic manipulation and subsetting and export these subsetted data into a comma-separated text file (“csv”) for analysis in your favorite spreadsheet program. It is a work in progress and will be updated over time.
I recently revamped my photos page. I wanted an interactive, cross-device gallery to display the photos. In the past, I had been using jbgallery, a slick tool that used jQuery. I was having a bit of a hard time getting it to work the way I wanted and it was a little laggy on iOS and Android devices, so I decided to part ways with it. I don't want to speak poorly of it -- it works very well and the developer is friendly, happy to chat, and works to improve his library constantly. It's a nice tool, but wasn't what I was looking for in the end.
Photoswipe looked rad and performed pretty well on my iOS devices (an iPhone 4 and a 2012 iPad with Retina Display). I decided to give it a whirl.
This is my first tutorial related to this kind of stuff - take it with a grain of salt. And let me know if there are blatant errors or better ways to do things.
Into the body of your webpage, you'll need to put the code pointing to the flickr call. Place this wisely -- it'll play an important role in making all of your photos appear in the proper place. As placement is a bit context specific, we won't go into details here. Play around with it or view the source on photographs if you have initial questions.
Open your favorite text editor and create a new file. Paste the following into it. Create a reference to it in your photo gallery page. We'll go through it in more detail below.
Our first line defines our function. Ce n'est rien.
Our next couple of lines set a newly defined variable -- retina -- to see if the Pixel Ratio > 1.
Our next four lines check that we're getting an okay JSON response from flickr. If it's not okay, things are going to halt. This could be due to a poorly formed request, a lack of API key, etc.
Next, we're going to get the number of responses (photos) pulled from our response. This will be important later. We're also going to define a couple of empty variables that we'll use later.
Now comes a bit of a headache. The comment explains how we're choosing a number of different photo sizes and building URLs to access them. Flickr recently revised its API, so for more information / to keep this thing up to date check out the official documentation.
We basically choose a large square image for the thumbnail for retina displays and a smaller one for non-retina displays; similarly, we choose a large image for retina displays and a smaller one for non-retina displays. This introduces a bit of an issue -- if a user is on Edge with a retina display, the image will load slooooowly. There are ways around this, but its a bit too much for me to deal with.
The next bits -- r+= and s+= -- build list items for each image. This chunk should be filled with code relevant to the layout of your page. If you're not using PhotoSwipe, you can adapt this to whatever you need it to be. Just be sure to keep track of the quotation marks.
If we have a retina display, we embed the retina images; otherwise, we embed the standard images.
And we're off! I made a number of other small tweaks to the PhotoSwipe JS to make it work the way I wanted. But, overall, this covers the gist of it. Download a copy of the script here.