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.
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 Rdata
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 themtcars
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 ofmtcars
to each other in the heat map. Note thatmtcars
is in a data frame format, butscale()
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()
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.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 tocar_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 theHeatModSVG
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 ofcar_data.csv
, it does not really matter, sincecar_data.csv
does not contain any comments.Next, we chose
c
(comma) as the column separator, since we createdcar_data.csv
as a Comma Separated Value file in R. WhenHeatModSVG
asks us for row labels, we chooseno
, and for column names, we chooseyes
, sincecar_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 byHeatModSVG
. This is the point where we should double-check whether we provided the correct options toHeatModSVG
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
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 IDviewport
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 thecar_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: