Transcript of "An example graph visualization with processing"
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: @maxdemarzi Email me: firstname.lastname@example.org GitHub: http://github.com/maxdemarzi Slides: http://www.slideshare.net/maxdemarzi
WHAT INFORMATION DID I WANT TOVISUALIZE? getvouched.com
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
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
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
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
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
SEE MORE VISUALIZATIONS ON MY BLOGmaxdemarzi.comThank you!
A particular slide catching your eye?
Clipping is a handy way to collect important slides you want to go back to later.