Education

Editors: Gitta Domik

and Scott Owen

Introducing Google Chart Tools and Google

Maps API in Data Visualization Courses
Ying Zhu
Georgia State University

D ata visualization courses are usually

taught under the titles Information Visu-
alization, Data Visualization, Visual Ana-
lytics, or simply Visualization. Such courses aim
primarily to teach the theories and help students
from data sources and embed them in webpages.
Like most Google tools, it’s free. Because Google
Charts are based on pure HTML5 and scalable-
vector-graphics technology, the charts can be dis-
played on various browsers and platforms, with
learn about tools for constructing data visualiza- no plug-ins required. Google Chart Tools support
tions. Unlike computer graphics courses, in which many chart types. There are 12 basic types: pie
OpenGL and DirectX are the main development charts, scatter charts, gauge charts, geocharts,
tools, data visualization courses involve a vari- tables, treemaps, combo charts, line charts, bar
ety of choices. I conducted a brief survey of more charts, column charts, area charts, and candle-
than 20 data visualization courses taught in North stick charts. Google and the Google Chart API
American universities over the past few years and user community have contributed other types,
found that the instructors and students adopt such as annotated timelines.
many different tools. Table 1 offers a partial list. Users can create interactive charts. For example,
This situation is both a blessing and challenge. when a user clicks on a visual entity, the chart
Instructors will want to use tools that are stable, can display more details about that entity. Google
up-to-date, cross-platform, flexible, and versatile. Chart Tools also provide interface widgets (called
Students will want to use tools that are relatively controls) such as category pickers, range sliders,
easy to learn, well documented, and marketable in or autocompleters. Users can combine charts and
the near future. In these regards, the existing tools controls to create visualization dashboards.
have shortcomings. For example, students can Google Charts are exposed as JavaScript classes.
only get temporary licenses for commercial tools Because most students are familiar with JavaScript,
such as Tableau, Spotfire, Matlab, and Mathemat- it’s relatively easy to learn. For students who pre-
ica. In most cases, they can’t continue to use these fer Java, Google Charts have been integrated into
tools after the class ends. Free or open source tools the Google Web Toolkit (https://developers.google.
often lack documentation, tutorials, or samples. com/web-toolkit).
Besides, these tools lack brand-name recognition Internally, Google Charts store their data in a
and have only a niche market. So, students are less data table. Users can create multiple data views
motivated to invest much time in learning them. to filter the table. This provides much flexibility.
I propose using Google Chart Tools (https:// Each chart can be based on a different data view,
developers.google.com/chart) and Google Maps API which is a reference to an existing data table. The
(https://developers.google.com/maps) in data visu- client-side data table can be connected, via a Web
alization courses. These choices have many benefits service, to a server-side database, such as Google
but haven’t been widely used in such courses. Here, Spreadsheets or Google Fusion Tables (www.google.
I report on my teaching experience with these tool- com/fusiontables/Home). As long as the database
kits, student feedback, and lessons learned. supports the Google Chart Tools Datasource pro-
tocol, the client-side program can send a SQL
Google Chart Tools query to the database. The database will return a
With Google Chart Tools, users can create charts data table filled with the appropriate information.

6 November/December 2012 Published by the IEEE Computer Society 0272-1716/12/$31.00 © 2012 IEEE
 Table 1. A sampling of visualization tools used in data visualization courses.
Tool Description URL
D3.js JavaScript library http://d3js.org
Flare ActionScript library http://flare.prefuse.org
Google Public Data Explorer Online data analysis and visualization program www.google.com/publicdata
InfoVis Toolkit Java library http://ivtk.sourceforge.net
Mathematica Commercial computation and visualization system www.wolfram.com/mathematica
Matlab Commercial numerical-computing environment www.mathworks.com/products/matlab
Many Eyes1 IBM research project www-958.ibm.com/software/data/cognos/manyeyes
NodeXL Excel template http://nodexl.codeplex.com
OpenGL 2 C library for computer graphics programming www.opengl.org
Piccolo2D3 Java and .NET library www.piccolo2d.org
4
Prefuse Java library http://prefuse.org
Processing5 Programming language http://processing.org
Protovis JavaScript library http://mbostock.github.com/protovis
R Statistical-computing software www.r-project.org
Spotfire Commercial tool for business data analysis http://spotfire.tibco.com
Tableau6 Commercial tool for business data analysis www.tableausoftware.com
XmdvTool7 Tool for multivariate data visualization http://davis.wpi.edu/xmdv

So, students can quickly create a cloud-based data to the curriculum. Google Maps API is a set of
visualization. JavaScript classes that let users customize and em-
Google Chart Tools are well documented, and bed Google Maps in their webpages. For example,
there are plenty of tutorials and examples online. users can place markers on Google Maps to visual-
Google maintains an active user forum for ques- ize data points associated with geolocations. Users
tions and answers. Because Google Charts are pro- can also create customized directions.
grammed with JavaScript and embedded in HTML Users can make spatial queries when combining
files, students can easily access the source code of Google Maps API with Google Fusion Tables. That
Google Charts they find on the Web. In contrast, is, through Google Maps API, users can submit a
finding the source code of data visualizations cre- geolocation and radius to a Fusion Table. The table
ated with other tools is often difficult. will then return all the data points in that region,
One benefit of using Google Chart Tools is their which can be displayed on the map. In my experi-
instant brand-name recognition. In my experience, ence, students are particularly excited about the
students are eager to learn these tools because they spatial-query feature and are highly motivated to
see them as cool, cutting-edge technology. Only implement it in their applications.
one student was reluctant to use them, because he Google Maps API is also well documented, with
was skeptical of Google’s privacy protection. plenty of tutorials and samples online for students
However, Google Chart Tools support only 2D to study. There’s also an active user forum for
charts and don’t support drawing graphs. They’re questions and answers.
good for customizing the chart types they already Google Maps API is a free service but has some
support but aren’t suitable for creating new types technical restrictions. For example, a quota exists
of charts. So, they’re more suitable for information on the number of queries a user can submit to
visualization courses than for scientific visualiza- Google Maps services per day and per second. Users
tion courses. In addition, Google often replaces can raise the quota with paid subscriptions, but the
tools with new ones. For example, the company vast majority of users rarely reach the default quota.
renamed the original Google Charts as Google Im-
age Charts and then deprecated them after a few Course Design
years. Instructors should expect frequent changes I taught a Data Visualization course in fall 2011.
from Google. It was a senior-level elective course with 20 un-
dergraduates. Among them, 18 students were
Google Maps API computer science majors, one was a mathematics
Google Chart Tools only support basic map charts. major, and the other one was a philosophy major
To address this problem, I added Google Maps API (with a computer science background). The course

IEEE Computer Graphics and Applications 7

Education

cessing. I also wrote sample programs for students

to study. Here, I focus on the projects.
In the first project, students used Tableau to
analyze two datasets and reported their findings
and experiences. The goal was to help them learn
visual-analysis techniques through commercial
data visualization tools. This was suitable for a
first project because it involved no programming.
In the second project, students created two
dashboards of interactive charts with Google
Chart Tools. The first data source was a Google
Spreadsheet containing time series data with 48
days of data and 21 variables. The data came from
Figure 1. A student used Google Chart Tools to create this dashboard the Journal of Statistics Education website.9 The sec-
visualization of a café’s sales data. ond data source was of the students’ own choos-
ing. Figure 1 shows a student’s visualization of the
first data source.
In the third project, students used Google Maps
API to create an interactive Google Map that visu-
alized more than 400,000 geocoded Wikipedia ar-
ticles, which were stored in a Google Fusion Table.
The students’ programs had to let users conduct
spatial queries and get directions to or from any
Wikipedia article’s location. Figure 2 shows a stu-
dent’s visualization.
In the fourth project, students used the Process-
ing programming language to draw an interactive
graph of the busiest international routes from
Hartsfield-Jackson Atlanta International Airport. I
introduced Processing here because Google Chart
Figure 2. A student used Google Maps API to create this visualization of Tools don’t support graphs. Figure 3 shows a stu-
geocoded Wikipedia articles. The circles are marker clusters. Users can dent’s graph.
conduct spatial queries on the map.
Outcome
focused on 2D data visualization and didn’t cover The students’ anonymous evaluations of the course
3D scientific visualization topics such as fluid vi- were positive. One student commented,
sualization and volume rendering.
The course had two basic components: theory and I was impressed with the variety and rele-
practice. The lectures alternated between the two. I vancy of the technologies we covered. Google
either wrote the course materials or obtained them Charts and Google Maps API [are] a great ad-
from the Web. No textbook was used. Students dition to my toolbox.
needed to complete four homework assignments
and four projects. The homework assignments Another student commented on the lasting effects
aimed to help them apply visualization theories in of what he or she learned:
analyzing real-world examples. The projects aimed
to give them hands-on experience in constructing The course material was well structured and
different types of data visualizations. encouraged my understanding and enjoy-
I had previously taught this course three times, ment of the topics presented. I feel as if I
using VTK (the Visualization Toolkit),8 Excel, Tab- learned concepts and material that I will
leau, Google Image Charts, Mathematica, and continue to use throughout my future en-
Matlab. This time, I decided to experiment with deavors. Overall my time spent in this course
Google Chart Tools, Google Maps API, and Pro- was an enriching and productive experience.
cessing. Of the 28 lectures, 15 discussed the tools.
Among them, four covered Google Chart Tools, six Compared to previous classes, the students
covered Google Maps API, and four covered Pro- seemed more excited about the tools and more en-

8 November/December 2012
thusiastic about the projects they created. So, they
were more engaged in the class. Some part-time
students told me that they planned to integrate
Google Chart Tools and Google Maps API into
their work projects. One student actually did it
during the course of the class, with positive feed-
back from his supervisor. I feel that the students’
increased interest was due largely to Google Chart
Tools and Google Maps API, because most of the
other course materials were similar to those in the
previous classes.

M y experience with using Google Chart Tools

and Google Maps API in data visualization
courses was very positive. Students could create a
Figure 3. A student used Processing to create this visualization of the
busiest routes from the Hartsfield-Jackson Atlanta International Airport.

variety of visualizations by combining these two System: A Specification,” ver. 4.3 (Core Profile),
toolkits. As I mentioned before, both are free, Khronos Group, 2012.
and students could continue to use them after 3. B.B. Bederson, J. Grosjean, and J. Meyer, “Toolkit
the course. Compared with other free tools, they Design for Interactive Structured Graphics,” IEEE
have better documentation and more active user Trans. Software Eng., vol. 30, no. 8, 2004, pp.
communities. 535–546.
More important, Google Chart Tools and Google 4. J. Heer et al., “Prefuse: A Toolkit for Interactive
Maps API can be easily connected to online data Information Visualization,” Proc. 2005 ACM Conf.
sources such as Google Spreadsheets and Google Human Factors in Computing Systems (CHI 05), ACM,
Fusion Tables, creating a powerful suite of tool- 2005, pp. 421–430.
kits for data analysis. This ability is a significant 5. B. Fry, Visualizing Data, O’Reilly, 2007.
strength of the Google tools but is lacking in 6. C. Stolte, D. Tang, and P. Hanrahan, “Polaris: A
other free visualization tools. For example, con- System for Query, Analysis, and Visualization of
necting Processing programs with online data Multidimensional Relational Databases,” IEEE Trans.
sources is more difficult than using the Google Visualization and Computer Graphics, vol. 8, no. 1,
tools. 2002, pp. 52–65.
Students seem more motivated to learn Google 7. M.O. Ward, “XmdvTool: Integrating Multiple Methods
tools than other data visualization tools. Part of for Visualizing Multivariate Data,” Proc. 1994 IEEE
the reason is Google products’ reputation. Another Conf. Visualization (Vis 94), IEEE, 1994, pp. 326–333.
reason is the abundance of documents, tutorials, 8. W. Schroeder, K. Martin, and B. Lorensen, The
and samples of Google Charts and Google Maps Visualization Toolkit, 4th ed., Kitware, 2006.
on the Web. 9. C.A. DePaolo and D.F. Robinson, “Café Data,” J. of
From a teaching perspective, Google Chart Tools’ Statistics Education, vol. 19, no. 1, 2011; www.amstat.
big drawback is the lack of support for drawing org/publications/jse/v19n1/depaolo.pdf.
graphs. Instructors can remedy this by introducing
Processing or the Java Universal Network/Graph Ying Zhu is an associate professor in Georgia State Univer-
Framework (JUNG; http://jung.sourceforge.net). sity’s Department of Computer Science and the director of
So, Google Chart Tools, Google Maps API, and the department’s Hypermedia and Visualization Lab. Con-
Processing (or JUNG) constitute a comprehensive tact him at yzhu@cs.gsu.edu.
set of toolkits for students to create interactive
data visualizations. Contact department editors Gitta Domik at domik@
uni-paderborn.de and Scott Owen at sowen@gsu.edu.

References
1. F. Viegas et al., “ManyEyes: A Site for Visualization
at Internet Scale,” IEEE Trans. Visualization and
Computer Graphics, vol. 13, no. 6, 2007, pp.
1121–1128. Selected CS articles and columns are also available
2. M. Segal and K. Akeley, “The OpenGL Graphics for free at http://ComputingNow.computer.org.

IEEE Computer Graphics and Applications 9