gvisTreeMap: Google Tree Map with R

In jburos/GoogleVis: Interface between R and the Google Chart Tools

Description

The gvisTreeMap function reads a data.frame and creates text output referring to the Google Visualisation API, which can be included into a web page, or as a stand-alone page. The actual chart is rendered by the web browser in flash.

Usage

gvisTreeMap(data,
            idvar = "", parentvar = "",
            sizevar = "", colorvar = "",
            options = list(),
            chartid)

Arguments

data	a data.frame. The data has to have at least four columns. Each row in the data table describes one node (a rectangle in the graph). Each node (except the root node) has one or more parent nodes. Each node is sized and colored according to its values relative to the other nodes currently shown.
idvar	column name of data describing the ID for each node. It can be any valid JavaScript string, including spaces, and any length that a string can hold. This value is displayed as the node header.
parentvar	column name of data that match to entries in idvar. If this is a root node, leave this NA. Only one root is allowed per treemap.
sizevar	column name of data with positive values to define the size of maps. Any positive value is allowed. This value determines the size of the node, computed relative to all other nodes currently shown. This value is ignored for non-leaf nodes (it is actually calculated from the size of all its children).
colorvar	column name of data with values to define range of color. The value is used to calculate a color for this node. Any value, positive or negative, is allowed. The color value is first recomputed on a scale from minColorValue to maxColorValue, and then the node is assigned a color from the gradient between minColor and maxColor.
options	list of configuration options for Google Tree Map. gvis.editor a character label for an on-page button which opens an in-page dialog box that enables users to edit, change and customise the chart. By default no value is given and therefore no button is displayed. Further possible components are, taken from https://google-developers.appspot.com/chart/interactive/docs/gallery/treemap.html#Configuration_Options: headerColor string, default '#988f86'. The color of the header section for each node. Specify an HTML color value. headerHeight number, default 0. The height of the header section for each node, in pixels (can be zero). headerHighlightColor string, default 'null'. The color of the header of a node being hovered over. Specify an HTML color value, null, or 'auto'; if null or 'auto', this value will be headerColor lightened by 35% maxColor string, default #00dd00. The color for a rectangle with a sizevar value of maxColorValue. Specify an HTML color value. maxDepth number, default 1. The maximum number of node levels to show in the current view. Levels will be flattened into the current plane. If your tree has more levels than this, you will have to go up or down to see them. You can additionally see maxPostDepth levels below this as shaded rectangles within these nodes. maxHighlightColor string, default null. The highlight color to use for the node with the largest value in column 3. Specify an HTML color value, null, or 'auto. If null or 'auto', this value will be the value of maxColor lightened by 35% maxPostDepth number, default 1. How many levels of nodes beyond maxDepth to show in "hinted" fashion. Hinted nodes are shown as shaded rectangles within a node that is within the maxDepth limit. maxColorValue number, default null. The maximum value allowed in column sizevar. All values greater than this will be trimmed to this value. If set to null or 'auto', it will be set to the max value in the column. midColor string, default #000000. The color for a rectangle with a column sizevar value midway between maxColorValue and minColorValue. Specify an HTML color value. midHighlightColor string, default null. The highlight color to use for the node with a column sizevar value near the median of minColorValue and maxColorValue. Specify an HTML color value or 'auto'. If null or 'auto', this value will be the value of midColor lightened by 35%. minColor string, default #dd0000. The color for a rectangle with the column sizevar value of minColorValue. Specify an HTML color value. minHighlightColor string, default null. The highlight color to use for the node with a column sizevar value nearest to minColorValue. Specify an HTML color value or 'auto'. If null or 'auto', this value will be the value of minColor lightened by 35' minColorValue number, default null. The minimum value allowed in column sizevar. All values less than this will be trimmed to this value. If set to null or 'auto', it will be calculated as the minimum value in the column. noColor string, default #000000. The color to use for a rectangle when a node has no value for column sizevar, and that node is a leaf (or contains only leaves). Specify an HTML color value. noHighlightColor string, default null. The color to use for a rectangle of "no" color when highlighted. This will be the value of noColor lightened by 35%. Specify an HTML value. showScale boolean, default FALSE. Whether or not to show a color gradient scale from minColor to maxColor along the top of the chart. Specify true to show the scale. showTooltips boolean, default TRUE. Whether or not to show tooltips. fontColor string, default #ffffff. The text color. Specify an HTML color value. fontFamily string, default auto. The font family to use for all text. fontSize number, default 12. The font size for all text, in points.
chartid	character. If missing (default) a random chart id will be generated based on chart type and tempfile

Details

From http://code.google.com/apis/chart/interactive/docs/gallery/treemap.html#Overview:

