NoSQL Zone is brought to you in partnership with:

Max De Marzi, is a seasoned web developer. He started building websites in 1996 and has worked with Ruby on Rails since 2006. The web forced Max to wear many hats and master a wide range of technologies. He can be a system admin, database developer, graphic designer, back-end engineer and data scientist in the course of one afternoon. Max is a graph database enthusiast. He built the Neography Ruby Gem, a rest api wrapper to the Neo4j Graph Database. He is addicted to learning new things, loves a challenge and finding pragmatic solutions. Max is very easy to work with, focuses under pressure and has the patience of a rock. Max is a DZone MVB and is not an employee of DZone and has posted 60 posts at DZone. You can read more from them at their website. View Full User Profile

Graph Visualization and Neo4j – Part Two

02.02.2012
| 8212 views |
  • submit to reddit

If you’re into NoSQL and Graph Databases like Neo4j, then you’ll probably tend to be working on back-end development. If you’re lucky enough to work in a team of specialists, some UX guy will come up with user requirements, hand them off to a UI gal for design, who will then pass it on to a Javascript Ninja to slice it together and they’ll just ask you provide the data and stuff it in a JSON object.

If you’re not so lucky and are working on pet projects by yourself then you’ll have to do it all. So I wanted to give you a little nudge into learning a visualization framework. Since my most popular blog post so far has been Graph Visualization and Neo4j and we’ve already seen one example that you’ll probably want to customize in your projects, we’ll stick with processing.js, and in the future I can do a little intro on D3.js, Unveil.js and maybe something a little crazier like VVVV.js.

So getting started is really easy. We’ll create an html document, add the minified processing javascript library and create a canvas element to put our visualization.

01	<!DOCTYPE html>
02	<html>
03	    <head>
04	        <title>Hello World - Processing.js</title>
05	        <script src="processing-1.3.6.min.js"></script>
06	    </head>
07	    <body>
08	        <canvas data-src="helloworld.pjs"></canvas>
09	    </body>
10	</html>

All right, let’s create the helloworld.pjs we reference as our canvas data source.

1	void setup() {
2	  size(200, 200);
3	  ellipse(50, 50, 10, 10);
4	}

The size method is setting up a square 200 pixel by 200 pixel canvas, and we draw an ellipse. The first two values are the x and y coordinates for the center of our ellipse, the second two values are the x and y radius.

1	void setup() {
2	  size(200, 200);          // 0,0 starts at top left
3	  background(120,140,160); // individual RGB values
4	  stroke(0);               // apply 0 to all values
5	  ellipse(50, 50, 25, 25); // x, y cntr and x, y radius
6	}

Processing uses the standard Red Green Blue colors, so we’ll change that default gray background to a nice blue. Stroke is the pen outline of our drawings, and when passing just a single value, it sets all RGB values to it. In this case 3 zeros will give us black.

01	void setup() {
02	  size(200, 200);
03	  background(120,140,160);
04	  stroke(0);
05	  frameRate(30);
06	}
07	 
08	void draw() {
09	  ellipse(mouseX, mouseY, 25, 25);
10	}

Processing is mouse aware and automatically populates the mouseX and mouseY values for you. Processing calls draw() right after setup() which then continuously executes the lines of code contained inside its block. The frameRate method sets the number of times per second that draw will be called.

01	void setup() {
02	  size(200, 200);
03	  noStroke();
04	  frameRate(30);
05	 }
06	 
07	void draw() {
08	  background(120,140,160);
09	  ellipse(mouseX, height/2, mouseY/2+10, mouseY/2+10);
10	  ellipse(width-mouseX,
11	          height/2,
12	          ((height-mouseY)/2)+10,
13	          ((height-mouseY)/2)+10);
14	}

You can get rid of the outline with noStroke and get creative with your mouse coordinates and use them to control the size as well as position of your objects.

1	void setup() {
2	  size(200, 200);
3	  noStroke();
4	  background(120,140,160);
5	  ellipse(width/2, height/2, 50, 50);
6	  fill(50,50,180);
7	  arc(width/2, height/2, 50, 50, 0, PI/4);
8	 }

The arc method takes x and y coordinates, a height and width like ellipse, but also a start and end point in radians or degrees.

01	void setup() {
02	  size(200, 200);
03	  noStroke();
04	  background(120,140,160);
05	  float arc_start;
06	  float arc_end;
07	  for(int i=0; i < 8; i = i + 1) {
08	    fill(i * 20, 120 + ((4-i) * 20),250 - (i * 20));
09	    arc_start = radians(i * 45);
10	    arc_end = radians((i + 1) * 45);
11	    arc(width/2, height/2,
12	        100, 100,
13	        arc_start, arc_end);
14	  }
15	  fill(255);
16	  ellipse(width/2, height/2, 50, 50);
17	 }



The fill method colors our objects and we can use a for loop to create multiple arcs as well as rotate their angles. We add a white ellipse at the end and now we’re starting to resemble something we’ve seen before.

You can see the live versions of these canvases on Heroku and download all the code from https://github.com/maxdemarzi/processing_js_intro.

That was really just a small taste of processing.js. You can read Pomax’s guide to Processing.js to get a more complete introduction, watch a Processing 101 video series or get another quick intro to processing.js on this video:

 

 Source: http://maxdemarzi.com/2012/02/02/graph-visualization-and-neo4j-part-two/

 

 

Published at DZone with permission of Max De Marzi, author and DZone MVB.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)