AN EXAMPLE GRAPH VISUALIZATIONWITH PROCESSING.JSMax De MarziFOSDEM 2012
ABOUT ME    Built the Neography Gem    Ruby Rest bindings for Neo4j My Blog: http://maxdemarzi.com Find me on Twitter: @...
WHAT INFORMATION DID I WANT TOVISUALIZE?                 getvouched.com
ABOUT PROCESSING Open source programming language and  environment for creating images, animations, and  interactions. J...
ABOUT PROCESSING.JS Sister Project to Processing Ported by John Resig (known for jQuery) Written in JavaScript, uses HT...
PROCESSING ON CANVAS
HELLO WORLD IN PROCESSING
PROCESSING IS MOUSE-AWARE
IF YOU KEEP GOING…
… AND ADD LINKS BETWEEN NODES
INCLUDE A SIDE PANEL + SEARCH
NODE + RELATIONSHIPS IN JSON
USE CASE   Good for:     A dozen or two donut segments (relationship types)     A hundred or so donut slices (50 looks ...
HOW IS IT BUILT?   Resource Class:       Calls fetchData via AJAX       Contains Attributes and Values       Fills Don...
MORE ABOUT DONUT   Donut     Array of Donut Segments     Sets Selected Slice     Calls Donut Segment.draw   Donut Seg...
BEHIND THE SCENES   Graph Class     Array of Nodes     Array of Edges   Node Class     Knows incoming and outgoing ed...
THINGS YOU CAN TWEAK Color Palette Specific color for Relationships Types Color paths Add support for multiple paths ...
SEE MORE VISUALIZATIONS ON MY BLOGmaxdemarzi.comThank you!
An example graph visualization with processing
An example graph visualization with processing
An example graph visualization with processing
An example graph visualization with processing
An example graph visualization with processing
Upcoming SlideShare
Loading in...5
×

An example graph visualization with processing

23,553

Published on

Published in: Technology, Education

Transcript of "An example graph visualization with processing"

  1. 1. AN EXAMPLE GRAPH VISUALIZATIONWITH PROCESSING.JSMax De MarziFOSDEM 2012
  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. WHAT INFORMATION DID I WANT TOVISUALIZE? getvouched.com
  4. 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. 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. 6. PROCESSING ON CANVAS
  7. 7. HELLO WORLD IN PROCESSING
  8. 8. PROCESSING IS MOUSE-AWARE
  9. 9. IF YOU KEEP GOING…
  10. 10. … AND ADD LINKS BETWEEN NODES
  11. 11. INCLUDE A SIDE PANEL + SEARCH
  12. 12. NODE + RELATIONSHIPS IN JSON
  13. 13. 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
  14. 14. 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
  15. 15. 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
  16. 16. 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
  17. 17. 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.
  18. 18. SEE MORE VISUALIZATIONS ON MY BLOGmaxdemarzi.comThank you!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×