2014 ISECON Proceedings - Workshop Presentation

Interactive Information Visualization with HTML5 and Web-GL

Musa J Jafar
West Texas A&M University

Kareem Dana
West Texas A&M University

Jeffry Stephen Babb
West Texas A&M University

Objectives and Target Audience
During the Process of providing sensible projects for students, we search for practical hands-on applications. In the Information Visualization Course where we used HTML-5 and Web-GL as our underlying software platform and for the final project, We wanted to Visualize the Sochi Winter Olympics and patterns of who were medal winners. Working with the students, we identified SVG-Based interactive world maps which could be rendered in Web-GL and HTML5. We also found databases of Olympic medals that dating back to the 1930's to include for comparison and contrast. The challenge was to repurpose the two data sets that were built with completely different purposes in mind. At the same time, we needed a geolocation data set that allows us to tie the the SVG-Based interactive map to the repurposed olympic medals data base.

In this work shop, we will use a hands-on approach to build an html-5 SVG-based webGL interactive application that displays, filters and queries different types of medals and display the results on a world-map. This teaches how simple spatial and visual query can be accomplished within the websites we build and builds on the perspective that visualization is a rich approach to understanding. Given that our speaker this year is Ben Shcniederman, renown for his leadership in the area of information visualization, we present that this topic is quite relevant for our attendees this year.

Active participants are expected to have the latest version of Google Chrome installed on their computer as well as a good text editor like notepad++, SublimeTex 2, or TextWrangler. Although we will spend 15 minutes explaining how we repurposed the data, this is not a data munging workshop. We will provide clean data sets that are ready to load. We will also provide basic javascript functions and CSS files for participants' use. We will then, as a group, write the Javascript code required to interactively build an interactive information visualization of data from the 2014 Winter Olympics in Sochi.

Recommended Citation: Jafar, M. J., Dana, K., Babb, J. S., (2014). Interactive Information Visualization with HTML5 and Web-GL . The Proceedings of the Information Systems Education Conference, v.31 n.3173, Baltimore, Maryland