Book Image

Instant Heat Maps in R How-to

By : Sebastian Raschka
Book Image

Instant Heat Maps in R How-to

By: Sebastian Raschka

Overview of this book

R has grown rapidly over the years to become one of the most versatile and valuable tools for data analysis and graphing. One of its many useful features is the heat map representation of numerical data, which is an invaluable tool to discover patterns in data quickly and efficiently. Instant Heat Maps in R How-to provides you with practical recipes to create heat maps of all difficulty levels by yourself right from the start. At the end of each recipe, you will find an in-depth analysis that will equip you with everything you need to know to frame the code to your own needs. Instant Heat Maps in R will present you with all the different heat map plotting functions that exist in R. You will start by creating simple heat maps before moving on to learn how to add more features to them. While you advance step-by-step through the well-connected recipes, you will find out which tool suits the given situation best. You will learn how to read data from popular file formats and how to format the data to create heat maps as well as the ways to export them for presentation.
Table of Contents (7 chapters)

Bringing your data to life (Advanced)


We learned how to create heat maps, customize them, and save them as image files. Now, it is time to go a step further and add some interactivity for displaying them on the Web. In this recipe, we will learn how to manipulate heat map-containing SVG files to add a nice hover effect and fade-in tool tips using CSS. Further, we will see how to embed our heat map in HTML files, and make use of JavaScript to add further interactivity.

The following screenshot was captured from a Safari web browser after applying the hover effect to our SVG image. Notice the highlighted cell under the mouse pointer:

Getting ready

Download the 5644OS_06_01.r script and a version of the HeatModSVG program for your operating system from your account at http://www.packtpub.com. It is recommended, but not mandatory, to download the latest version of the svgpan JavaScript library from, by Andrea Leofreddi, https://code.google.com/p/svgpan/downloads/list.

Further, I recommend that you save all files to the same folder on your computer.

For an explanation on how to run scripts in R, please read the Getting ready section of the Creating your first heat map in R recipe.

The script will check automatically if any additional packages need to be installed in R. You can find more information about the installation of packages in the Getting ready section of the Creating your first heat map in R recipe.

How to do it...

Run the 5644OS_06_01.r script and then launch HeatModSVG (see the instructions below the script contents):

if (!require("gplots")) {
install.packages("gplots", dependencies = TRUE)
library(gplots)
}
if (!require("MASS")) {
install.packages("MASS", dependencies = TRUE)
library(MASS)
}

# Writing out matrix file
data(mtcars)
car_data <- mtcars[,1:7]
write.matrix(car_data, "car_data.csv", sep = ",")
norm_cars <- scale(car_data) # automatically matrix

# Creating heat map
svg("car_heatmap.svg")
heatmap.2(norm_cars, 
  density.info = "none",
  trace = "none",
  dendrogram = "none",
  Rowv = FALSE, 
  Colv = FALSE,
  margin = c(5,10))

dev.off()

After you have ran the R script, make sure that two new files were created in the current working directory: car_heatmap.svg and car_data.csv. Now, double-click on the HeatModSVG program and a new window should appear on your screen. The lines that require your input are highlighted in the sample session as follows. You can just take over the inputs of this sample session, but make sure that you type in the correct location of the car_heatmap.svg heat map file and the car_data.csv data file.

#####################################
##                                 ##
## HeatModSVG v 1.06 (04/04/2013)  ##
##                                 ##
## Written by Sebastian Raschka    ##
##                                 ##
#####################################


===============
=== Options ===
===============

-- Add Tool Tips: t
-- Add Zoom and Panning: z
-- Add Both: tz
-- Quit: q

Enter your choice: tz
Current working directory: /Users/sebastian
SVG file: /Users/sebastian/Desktop/car_heatmap.svg
Matrix file: /Users/sebastian/Desktop/car_data.csv


MATRIX SPECIFICATION
--------------------

Comment character: #

Separator 
-- "w" for whitespace
-- "t" for tab
-- "c" for comma
: c
Column names? (y/n): y
Row names? (y/n): n

Read in data from car_data.csv:


21.000  6.000   160.000 110.000 3.900   2.620   16.460 
21.000  6.000   160.000 110.000 3.900   2.875   17.020 
22.800  4.000   108.000 93.000  3.850   2.320   18.610 
... 
21.400  4.000   121.000 109.000 4.110   2.780   18.600  

Add a label to tool tips? (y/n): n

... inserted CSS <style> tag after line 2

... inserted link to svgPan.js after CSS <style> tag

... added viewport ID in line 286

... IDs and tool tip <title> tags were inserted in lines 289 to 512

Saving . . . . . . . . 

==> Created /Users/sebastian/Desktop/NEW_car_heatmap.svg

How it works...

To add interactivity to our heat maps, we will make use of R's capability to store the created images in the Scalable Vector Graphics format. The content of SVG files is saved as plain text and can be viewed with any text editor. If we open an SVG file in a text editor, we will see XML code that contains the information for our web browser to render the image.

