This document summarizes a presentation about visualizing graph data using Processing.js. It introduces Processing.js as a JavaScript library for data visualization using HTML5 canvas. It then provides an overview of how to create a donut chart visualization for graphs, including building classes for nodes, edges, the donut and its segments. It concludes by suggesting ways to expand on the basic donut chart visualization.

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!