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 Visualization, Data Visualization, Visual Analytics, or simply Visualization. Such courses aim primarily to teach the theories and help students learn about tools for constructing data visualizations. Unlike computer graphics courses, in which OpenGL and DirectX are the main development tools, data visualization courses involve a variety of choices. I conducted a brief survey of more than 20 data visualization courses taught in North American universities over the past few years and found that the instructors and students adopt many different tools. Table 1 offers a partial list. This situation is both a blessing and challenge. Instructors will want to use tools that are stable, up-to-date, cross-platform, flexible, and versatile. Students will want to use tools that are relatively easy to learn, well documented, and marketable in the near future. In these regards, the existing tools have shortcomings. For example, students can only get temporary licenses for commercial tools such as Tableau, Spotfire, Matlab, and Mathematica. In most cases, they can’t continue to use these tools after the class ends. Free or open source tools often lack documentation, tutorials, or samples. Besides, these tools lack brand-name recognition and have only a niche market. So, students are less motivated to invest much time in learning them. I propose using Google Chart Tools (https:// developers.google.com/chart) and Google Maps API (https://developers.google.com/maps) in data visualization courses. These choices have many benefits but haven’t been widely used in such courses. Here, I report on my teaching experience with these toolkits, student feedback, and lessons learned.
Google Chart Tools With Google Chart Tools, users can create charts 6
November/December 2012
from data sources and embed them in webpages. Like most Google tools, it’s free. Because Google Charts are based on pure HTML5 and scalablevector-graphics technology, the charts can be displayed on various browsers and platforms, with no plug-ins required. Google Chart Tools support many chart types. There are 12 basic types: pie charts, scatter charts, gauge charts, geocharts, tables, treemaps, combo charts, line charts, bar charts, column charts, area charts, and candlestick charts. Google and the Google Chart API user community have contributed other types, such as annotated timelines. Users can create interactive charts. For example, when a user clicks on a visual entity, the chart can display more details about that entity. Google Chart Tools also provide interface widgets (called controls) such as category pickers, range sliders, or autocompleters. Users can combine charts and controls to create visualization dashboards. Google Charts are exposed as JavaScript classes. Because most students are familiar with JavaScript, it’s relatively easy to learn. For students who prefer Java, Google Charts have been integrated into the Google Web Toolkit (https://developers.google. com/web-toolkit). Internally, Google Charts store their data in a data table. Users can create multiple data views to filter the table. This provides much flexibility. Each chart can be based on a different data view, which is a reference to an existing data table. The client-side data table can be connected, via a Web service, to a server-side database, such as Google Spreadsheets or Google Fusion Tables (www.google. com/fusiontables/Home). As long as the database supports the Google Chart Tools Datasource protocol, the client-side program can send a SQL query to the database. The database will return a data table filled with the appropriate information.
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
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
Java library
http://prefuse.org
Processing5
Programming language
http://processing.org
Protovis
JavaScript library
http://mbostock.github.com/protovis
Prefuse
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 visualization. Google Chart Tools are well documented, and there are plenty of tutorials and examples online. Google maintains an active user forum for questions and answers. Because Google Charts are programmed with JavaScript and embedded in HTML files, students can easily access the source code of Google Charts they find on the Web. In contrast, finding the source code of data visualizations created with other tools is often difficult. One benefit of using Google Chart Tools is their instant brand-name recognition. In my experience, students are eager to learn these tools because they see them as cool, cutting-edge technology. Only one student was reluctant to use them, because he was skeptical of Google’s privacy protection. However, Google Chart Tools support only 2D charts and don’t support drawing graphs. They’re good for customizing the chart types they already support but aren’t suitable for creating new types of charts. So, they’re more suitable for information visualization courses than for scientific visualization courses. In addition, Google often replaces tools with new ones. For example, the company renamed the original Google Charts as Google Image Charts and then deprecated them after a few years. Instructors should expect frequent changes from Google.
Google Maps API Google Chart Tools only support basic map charts. To address this problem, I added Google Maps API
URL
to the curriculum. Google Maps API is a set of JavaScript classes that let users customize and embed Google Maps in their webpages. For example, users can place markers on Google Maps to visualize data points associated with geolocations. Users can also create customized directions. Users can make spatial queries when combining Google Maps API with Google Fusion Tables. That is, through Google Maps API, users can submit a geolocation and radius to a Fusion Table. The table will then return all the data points in that region, which can be displayed on the map. In my experience, students are particularly excited about the spatial-query feature and are highly motivated to implement it in their applications. Google Maps API is also well documented, with plenty of tutorials and samples online for students to study. There’s also an active user forum for questions and answers. Google Maps API is a free service but has some technical restrictions. For example, a quota exists on the number of queries a user can submit to Google Maps services per day and per second. Users can raise the quota with paid subscriptions, but the vast majority of users rarely reach the default quota.
Course Design I taught a Data Visualization course in fall 2011. It was a senior-level elective course with 20 undergraduates. Among them, 18 students were computer science majors, one was a mathematics major, and the other one was a philosophy major (with a computer science background). The course IEEE Computer Graphics and Applications
7
Education
Figure 1. A student used Google Chart Tools to create this dashboard visualization of a café’s sales data.
Figure 2. A student used Google Maps API to create this visualization of geocoded Wikipedia articles. The circles are marker clusters. Users can conduct spatial queries on the map.
focused on 2D data visualization and didn’t cover 3D scientific visualization topics such as fluid visualization and volume rendering. The course had two basic components: theory and practice. The lectures alternated between the two. I either wrote the course materials or obtained them from the Web. No textbook was used. Students needed to complete four homework assignments and four projects. The homework assignments aimed to help them apply visualization theories in analyzing real-world examples. The projects aimed to give them hands-on experience in constructing different types of data visualizations. I had previously taught this course three times, using VTK (the Visualization Toolkit),8 Excel, Tableau, Google Image Charts, Mathematica, and Matlab. This time, I decided to experiment with Google Chart Tools, Google Maps API, and Processing. Of the 28 lectures, 15 discussed the tools. Among them, four covered Google Chart Tools, six covered Google Maps API, and four covered Pro8
November/December 2012
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 the Journal of Statistics Education website.9 The second data source was of the students’ own choosing. 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 visualized more than 400,000 geocoded Wikipedia articles, 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 student’s visualization. In the fourth project, students used the Processing 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 Tools don’t support graphs. Figure 3 shows a student’s graph.
Outcome The students’ anonymous evaluations of the course were positive. One student commented, I was impressed with the variety and relevancy of the technologies we covered. Google Charts and Google Maps API [are] a great addition to my toolbox. Another student commented on the lasting effects of what he or she learned: The course material was well structured and encouraged my understanding and enjoyment of the topics presented. I feel as if I learned concepts and material that I will continue to use throughout my future endeavors. Overall my time spent in this course was an enriching and productive experience. Compared to previous classes, the students seemed more excited about the tools and more en-
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 feedback 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 variety of visualizations by combining these two toolkits. As I mentioned before, both are free, and students could continue to use them after the course. Compared with other free tools, they have better documentation and more active user communities. More important, Google Chart Tools and Google Maps API can be easily connected to online data sources such as Google Spreadsheets and Google Fusion Tables, creating a powerful suite of toolkits for data analysis. This ability is a significant strength of the Google tools but is lacking in other free visualization tools. For example, connecting Processing programs with online data sources is more difficult than using the Google tools. Students seem more motivated to learn Google tools than other data visualization tools. Part of the reason is Google products’ reputation. Another reason is the abundance of documents, tutorials, and samples of Google Charts and Google Maps on the Web. From a teaching perspective, Google Chart Tools’ big drawback is the lack of support for drawing graphs. Instructors can remedy this by introducing Processing or the Java Universal Network/Graph Framework (JUNG; http://jung.sourceforge.net). So, Google Chart Tools, Google Maps API, and Processing (or JUNG) constitute a comprehensive set of toolkits for students to create interactive data visualizations.
Figure 3. A student used Processing to create this visualization of the busiest routes from the Hartsfield-Jackson Atlanta International Airport. System: A Specification,” ver. 4.3 (Core Profile), Khronos Group, 2012. 3. B.B. Bederson, J. Grosjean, and J. Meyer, “Toolkit Design for Interactive Structured Graphics,” IEEE Trans. Software Eng., vol. 30, no. 8, 2004, pp. 535–546. 4. J. Heer et al., “Prefuse: A Toolkit for Interactive Information Visualization,” Proc. 2005 ACM Conf. Human Factors in Computing Systems (CHI 05), ACM, 2005, pp. 421–430. 5. B. Fry, Visualizing Data, O’Reilly, 2007. 6. C. Stolte, D. Tang, and P. Hanrahan, “Polaris: A System for Query, Analysis, and Visualization of Multidimensional Relational Databases,” IEEE Trans. Visualization and Computer Graphics, vol. 8, no. 1, 2002, pp. 52–65. 7. M.O. Ward, “XmdvTool: Integrating Multiple Methods for Visualizing Multivariate Data,” Proc. 1994 IEEE Conf. Visualization (Vis 94), IEEE, 1994, pp. 326–333. 8. W. Schroeder, K. Martin, and B. Lorensen, The Visualization Toolkit, 4th ed., Kitware, 2006. 9. C.A. DePaolo and D.F. Robinson, “Café Data,” J. of Statistics Education, vol. 19, no. 1, 2011; www.amstat. org/publications/jse/v19n1/depaolo.pdf. Ying Zhu is an associate professor in Georgia State University’s Department of Computer Science and the director of the department’s Hypermedia and Visualization Lab. Contact him at
[email protected]. Contact department editors Gitta Domik at domik@ uni-paderborn.de and Scott Owen at
[email protected].
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. 2. M. Segal and K. Akeley, “The OpenGL Graphics
Selected CS articles and columns are also available for free at http://ComputingNow.computer.org. IEEE Computer Graphics and Applications
9