The advantage of this XML code is that we can manipulate it using HTML, CSS, and JavaScript.

  1. Creating a heat map SVG file in R: First, we create our heat map by running the R script 5644OS_06_01.r. By now, the contents of the script should look very familiar to us, but let us go over it briefly.

    We create our heat map from the mtcars data set from the R data package. The data set contains information about 32 car models from 1973-1974. The data columns from 1 to 7 contain information on miles per gallon, number of cylinders, displacement in cubic inches, horsepower, rear axle ratio, weight (lb/1000), and one fourth mile time.

    data(mtcars)
    car_data <- mtcars[,1:7]
    write.matrix(car_data, "car_data.csv", sep = ",")

    Using the write.matrix() function, we add the mtcars data in a CSV file. We will need this data file later to add tool tips to our heat map.

    We use the scale() function to normalize the data, so we can compare the different variables of mtcars to each other in the heat map. Note that mtcars is in a data frame format, but scale() will automatically convert it into a numerical matrix. Finally, we open a new graphic device to save our heat map to an SVG file.

    norm_cars <- scale(car_data) 
    
    # Creating heat map
    svg("car_heatmap.svg")
    heatmap.2(norm_cars, 
      density.info = "none",
      trace = "none",
      dendrogram = "none",
      Rowv = FALSE, 
      Colv = FALSE,
      margin = c(5,10))
    
    dev.off()
  2. HeatModSVG options overview: Now that we have created an SVG file of our heat map, we can use the HeatModSVG program to add some interactivity to it. Let us take a look at the execution of the program before we discuss how it modifies the SVG file in more detail.

    First, the program asks us whether we want to add Tool Tips or Zoom and Panning or both. When we choose both, the program will insert tool tip labels from an external data file that will be displayed in the individual heat map cells when we hover over it with the mouse pointer. Further, the program will embed a reference to Andrea Leofreddi's SVGPan JavaScript library, which will add features like zooming, dragging, and panning to our heat map.

  3. Reading a data file into HeatModSVG: To add tool tips to our heat map, the HeatModSVG program will prompt us for a data file in addition to the SVG file that we want to modify.

    This tool tip label data can stem from the same data file that we used to create our heat map, or it can be another text file that contains data with the same dimensions (a similar number of rows and columns like the heat map data file).

    In our case, we want to show the original values of the mtcars columns from 1 to 7 that we saved to car_data.csv before we normalize the data to create the heat map.

    The following screenshot highlights the important formatting features of the car_data.csv file that we have to feed into the HeatModSVG program:

    The HeatModSVG program will ask us for the format of the comment characters in the data file, so it can ignore those lines when it reads the data. We entered #, but in the case of car_data.csv, it does not really matter, since car_data.csv does not contain any comments.

    Next, we chose c (comma) as the column separator, since we created car_data.csv as a Comma Separated Value file in R. When HeatModSVG asks us for row labels, we choose no, and for column names, we choose yes, since car_data.csv only has a header and no row labels.

    After we have specified all these options HeatModSVG prompted us to make, the contents of the data file will be printed to the screen based on how it was read in by HeatModSVG. This is the point where we should double-check whether we provided the correct options to HeatModSVG for reading in the data file—we should only see the matrix values here and no row and column labels.

    Finally, the program will ask us if we want to add a label that will be placed in front of our tool tips. If we would have chosen yes, we would have been prompted to enter a character or character string that will appear as a global label in front of our tool tip values, and the tool tips would then be displayed in the following format: <Label:> <value>.

    Just before the program finishes, it will notify us about the changes that it made to the original SVG file:

    ... inserted CSS <style> tag after line 2
    
    ... inserted link to svgPan.js after CSS <style> tag
    
    ... added viewport ID in line 286
    
    ... IDs and tool tip <title> tags were inserted in lines 289 
        to 512
    
    Saving . . . . . . . . 
    
    ==> Created /Users/sebastian/Desktop/NEW_car_heatmap.svg
  4. Modification to the SVG file: Let us take a look at the changes made by HeatModSVG step-by-step to understand how the interactivity effect works:

    ... inserted CSS <style> tag after line 2

    When we open the new SVG file, NEW_car_heatmap.svg, we see that the program inserted a CSS style tag just after line 2:

    <style>
    #hoverItem:hover{opacity: 0.3;}
    </style>

    This CSS style tag adds a mouse-over or hover effect to each element in the XML file that we label with the CSS ID hoverItem.

    Next, a link to the SVGPan.js JavaScript file was inserted at the top of the SVG file, right after the previously inserted CSS style tag:

    ... inserted link to svgPan.js after CSS <style> tag

    The link to the JavaScript file looks like this:

    <script xlink:href="SVGPan.js"/>

    In order for svgpan to work, it has to be in the same folder as the SVG file, or else we have to add the path in front of it.

    Tip

    Alternatively, you can also copy the complete contents of SVGPan.js into your SVG file script tags:

    <script> SVGPan.js contents </script>

    In order for the SVGPan effects to work, we have to add the ID viewport to the heat map elements:

    ... added viewport ID in line 286

    Note that the number 286 refers to the location in the original SVG file; since we inserted four lines already, we will find the viewport ID opening tag in line 290 of the new SVG file:

    <g id="viewport">. 

    In fact, viewport replaced another ID, surface61; this is the ID that determines the start of the visual elements of our heat map.

    Tip

    The contents of the SVG file might seem very confusing. To get an idea about its structure and how it is structured, I recommend you to simply find it out by deleting individual elements from the XML code and see how the SVG image changes in the browser.

    At this point, you may ask why we need an extra program to make those tiny changes to the XML code. In fact, we could have done everything manually in no time, but stay tuned, because now comes the laborious part:

    ... IDs and tool tip <title> tags were inserted in lines 289 to 512

    At the beginning, we saw the CSS style tag that contained the hover action added in line number 3. Now, we have to assign it to each individual cell of the heat map by adding the hoverItem ID. Further, we want to add the tool tip label from the car_data.csv file to these cells too, so that a value appears if we hover over a particular cell in the heat map.

    Without a program to automate this process, we would have to repeat this process 224 times to add the hoverItem ID and tool tip label to each cell of the 32 x 7 heat map.

    The following screenshot shows an XML that shows how an exemplary heat map cell looks like before and after the conversion: