Animation and Data Visualization in JavaScript

1. Animation and Data Visualization in JavaScript by Kyle Scholz for The Ajax Experience October 24th, 2006

2. Overview Data Visualization and Animation • Data Visualization Examples • Popular Layout Algorithms • Why JavaScript? / Challenges • Developer’s Toolbox Tutorials • Modeling Static Data • Modeling Music Recommendations Animation and Data Visualization in JavaScript

3. In the Wild Data Visualization by Example

4. Animation and Data Visualization in JavaScript

5. Animation and Data Visualization in JavaScript

6. Animation and Data Visualization in JavaScript

7. Animation and Data Visualization in JavaScript

8. Animation and Data Visualization in JavaScript

9. Resource http://www.visualcomplexity.com/ Beautifully maintained catalog of “complex network” visualization.

10. Layout Generating Visualizations from Dynamic Data

11. Layout with Connected Graphs • Graphs are visually accessible Convey meaning by visually expressing relationships with connections, colors, and proximity. • Graphs are dynamic A single layout algorithm can service variable data sets. Animation and Data Visualization in JavaScript

12. Animation and Data Visualization in JavaScript

13. Tree Layouts The Good • Familiar metaphor – lot’s of data is structured in trees (hierarchies) • Low computational complexity The Bad • Organized using geometry – May result in a lot of overlap – Can balance. • Can’t Support Circuits Animation and Data Visualization in JavaScript

14. So … What’s a Circuit?? C A B E D Animation and Data Visualization in JavaScript

15. Animation and Data Visualization in JavaScript

16. Force Directed (or “Spring”) Layouts • Based on a physical model: How electrons organize in space. • Particles are the nodes in our graph. • Attractive (“Spring”) Forces are our edges. • Repulsive Forces exist between each node in the model. Animation and Data Visualization in JavaScript

17. Particles and Forces P3 P2 P1 Key: P Particle Spring Force Repulsive Force P4 Animation and Data Visualization in JavaScript

18. Why Force Directed Layouts? The Good • Produce graphs with or without circuits • Draw as few crossing edges as possible • Neat to look at and fun to use • Animated and interactive The Bad • High Computational Complexity: On2 Animation and Data Visualization in JavaScript

19. Why Animate? Problem • Rendering takes time. How do we know when we’re done? • Complete data set may not be immediately available. Solution • We show the user intermediate states so they can begin interacting sooner. Animation and Data Visualization in JavaScript

20. Why JavaScript?

21. Why use JavaScript? • Flash, Java, ActiveX alternatives require plug-ins – Slow load time / Limited audience. • HTML offers rich, familiar presentation elements. • A JavaScript-powered graph can interact with the rest of your JavaScript application. Animation and Data Visualization in JavaScript

22. Challenges We aren’t seriously going to do this in JavaScript are we?

23. Performance We’re breaking from tradition, asking JavaScript to do some pretty intense stuff. Can JavaScript handle this? “JavaScript was designed for simple little web pages…” --(paraphrasing) IEBlog Animation and Data Visualization in JavaScript

24. JavaScript is 100X slower than Java? • A frequently quoted statistic claims JavaScript is: • 5000X slower than C • 100X slower than Java • Is this true? • Maybe, buy we’re comparing apples and oranges (and bananas) – Really depends on operations compared. • But is it plausible? Absolutely. Animation and Data Visualization in JavaScript

25. Why is JavaScript Slow? • Symbol lookup JavaScript uses late binding – Any time we use a variable, we have to search through the scope chain to find it. • No types The meaning of an operator (like “+”) depends on whether arguments can be parsed as Strings or Numbers. • Closures, Garbage Collection, etc… Animation and Data Visualization in JavaScript

26. Optimizing JavaScript • Optimization is a huge topic, worthy of it’s own talk. • For now, remember: • Before you start chasing milliseconds, optimize your algorithms. • Cache frequently used variables. • Keep variables local. Never store frequently used variables in the global scope. Animation and Data Visualization in JavaScript

27. JavaScript Visualization Toolbox …HTML doesn’t have a <line> element

28. HTML and the DOM • Sure, we can animate HTML! • We’ll need to use images and hacky solutions to make shapes and lines. • We control element positions using style attributes. Animation and Data Visualization in JavaScript

29. SVG == Awesome • Draws lines and many shapes • Access through the DOM • var shape = document.createElementNS(…) • shape.setAttribute( “x” 100 ) • Prettier than HTML hacks • Need plug-in to view in IE • Partially implemented in Firefox and Opera • Available in Safari soon Animation and Data Visualization in JavaScript

30. Tutorial #1 Using Timers to Animate HTML

31. Simplest Animation Tutorial Ever var sprite = document.createElement('div'); sprite.style.position = "absolute"; sprite.style.left = '0px'; sprite.style.top = '0px'; sprite.innerHTML = "MOVE"; document.body.appendChild( sprite ); var dirX = 1; function pos() { sprite.style.left = parseInt( sprite.style.left ) + dirX + 'px'; if ( parseInt(sprite.style.left)<0 || parseInt(sprite.style.left)>300 ) { dirX *= -1; } setTimeout( pos, 1 ); } pos(); Animation and Data Visualization in JavaScript

32. Animation and Data Visualization in JavaScript

33. Tutorial #2 Animating XML Data with JSViz

34. What’s JSViz? • A JavaScript library for generating animated connected graphs. • Currently supports Tree and Force Directed layouts. • Provides extendable architecture that can support additional layouts. Animation and Data Visualization in JavaScript

35. What does JSViz do? • Implements a time-controlled model that dictates positions of nodes. • Implements a view that controls display of nodes and relationships. Animation and Data Visualization in JavaScript

