Part of project: College Rankings

Bump chart

Click image to go to the application.

In my previous post, I talked about how to create a simple bump chart using R with ggplot. I was looking at how to best visualize different ranking sources in one chart but never settled on a proper chart. I decided to let the type of ranking be selected by the user in addition to the number of colleges to display.

The web application was created using R with shiny. I really like how shiny allows you to customize the UI using css. A screenshot is shown above and you can access it here.

Shiny is an R package to make web applications. It essentially consists of the interaction of two different files, ui.R and server.R. Lets discuss the code in brief.

ui.R

The interface of the app is created with this script. I like the option of using your own css file with includeCSS. You can get some nice bootstrap themes from bootswatch.

library(shiny)

shinyUI(fluidPage(
  includeCSS("bootstrap.css"),
  hr(),
  # Output the plot from the server
  plotOutput("plot1", width = "1200"),
  hr(),
  
  fluidRow(
    
    column(3, titlePanel("College Rankings Bump Charts"), 
           mainPanel("by", a("data-slinky", href="http://data-slinky.com/project/3_College_rankings/"))),
    
    column(4, selectInput("data", "Dataset:",
                c("Times Higher Education" = "timesData",
                  "Center for World University Rankings" = "cwurData",
                  "Shanghai Rankings" = "shanghaiData"), selected = "timesData")
    ),
    column(5, sliderInput("var1", "Top N schools:", min=1, max=20, value=10)
    )
  )
))

In this UI, I am using a grid format in which I want the plot output to be in its own row. The options that the users select are below that in two separate columns. The selectInput statement creates a dropdown listing the different datasets the user can select. The sliderInput function creates a slider to select the number of schools the user wants to display. These parameters are passed as variables to server.R.

server.R

This script does all of the computations to pass to the UI. I essentially use the same function from the bump plot script except I pass the parameter for the dataset to be input$data and the parameter for the number of colleges to be input$var1. It is necessary to use input$var1 to specify the y-axis and the number of breaks since the some datasets such as Shanghai does not have 2016 data. Everything else is the same as the previous script except for some stylistic changes.