An Example Graph Visualization with Processing.jsMax De Marzi
About Me
My Blog: http://maxdemarzi.com Find me on Twitter: @maxdemarzi Email me: [email protected] GitHub: http://github.com/maxdemarzi Slides: http://www.slideshare.net/maxdemarzi
Built the Neography GemRuby Rest bindings for Neo4j
About Processing
Open source programming language and environment for creating images, animations, and interactions.
Java “Like” Made by Ben Fry and Casey Reas in 2001 Home page http://processing.org Checkout http://www.openprocessing.org for open
source examples YouTube Processing 101 playlist:
http://www.youtube.com/user/maxdemarzi/videos?view=pl
About Processing.js
Sister Project to Processing Ported by John Resig (known for jQuery) Written in JavaScript, uses HTML5 Canvas element
instead of Java Applets Home Page: http://processingjs.org Checkout http://sketchpad.cc for open source examples
What information did I want to visualize?
Click to edit Master text styles Second level
Third level Fourth level
Fifth level
Processing on Canvas
Click to edit Master text styles Second level
Third level Fourth level
Fifth level
Hello World in Processing
Click to edit Master text styles Second level
Third level Fourth level
Fifth level
Processing is Mouse-aware
Click to edit Master text styles Second level
Third level Fourth level
Fifth level
If you keep going…
Click to edit Master text styles Second level
Third level Fourth level
Fifth level
… and add links between nodes
Click to edit Master text styles Second level
Third level Fourth level
Fifth level
Include a side panel + Search
Click to edit Master text styles Second level
Third level Fourth level
Fifth level
Node + Relationships in JSON
Click to edit Master text styles Second level
Third level Fourth level
Fifth level
Use Case
Good for: A dozen or two donut segments (relationship types) A hundred or so donut slices (50 looks great) Node to node traversals
Not so good for: Supernodes (1000+ relationships) Whole graph navigation
How is it Built?
Resource Class: Calls fetchData via AJAX Contains Attributes and Values Fills Donut Segments Fills Donut Slices Make up Donut Contains loading animation Calls Donut.draw once loading done
More about Donut
Donut Array of Donut Segments Sets Selected Slice Calls Donut Segment.draw
Donut Segment Array of Donut Slices How much space should it take up Calls Slice.draw many times Has Tweens for expanding and contracting
Donut Slice Draws itself Checks to see if it is selected
Behind the Scenes
Graph Class Array of Nodes Array of Edges
Node Class Knows incoming and outgoing edges Delegates to Resource
Edge Class From node and To node Users co-ordinates of nodes to position itself
Things you can tweak
Color Palette Specific color for Relationships Types Color paths Add support for multiple paths Add properties Add actions Everything, it’s just Javascript.
See more Visualizations on my blog Click to edit Master text styles
Second level Third level
Fourth level Fifth level
maxdemarzi.com
Thank you!