36. So What are We Building? • A Force directed Graph that models the contents of an XML file. Animation and Data Visualization in JavaScript

37. XML Data <root mass="1" color="#dddddd"> <node mass="1" color="#90ee90"> <node mass="1" color="#aaaaaa"></node> <node mass="1" color="#aaaaaa"> <node mass="1" color="#ddd8e6"></node> <node mass="1" color="#add8e6"></node> <node mass="1" color="#add8e6 "></node> <node mass="1" color="#add8e6 "> <node mass="1" color="#ff8888"> <node mass="1" color="#ffaa44"></node> <node mass="1" color="#ffaa44"></node> (...continues) Animation and Data Visualization in JavaScript

38. Model of our Data Animation and Data Visualization in JavaScript

39. Using JSVizStep 1: Make data accessible Create a Loader to process data into DataGraph Your Data Loader DataGraph Animation and Data Visualization in JavaScript

40. XMLLoader.js var XMLLoader = function( dataGraph ) { this.init( dataGraph ); } XMLLoader.prototype = { init: function( dataGraph ) { this.http = new HTTP(); this.dataGraph = dataGraph; }, load: function( url ) { this.http.get( url, this, this.handle ); } } Animation and Data Visualization in JavaScript

41. XMLLoader.js (2) handle: function( request ) { var xmlDoc = request.responseXML; var root = xmlDoc.getElementsByTagName("root")[0]; // add Root Node var rootNode = new DataGraphNode( true ); var mass = root.getAttribute("mass"); rootNode.mass = mass; var color = root.getAttribute("color"); rootNode.color = color; this.dataGraph.addNode( rootNode ); // add children this.branch( root, rootNode ); }, Animation and Data Visualization in JavaScript

42. XMLLoader.js (3) branch: function( root, rootNode ) { var childNodes = root.childNodes; for( var i=0, l=childNodes.length; i<l; i++ ){ if( childNodes[i].nodeName == "node" ) { var node = new DataGraphNode( false ); node.parent = rootNode; var mass = childNodes[i].getAttribute("mass"); node.mass = mass; var color = childNodes[i].getAttribute("color"); node.color = color; this.dataGraph.addNode( node ); this.branch( childNodes[i], node ); } } } Animation and Data Visualization in JavaScript

43. Using JSVizStep 2: Initialize Components View Particle Model Control DataGraph Animation and Data Visualization in JavaScript

44. Set up the HTML <html> <head> <script> function init() {} </script> <style type="text/css"> html { filter: expression( document.execCommand( "BackgroundImageCache", false, true)); } body { margin: 0; padding: 0; } </style> </head> <body onload="init()"> </body> </html> Animation and Data Visualization in JavaScript

45. Import Libraries <!-- JSViz Libraries --> <script language="JavaScript“ src="DataGraph.js"></script> <script language="JavaScript" src="Magnet.js"></script> <script language="JavaScript" src="Spring.js"></script> <script language="JavaScript" src="Particle.js"></script> <script language="JavaScript" src="ParticleModel.js"></script> <script language="JavaScript" src="Timer.js"></script> <script language="JavaScript" src="EventHandler.js"></script> <script language="JavaScript“ src="HTMLGraphView.js"></script> <script language="JavaScript" src="SVGGraphView.js"></script> <script language="JavaScript" src="RungeKuttaIntegrator.js"></script> <script language="JavaScript" src="Control.js"></script> <!-- Demo Libraries --> <script language="JavaScript" src="HTTP.js"></script> <script language="JavaScript" src="XMLLoader.js"></script> Animation and Data Visualization in JavaScript

46. Get the Dimensions of the Page var FRAME_WIDTH; var FRAME_HEIGHT; if (document.all) { FRAME_WIDTH = document.body.offsetWidth - 5; FRAME_HEIGHT = document.documentElement.offsetHeight - 5; } else { FRAME_WIDTH = window.innerWidth - 5; FRAME_HEIGHT = window.innerHeight - 5; } Animation and Data Visualization in JavaScript

47. Initialize Components var view; if ( document.implementation.hasFeature( "org.w3c.dom.svg", '1.1') ) { view = new SVGGraphView( 0, 0, FRAME_WIDTH, FRAME_HEIGHT ); } else { view = new HTMLGraphView( 0, 0, FRAME_WIDTH, FRAME_HEIGHT ); } var particleModel = new ParticleModel( view ); particleModel.start(); var control = new Control( particleModel, view ); var dataGraph = new DataGraph(); var nodeHandler = new NodeHandler( dataGraph, particleModel, view, control ); dataGraph.subscribe( nodeHandler ); Animation and Data Visualization in JavaScript

48. Initialize Components (2) Initialize our XMLLoader var xmlLoader = new XMLLoader( dataGraph ); xmlLoader.load( "nodes.xml" ); Also, we want to add particles to the model over time, enabling the model to organize under less entropy. var buildTimer = new Timer( 150 ); buildTimer.subscribe( nodeHandler ); buildTimer.start(); Animation and Data Visualization in JavaScript

49. Using JSVizStep 3: Interpret Data into Model & View Particle Model DataGraph Node Handler View Animation and Data Visualization in JavaScript

50. Interpreting the Data var NodeHandler = function( dataGraph, particleModel, view, control ) { this.dataGraph = dataGraph; this.particleModel = particleModel; this.view = view; this.control = control; this.queue = new Array(); this['newDataGraphNode'] = function( dataGraphNode ) { this.enqueueNode( dataGraphNode ); } this['newDataGraphEdge'] = function( nodeA, nodeB ) { // Empty. We learn everything we need from // newDataGraphNode() } } Animation and Data Visualization in JavaScript