an example graph visualization with processing.js

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

Upload: graphdevroom

Post on 15-May-2015

8.894 views

Category:

Technology


3 download

DESCRIPTION

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

TRANSCRIPT

Page 1: An example graph visualization with Processing.js

An Example Graph Visualization with Processing.jsMax De Marzi

Page 2: An example graph visualization with Processing.js

About Me

My Blog: http://maxdemarzi.com Find me on Twitter: @maxdemarzi Email me: [email protected] GitHub: http://github.com/maxdemarzi Slides: http://www.slideshare.net/maxdemarzi

Built the Neography GemRuby Rest bindings for Neo4j

Page 3: An example graph visualization with Processing.js

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

Page 4: An example graph visualization with Processing.js

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

Page 5: An example graph visualization with Processing.js

What information did I want to visualize?

Click to edit Master text styles Second level

Third level Fourth level

Fifth level

Page 6: An example graph visualization with Processing.js

Processing on Canvas

Click to edit Master text styles Second level

Third level Fourth level

Fifth level

Page 7: An example graph visualization with Processing.js

Hello World in Processing

Click to edit Master text styles Second level

Third level Fourth level

Fifth level

Page 8: An example graph visualization with Processing.js
Page 9: An example graph visualization with Processing.js

Processing is Mouse-aware

Page 10: An example graph visualization with Processing.js
Page 11: An example graph visualization with Processing.js
Page 12: An example graph visualization with Processing.js
Page 13: An example graph visualization with Processing.js

Click to edit Master text styles Second level

Third level Fourth level

Fifth level

Page 14: An example graph visualization with Processing.js

If you keep going…

Click to edit Master text styles Second level

Third level Fourth level

Fifth level

Page 15: An example graph visualization with Processing.js

… and add links between nodes

Click to edit Master text styles Second level

Third level Fourth level

Fifth level

Page 16: An example graph visualization with Processing.js

Include a side panel + Search

Click to edit Master text styles Second level

Third level Fourth level

Fifth level

Page 17: An example graph visualization with Processing.js

Node + Relationships in JSON

Click to edit Master text styles Second level

Third level Fourth level

Fifth level

Page 18: An example graph visualization with Processing.js

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

Page 19: An example graph visualization with Processing.js

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

Page 20: An example graph visualization with Processing.js

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

Page 21: An example graph visualization with Processing.js

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

Page 22: An example graph visualization with Processing.js

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.

Page 23: An example graph visualization with Processing.js

See more Visualizations on my blog Click to edit Master text styles

Second level Third level

Fourth level Fifth level

maxdemarzi.com

Thank you!