An example graph visualization with Processing.js

13,667 views

Published on

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

Published in: Technology, Education
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
13,667
On SlideShare
0
From Embeds
0
Number of Embeds
7,224
Actions
Shares
0
Downloads
29
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

An example graph visualization with Processing.js

  1. 1. An Example Graph Visualizationwith Processing.jsMax De Marzi
  2. 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. 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. 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. 5. What information did I want to visualize?  Click to edit Master text styles  Second level  Third level  Fourth level  Fifth level
  6. 6. Processing on Canvas  Click to edit Master text styles  Second level  Third level  Fourth level  Fifth level
  7. 7. Hello World in Processing  Click to edit Master text styles  Second level  Third level  Fourth level  Fifth level
  8. 8. Processing is Mouse-aware
  9. 9.  Click to edit Master text styles  Second level  Third level  Fourth level  Fifth level
  10. 10. If you keep going…  Click to edit Master text styles  Second level  Third level  Fourth level  Fifth level
  11. 11. … and add links between nodes  Click to edit Master text styles  Second level  Third level  Fourth level  Fifth level
  12. 12. Include a side panel + Search  Click to edit Master text styles  Second level  Third level  Fourth level  Fifth level
  13. 13. Node + Relationships in JSON  Click to edit Master text styles  Second level  Third level  Fourth level  Fifth level
  14. 14. 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
  15. 15. 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
  16. 16. 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
  17. 17. 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
  18. 18. 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.
  19. 19. See more Visualizations on my blog  Click to edit Master text styles  Second level  Third level  Fourth level  Fifth level maxdemarzi.com Thank you!

×