Chapter 36 GoogleVis
Junyang Jiang and Alex Wan
36.1 Overview
This section covers how to make charts with googleVis.
Google Charts Tools is a powerful online tool that enables users to create attractive graphical charts and embed them in Web pages with JavaScript. And the googleVis package can help R users take fully advantage of Google charts tools, which provides an interface between R and the Google charts tools and allows users to create interactive charts based on R data frames. This package (Version 0.6.4) provides interfaces to Motion Charts, Annotated Time, Lines, Maps, Geo Maps, Geo Charts, Intensity Maps, Tables, Gauges, Tree Maps, further Line, Bar, Bubble, Column, Area, Stepped Area, Combo, Scatter, Candlestick, Pie, Sankey, Annotation, Histogram, Timeline, Calendar and Org Charts.
36.2 Example: Line chart
Let’s use GDP dataset from wbstats to have a look at how googleVis draws line chart.
Here’s the code for preparing dataset:
library(wbstats)
suppressMessages(library(googleVis))
op <- options(gvis.plot.tag='chart') # set googleVis plot option to display chart in RMarkdown
dat <- wb(indicator='NY.GDP.PCAP.KD', country=c('MX','CA','US','CH','IN','JP'), start=1980, end=2018)[c("country","value","date")]
gdp <- as.data.frame.matrix(xtabs(value ~ date + country, data=dat))
gdp <- cbind(rownames(gdp),gdp)
colnames(gdp)[1] <- "date"
head(gdp)## date Canada India Japan Mexico Switzerland United States
## 1980 1980 31839.23 422.9038 25854.58 8016.885 54891.43 28589.67
## 1981 1981 32542.60 438.0069 26744.56 8494.012 55466.16 29028.90
## 1982 1982 31132.46 442.7985 27443.61 8253.446 54420.97 28235.09
## 1983 1983 31628.16 464.1769 28217.50 7784.859 54534.43 29260.59
## 1984 1984 33182.41 470.9742 29301.37 7872.458 55973.70 31107.56
## 1985 1985 34438.33 484.6437 30646.88 7872.018 57774.34 32118.76Then use the gvisLineChart method to initialize the chart and then the plot() method to render it:
where xvar is name of the character column which contains the category labels for the x-axes and yvar is a vector of column names of the numerical variables to be plotted. GoogleVis allows users to pass list of configuration options by using a named list options. The parameters have to map those
of the Google documentation. Note that you need to use the R syntax and wrap configuration options into a character. For more details see the Google API documentation and the googleVis Reference Manual.
In the following code, we create a line chart with two axis:
Line <- gvisLineChart(gdp, xvar = "date", yvar = c("Mexico", "United States"),
options=list(
series="[{targetAxisIndex: 0},
{targetAxisIndex:1}]",
vAxes="[{title:'Mexico'}, {title:'United States'}]"
))
plot(Line)To smooth the lines, you can curve the Lines by setting the curveType option to "function":
Line <- gvisLineChart(gdp, xvar = "date", yvar = c("Mexico", "United States"),
options=list(
series="[{targetAxisIndex: 0},
{targetAxisIndex:1}]",
vAxes="[{title:'Mexico'}, {title:'United States'}]",
curveType='function'
))
plot(Line)Compared to ggplot2, googleVis provides more interactive features. For example, you can target a single element using Crosshairs:
Line <- gvisLineChart(gdp, xvar = "date", yvar = c("Mexico", "United States"),
options=list(
series="[{targetAxisIndex: 0},
{targetAxisIndex:1}]",
vAxes="[{title:'Mexico'}, {title:'United States'}]",
crosshair="{ trigger: 'both' }"
))
plot(Line)This method are available for other charts including scatter charts, line charts, area charts, and combo charts. If the lines are too intensive or you would like to find detailed information of a line, you should use explorer function. This option allows users to pan and zoom Google charts. Setting dragToZoom allows users to zoom in and out when scrolling and rightClickToReset is for returning it to the original pan and zoom level clicking on the chart. You can also try other options like dragToPan and explorer.maxZoomIn.
Line <- gvisLineChart(gdp,
options=list(
explorer="{actions: ['dragToZoom', 'rightClickToReset']}"
))
plot(Line)36.3 Example: Geo Chart
Geochart is far more interesting chart for showing GDP for different countries.
A geochart is a map of a country, a continent, or a region with areas identified in one of three ways:
- The region mode colors whole regions, such as countries, provinces, or states.
- The markers mode uses circles to designate regions that are scaled according to a value that you specify.
- The text mode labels the regions with identifiers (e.g., “Russia” or “Asia”).
In googleVis, creating geochart is simple. For regions mode format, you can call gvisGeoChart function and pass data containing region location and region color. Region location is a string of a country name (for example, “England”) or region code name (for example, “US”) or an area code. Region color is a numeric column used to assign a color to this region (for example, gdp value in our example). Note that markers mode format and text mode format have slightly different formats.
dat <- wb(indicator='NY.GDP.PCAP.KD', start=2018, end=2018)
Geo <- gvisGeoChart(dat, "iso2c", "value")
print(Geo)R version 3.6.1 (2017-01-27) • Google Terms of Use • Documentation and Data Policy
Like other chart, you can customize the colors of GeoCharts for background color, chart fill color, chart border color, etc. Please check correct format.
Geo <- gvisGeoChart(dat, "iso2c", "value",
options=list(
colorAxis="{colors:['yellow', 'orange', 'red', 'purple']}",
backgroundColor="lightblue")
)
print(Geo)R version 3.6.1 (2017-01-27) • Google Terms of Use • Documentation and Data Policy
One important feature of googleVis is ChartEditor Class which is used to open an in-page dialog box that enables a user to customize a visualization on the fly. In this method, you can customize color, region, chart type and so on directly. And this class works for most Google Charts.
Try click the “Edit me!” button in the following chart and see what happens.
36.4 Example: Sankey chart
GoogleVis can draw Sankey chart as well.
A sankey diagram is a visualization used to depict a flow from one set of values to another. The things being connected are called nodes and the connections are called links. Sankeys are best used when you want to show a many-to-many mapping between two domains (e.g., universities and majors) or multiple paths through a set of stages (for instance, Google Analytics uses sankeys to show how traffic flows from pages to other pages on your web site).
For A, b
# From Google Charts Guide
data <- data.frame(From=c(rep("A",3), rep("B", 3)),
To=c(rep(c("X", "Y", "Z"),2)),
Weight=c(5,7,6,2,9,4))
Sankey <- gvisSankey(data, from="From", to="To", weight="Weight")
plot(Sankey)You can also create a Sankey chart with multiple levels of connections.
# From googleVis Examples on CRAN
data <- data.frame(From=c(rep("A",3), rep("B", 3), rep("X",2), "Y", rep("Z",3), "W"),
To=c(rep(c("X", "Y", "Z"),2), c("M", "N"), "M", c("M", "N", "W"), "M"),
Weight=c(5,7,6,2,9,4,2,3,10,2,8,3,4))
Sankey <- gvisSankey(data, from="From", to="To", weight="Weight")
plot(Sankey)You can set custom colors for nodes and links using sankey.node and sankey.node. Both nodes and links can be given custom color palettes using their colors options. You can also set a coloring mode for the links between nodes using the colorMode option.
# From googleVis Examples on CRAN
data <- data.frame(From=c(rep("A",3), rep("B", 3), rep("X",2), "Y", rep("Z",3), "W"),
To=c(rep(c("X", "Y", "Z"),2), c("M", "N"), "M", c("M", "N", "W"), "M"),
Weight=c(5,7,6,2,9,4,2,3,10,2,8,3,4))
Sankey <- gvisSankey(data, from="From", to="To", weight="Weight",
options=list(
sankey="{link: {color: { fill: '#d799ae' } },
node: {color: { fill: '#a61d4c' },
label: { color: '#871b47'} }}"))
plot(Sankey)There are more interesting charts designed to address your data visualization needs we do not cover in this tutorial. Please see Chart Gallery if you like.
36.5 googleVis in RStudio
Writing googleVis in RStudio is easy. Normally after runing plot command it will open a standalone browser window and render charts in the web page. Besides, RStudio also supports viewing local web content in Viewer pane. You can also use command
plot(object, browser=rstudioapi::viewer)instead of plot(object) to view googleVis charts in Viewer window of Rstudio.
To Knit the markdown file to HTML, you should print the chart element only
and set the chunk option results to ’asis’ with {r results='asis'}.