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

Introducing Google Chart Tools and Google Maps API in data visualization courses.

This article reports the experience of using Google Chart Tools and Google Maps in a data visualization course at Georgia State University. These visu...
644KB Sizes 0 Downloads 3 Views