1. Evaluation of HTML5 Graphics for Data Structure Visualization
Gevik Sarkissian
Master’s Thesis
California State University, Northridge
May 9, 2014

2. 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.
The goals of this project were to explore the modern graphics technologies of the web and to use one of them to build a binary search tree visualization tool that demonstrates that Flash and Java are unnecessary for such tools.

3. Outline Rationale Background Research Decision Implementation
Demonstration
Findings

4. 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.
Office 365 and Adobe Creative Cloud
Mention support of HTML5
Java applets are dead, java on the server is very much alive

5. 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.
Netflix and Youtube account for 50% of internet traffic. But this is bytes, not hits
Flash was dying until Youtube revived it
Then iPhone started killing it again
Web 3.0

6. Internet Traffic Distribution
This says in 2010 video is 51%. Now Netflix and Youtube account for 50% of internet traffic and total video is even higher.
Clarify that this is raw data 1’s and 0’s, not users. Naturally, video is a lot more data than the rest. But the trend still stands

7. 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.
Netflix and Youtube account for 50% of internet traffic. But this is bytes, not hits
Flash was dying until Youtube revived it
Then iPhone started killing it again
Explain Flash security holes:
Flash, Java, Acrobat

8. 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.

9. 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.

10. 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.

11. Canvas Example
context.arc(x, y, radius, start angle, end angle, anticlockwise)

12. 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.
<object> tags

13. SVG Example
Can group multiple svg graphics into a single SVG element

14. Raster vs. Vector
Show how to turn a <div> into a circle on the white board

15. Raster vs. Vector
Show how to turn a <div> into a circle on the white board

16. Raster vs. Vector
Show how to turn a <div> into a circle on the white board

17. Raster vs. Vector
Show how to turn a <div> into a circle on the white board

18. 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.
White board

19. 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.

20. Browser Support
At this point I removed CSS3 and WebGL from the list as contenders.
No reason to use CSS3 instead of SVG, and WebGL is too much.

21. Performance (Render Time)

22. Performance (Memory Usage)

23. 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.
I went with SVGs for a few reasons

24. Existing Tools http://www.cs.jhu.edu/~goodrich/dsa/trees/btree.html
bs.de/courses/ss98/audii/applets/BST/BST-Example.html
hreeTree.html
.html
Had to enable Java on the page, after decreasing security settings in Java control panel
There is no reason to use Java on the front end. If a plugin is required, use Flash. But above all, it should all be done using native web technologies
Limitations:
require specific plugins
can’t resize
can’t create an exact tree
can’t save/load tree.
Galles you can’t construct a particular tree without knowing the insertion order
My requirements: intuitive, cross-browser compatible, drag and drop, file upload

25. Architecture

26. Libraries Used Name Version License Source jQuery 2.1 MIT
Buckets 2
Apache
Raphael
HTML5 Shiv
3.7
MIT/GPLv2
jQuery SVG
1.4.5
Underscore
1.6
SCSS (PHP)
0.0.9
MIT/GPLv3
CSS Reset
Public Domain

27. Demonstration

28. 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.
Had to enable Java on the page, after decreasing security settings in Java control panel
There is no reason to use Java on the front end. If a plugin is required, use Flash. But above all, it should all be done using native web technologies

29. 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.
There is room for improvement in any program
Not quite a prototype but not quite a full-featured tool

30. 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.