Your SlideShare is downloading. ×
An example graph visualization with Processing.js
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

An example graph visualization with Processing.js

8,657
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 …

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
8,657
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
24
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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