Visualizing a directed property graph with Processing.js and Neo4j. A short introduction to Processing.js, followed by a high level overview of an example visualization and finally how to connect it to Neo4j via their REST API to populate it. Example: http://getvouched.com/visualizations

1. An Example Graph Visualization
with Processing.js
Max De Marzi

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

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

5. What information did I want to visualize?
 Click to edit Master text styles
 Second level
 Third level
 Fourth level
 Fifth level

6. Processing on Canvas
 Click to edit Master text styles
 Second level
 Third level
 Fourth level
 Fifth level

7. Hello World in Processing
 Click to edit Master text styles
 Second level
 Third level
 Fourth level
 Fifth level

9. Processing is Mouse-aware

13.  Click to edit Master text styles
 Second level
 Third level
 Fourth level
 Fifth level

14. If you keep going…
 Click to edit Master text styles
 Second level
 Third level
 Fourth level
 Fifth level

15. … and add links between nodes
 Click to edit Master text styles
 Second level
 Third level
 Fourth level
 Fifth level

16. Include a side panel + Search
 Click to edit Master text styles
 Second level
 Third level
 Fourth level
 Fifth level

17. Node + Relationships in JSON
 Click to edit Master text styles
 Second level
 Third level
 Fourth level
 Fifth level

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
 Click to edit Master text styles
 Second level
 Third level
 Fourth level
 Fifth level
maxdemarzi.com
Thank you!