an example graph visualization with processing

AN EXAMPLE GRAPH VISUALIZATION WITH PROCESSING.JSMax De Marzi

FOSDEM 2012

ABOUT ME

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

Built the Neography GemRuby Rest bindings for Neo4j

WHAT INFORMATION DID I WANT TO VISUALIZE?

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?view=pl

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

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

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.

SEE MORE VISUALIZATIONS ON MY BLOG

maxdemarzi.com

Thank you!