A tree map is a visual representation of a data tree, where each node can have zero or more children, and one parent (except for the root, which has no parents). Each node is displayed as a rectangle, sized and colored according to values that you assign. Sizes and colors are valued relative to all other nodes in the graph. You can specify how many levels to display simultaneously, and optionally to display deeper levels in a hinted fashion. If a node is a leaf node, you can specify a size and color; if it is not a leaf, it will be displayed as a bounding box for leaf nodes. The default behavior is to move down the tree when a user left-clicks a node, and to move back up the tree when a user right-clicks the graph.

The total size of the graph is determined by the size of the containing element that you insert in your page. If you have leaf nodes with names too long to show, the name will be truncated with an ellipsis (...).

Value

gvisTreeMap returns list of class "gvis" and "list".

An object of class "gvis" is a list containing at least the following components:

type	Google visualisation type, here 'TreeMap'
chartid	character id of the chart object. Unique chart ids are required to place several charts on the same page.
html	a list with the building blocks for a page header a character string of a html page header: <html>...<body>, chart a named character vector of the chart's building blocks: jsHeader Opening <script> tag and reference to Google's JavaScript library. jsData JavaScript function defining the input data as a JSON object. jsDrawChart JavaScript function combing the data with the visualisation API and user options. jsDisplayChart JavaScript function calling the handler to display the chart. jsFooter End tag </script>. jsChart Call of the jsDisplayChart function. divChart <div> container to embed the chart into the page. caption character string of a standard caption, including data name and chart id. footer character string of a html page footer: </body>...</html>, including the used R and googleVis version and link to Google's Terms of Use.

Warning

Tree maps display a tree like structure where every child has to have a unique parent.

Values in column sizevar should be greater than zero and finite.

Author(s)

Markus Gesmann [e-mail],

Diego de Castillo [e-mail]

References

Google Tree Map API: https://google-developers.appspot.com/chart/interactive/docs/gallery/treemap.html

Follow the link for Google's data policy.

See Also

See also print.gvis, plot.gvis for printing and plotting methods.

Please note that the treemap package offeres a static version of tree maps via its tmPlot function.

Examples

## Please note that by default the googleVis plot command
## will open a browser window and requires Internet
## connection to display the visualisation.

Tree <- gvisTreeMap(Regions,  idvar="Region", parentvar="Parent",
                    sizevar="Val", colorvar="Fac")
plot(Tree)


Tree2 <- gvisTreeMap(Regions,  "Region", "Parent", "Val", "Fac",
                    options=list(width=600, height=500,
                                 fontSize=16,
                                 minColor='#EDF8FB',
                                 midColor='#66C2A4',
                                 maxColor='#006D2C',
                                 headerHeight=20,
                                 fontColor='black',
                                 showScale=TRUE))

plot(Tree2)

## Simple static treemap with no drill down options based on US states
## and their area. However we still have to create a parent id to use
## gvisTreeMap
 
require(datasets)
states <- data.frame(state.name, state.area)

## Create parent variable

total=data.frame(state.area=sum(states$state.area), state.name="USA")

my.states <- rbind(total, states)
my.states$parent="USA"
## Set parent variable to NA at root level
my.states$parent[my.states$state.name=="USA"] <- NA

my.states$state.area.log=log(my.states$state.area)
statesTree <- gvisTreeMap(my.states, "state.name", "parent",
                          "state.area", "state.area.log")
plot(statesTree)


## We add US regions to the above data set to enable drill down capabilities

states2 <- data.frame(state.region, state.name, state.area)

regions <- aggregate(list(region.area=states2$state.area),
                     list(region=state.region), sum)

my.states2 <- data.frame(regionid=c("USA",
                                    as.character(regions$region),
                                    as.character(states2$state.name)),
                         parentid=c(NA, rep("USA", 4),
                                   as.character(states2$state.region)),
                         state.area=c(sum(states2$state.area),
                                      regions$region.area, states2$state.area))

my.states2$state.area.log=log(my.states2$state.area)

statesTree2 <- gvisTreeMap(my.states2, "regionid", "parentid",
                           "state.area", "state.area.log")

plot(statesTree2)

## Now we add another layer with US divisions

states3 <- data.frame(state.region, state.division, state.name, state.area)

regions <- aggregate(list(region.area=states3$state.area),
                     list(region=state.region), sum)

divisions <- aggregate(list(division.area=states3$state.area),
                     list(division=state.division, region=state.region),
                     sum)

my.states3 <- data.frame(regionid=c("USA",
                                    as.character(regions$region),
                                    as.character(divisions$division),
                                    as.character(states3$state.name)),
                         parentid=c(NA, rep("USA", 4), 
                                   as.character(divisions$region),
                                   as.character(states3$state.division)),
                         state.area=c(sum(states3$state.area),
                                      regions$region.area,
                                      divisions$division.area,
                                      states3$state.area))

my.states3$state.area.log=log(my.states3$state.area)

statesTree3 <- gvisTreeMap(my.states3, "regionid", "parentid",
                           "state.area", "state.area.log")

plot(statesTree3)

jburos/GoogleVis documentation built on May 18, 2019, 9:19 p.m.