1. AN EXAMPLE GRAPH VISUALIZATION
WITH PROCESSING.JS
Max De Marzi
FOSDEM 2012

2. ABOUT ME
Built the Neography Gem
Ruby Rest bindings for Neo4j
 My Blog: http://maxdemarzi.com
 Find me on Twitter: @maxdemarzi
 Email me: maxdemarzi@gmail.com
 GitHub: http://github.com/maxdemarzi
 Slides: http://www.slideshare.net/maxdemarzi

3. WHAT INFORMATION DID I WANT TO
VISUALIZE?
getvouched.com

4. 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?v
iew=pl

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

6. PROCESSING ON CANVAS

7. HELLO WORLD IN PROCESSING

9. PROCESSING IS MOUSE-AWARE

14. IF YOU KEEP GOING…

15. … AND ADD LINKS BETWEEN NODES

16. INCLUDE A SIDE PANEL + SEARCH

17. NODE + RELATIONSHIPS IN JSON

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

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

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

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

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

23. SEE MORE VISUALIZATIONS ON MY BLOG
maxdemarzi.com
Thank you!