Evaluation of HTML5 Graphics for Data Structure Visualization
Gevik SarkissianMaster’s Thesis
California State University, NorthridgeMay 9, 2014
Abstract
Graphics have become a major part of the digital world, including the web. The latest era of the web is HTML5 and it provides many new features for web developers and users. Some of theses features are new ways to render, interact with, and animate graphics inside a web browser – CSS3, Canvas, SVG, and WebGL. This paper is a study on these graphics technologies, and the ability to use them to visualize data structures in a browser as an alternative to using plugins like Flash. The four technologies were compared in an effort to understand each one, and from this comparison a determination was made on which is the best choice for visualizing data structures. The technology of choice was used to build a tool that allows for native web-based data structure visualization. The criteria for success of the tool are its usability, performance, and feature set. The tool successfully demonstrates that the modern web’s native graphics technologies are a viable alternative to traditional Flash-based data structure visualization tools.
Outline
Rationale
Background
Research
Decision
Implementation
Demonstration
Findings
Rationale
As HTML5 has matured and the web standards have changed, the need for using external plugins in a browser like Flash, Java, Silverlight and QuickTime has declined.
Data structures and algorithms are essential concepts for computer science students and learning about them visually is the most effective way.
Existing tools to visualize data structures are dominantly Flash-based or Java-based and could greatly be improved.
Many native desktop applications are moving into the web and/or mobile apps.
The Web
Web 1.0 – The Brochure Web
Web 2.0 – User-generated content
Web 2.5 – Web applications and video streaming
HTTP has not changed as much as the front end of the web has.
Internet Traffic Distribution
HTML5
Is the latest iteration of the front end of the web.
Provides new features for developers and users – video and audio streaming, semantic tags, geolocation, local storage as an alternative to cookies, and form enhancements.
Also introduces new graphics technologies like Canvas and WebGL while improving existing ones like SVG and CSS.
Graphics
Two main graphics types: raster (JPG, BMP, GIF, PNG) and vector (SVG, EPS).
Raster graphics are a matrix of pixels with color and alpha values and lose quality when enlarged.
Vector graphics contain instructions on how the graphic should render and can resize without losing quality.
Raster graphics are ideal for real images while vector graphics are ideal for logos and simple graphics.
Research
The four graphics technologies that were considered are SVG, Canvas, CSS3, and WebGL.
Comparisons were made in the areas of performance, support, and ease of development.
One of these four was chosen to implement the binary search tree visualization tool.
Canvas
Canvas is a HTML5 element that provides a JavaScript API for developers to render and animate graphics.
The <canvas> element is rendered to the page but its context property is used to render graphics onto it.
Currently supports two contexts: “2d” and “webgl”.
Often used by Google Doodles or for web games.
Canvas Example
SVG
Scalable Vector Graphics is a popular vector graphic format for use on the web and in apps.
Each SVG is represented by XML and is converted to a DOM element when the browser parses it.
While SVG existed pre-HTML5, HTML5 allows for better integration of SVGs with a browser.
When the browser parses an SVG, it turns it into a Document Object Model (DOM) element in the page.
SVG Example
Raster vs. Vector
Raster vs. Vector
Raster vs. Vector
Raster vs. Vector
CSS3
CSS3 expands on the capabilities of CSS2 by providing new ways to style and animate HTML elements.
Using CSS3 we can render basic shapes using properties like border-radius, border-style, width, and height.
CSS3 also provides transforms to allow for advanced rendering and animation of HTML elements, such as skewing, rotating, and translating.
WebGL
WebGL is a hardware-accelerated 3-dimensional graphics technology.
Can be thought of as OpenGL in a browser.
Not a good candidate for the relatively simple task of visualizing data structures, but is worth mentioning.
Browser Support
Performance (Render Time)
Performance (Memory Usage)
Decision
While Canvas does perform better than SVGs at higher sprite counts, this sprite count will not be reached in a data structure visualization tool.
Since SVGs are DOM elements, implementing drag and drop functionality in the tool will be easier than with Canvas.
Nodes in a binary search tree require references to other nodes, lines, and properties like position, color, and dimensions. This is easier to associate to SVGs than pixels.
Existing Tools
http://www.cs.jhu.edu/~goodrich/dsa/trees/btree.html
http://www.qmatica.com/DataStructures/Trees/BST.html
http://www.ibr.cs.tu-bs.de/courses/ss98/audii/applets/BST/BST-Example.html
http://www.cosc.canterbury.ac.nz/mukundan/dsal/TwoThreeTree.html
http://www.cs.usfca.edu/~galles/visualization/Algorithms.html
Architecture
Libraries Used
Name Version License Source
jQuery 2.1 MIT http://jquery.com/
Buckets 2 Apache https://github.com/mauriciosantos/buckets
Raphael 2.1 MIT http://raphaeljs.com/
HTML5 Shiv 3.7 MIT/GPLv2 https://code.google.com/p/html5shiv/
jQuery SVG 1.4.5 MIT http://keith-wood.name/svg.html
Underscore 1.6 MIT http://underscorejs.org/
SCSS (PHP) 0.0.9 MIT/GPLv3 http://leafo.net/scssphp/
CSS Reset 2 Public Domain http://meyerweb.com/eric/tools/css/reset/
Demonstration
Advantages
When compared to existing Java/Flash based tools, this tool is superior for a number of reasons.
The tool runs on any modern web browser and does not have dependencies on operating system, Java version, and does not prompt security warnings.
The tool is highly interactive and is more intuitive than existing tools.
This is also an improvement over Dr. David Galles’ excellent tool because it features drag and drop, file upload, and pruning.
Future work
UI improvements can be made regarding the repositioning of nodes to eliminate overlaps.
The tool does not react well to a resized browser since it depends on initial conditions to position nodes correctly.
More data structures and algorithms to choose from.
Ability to save tree to a text file.
Results
Canvas performs better than SVG at high sprite counts.
SVGs are easier to work with in terms of interactivity.
There is no reason to use Java or Flash to visualize data structures.
There is now a user-friendly, effective tool available for students wanting to learn the operations of a binary search tree.
Top Related