Back to posts

Creating a simple bar chart with Morris.js and a custom hovercallback

Posted on 8th May 2016

Creating interactive graphs and charts is a great way to show a lot of information in a small space without cluttering up the drawing canvas. This post describes the use of Ramnath Vaidyanathan’s rCharts package with Thomas Lumley’s survey package to create a simple bar chart with design-corrected standard errors that appear on mouseover.

The data used in this example come from the Pew Research Center’s (PRC) Internet & American Life Project, December 2010 survey, which measured technology’s role in group formation and community engagement (a personal interest). The data can be downloaded, free of charge, from the PRC website with permission.

Data preparation

This first bit of code creates a data frame called “tempslst” from a column-subsetted version of the downloaded .csv file, “December_2010_Social_Side.csv”. A call to colClasses specifies the variable types: columns 1-8 are assigned to characters, columns 9-58 to factors, and columns 67 and 68 (weight variables) to numeric.

tempslst <- read.csv(file="December_2010_Social_Side_Short.csv", head=TRUE,sep=",", 
colClasses=c(rep('character',8), rep('factor',57), 'numeric','numeric'))

After loading the survey package, a survey design object called "sdta", created through assignment of the results of survey's svydesign function, will include both the survey responses and the survey sample design information needed for analysis. Functions svytotal and svymean will create two vectors, with weighted totals and means and their corresponding standard errors, respectively. For the chart, I'm interested in showing the population proportions and population totals, so will keep the totals as an addition to the hoverCallback return string later. The two vectors will then be combined column-wise. Only the 'total' column from the totals data frame (dt[1]) will be appended. This post uses a fairly trivial example, tabulating by sex, for the purposes of showing the mechanics behind chart construction.

require(survey)
sdta<-svydesign(id=~1, weights=~weight, data=tempslst)
t <-svytotal(~sex, sdta)
m <-svymean(~sex, sdta)
dt <- as.data.frame(t)
dm <- as.data.frame(m)
d <- as.data.frame(cbind(dt[1],dm))

To make a prettier chart, these next lines of code create formatted variables for the hoverCallback return string.

d$ttl <- ceiling(dt$total)
d$pct <- 100*round(dm$mean, digits = 3)
d$se <- 100*round(dm$SE,digits=3)
d$sex <-c("Male","Female")

Graphing

After loading rCharts, creating the bar chart is simple. Wrapping the hoverCallback string in between #! and !# is a little hackery credited entirely to Dr. Vaidyanathan.

require(rCharts)
mp <- mPlot(ttl~sex, data = d, type = "Bar", names.arg=c("Male","Female") )
mp$set(hoverCallback = "#! function(index, options, content){
var row = options.data[index]
return '' + row.sex + '' + '' + 
'Percent: ' + row.pct + '' + 'SE: ' + row.se !#")
mp

Note: Originally posted December 16, 2013