DZone
Java Zone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
  • Refcardz
  • Trend Reports
  • Webinars
  • Zones
  • |
    • Agile
    • AI
    • Big Data
    • Cloud
    • Database
    • DevOps
    • Integration
    • IoT
    • Java
    • Microservices
    • Open Source
    • Performance
    • Security
    • Web Dev
DZone > Java Zone > Graph Visualization and Neo4j – Part Three

Graph Visualization and Neo4j – Part Three

Max De Marzi user avatar by
Max De Marzi
·
Feb. 03, 12 · Java Zone · Interview
Like (0)
Save
Tweet
6.20K Views

Join the DZone community and get the full member experience.

Join For Free

like i promised in my previous post , i wanted to do a little something on d3.js .

we are going to take one of their example visualizations and visualize a follows graph.

to create our graph, we will take the names of 20 people: create nodes for them, add them to an index, and randomly link them together.

notice we are using the neography batch command to create the whole graph at once.

01	def create_graph
02	  neo = neography::rest.new
03	  graph_exists = neo.get_node_properties(1)
04	  return if graph_exists && graph_exists['name']
05	 
06	  names = %w[max agam lester musannif adel andrey ryan james bruce tim pinaki mark peter anne helene corey ben rob pramod prasanna]
07	 
08	  commands = names.map{ |n| [:create_node, {"name" => n}]}
09	  names.each_index do |x|
10	    commands << [:add_node_to_index, "nodes_index", "type", "user", "{#{x}}"]
11	    follows = names.size.times.map{|y| y}
12	    follows.delete_at(x)
13	    follows.sample(1 + rand(5)).each do |f|
14	      commands << [:create_relationship, "follows", "{#{x}}", "{#{f}}"]   
15	    end
16	  end
17	 
18	  batch_result = neo.batch *commands
19	end

we won’t be making the mistake of leaving the create_graph method publicly accessible again, so we’ll create a rake task for it.

1	require 'neography/tasks'
2	require './d3.rb'
3	 
4	namespace :neo4j do
5	  task :create do
6	    create_graph
7	  end
8	end

we will use cypher to create a follower matrix, which we will use to populate our d3 script.

1	def follower_matrix
2	  neo = neography::rest.new
3	  cypher_query =  " start a = node:nodes_index(type='user')"
4	  cypher_query << " match a-[:follows]->b"
5	  cypher_query << " return a.name, collect(b.name)"
6	  neo.execute_query(cypher_query)["data"]
7	end 

the collect function returns a string with an array inside it, so we have to some string wrangling to turn it into a proper array and then convert everything to json.

1	get '/follows' do
2	  follower_matrix.map{|fm| {"name" => fm[0], "follows" => fm[1][1..(fm[1].size - 2)].split(", ")} }.to_json
3	end

our d3 function is a small variation on the chord flare example in the d3 github repository:

01	var r1 = 960 / 2,
02	    r0 = r1 - 120;
03	 
04	var fill = d3.scale.category20c();
05	 
06	var chord = d3.layout.chord()
07	    .padding(.04)
08	    .sortsubgroups(d3.descending)
09	    .sortchords(d3.descending);
10	 
11	var arc = d3.svg.arc()
12	    .innerradius(r0)
13	    .outerradius(r0 + 20);
14	 
15	var svg = d3.select("body").append("svg")
16	    .attr("width", r1 * 2)
17	    .attr("height", r1 * 2)
18	  .append("g")
19	    .attr("transform", "translate(" + r1 + "," + r1 + ")");
20	 
21	d3.json("follows", function(follows) {
22	  var indexbyname = {},
23	      namebyindex = {},
24	      matrix = [],
25	      n = 0;
26	 
27	  function name(name) {
28	    return name
29	  }
30	 
31	  // compute a unique index for each name.
32	  follows.foreach(function(d) {
33	    d = name(d.name);
34	    if (!(d in indexbyname)) {
35	      namebyindex[n] = d;
36	      indexbyname[d] = n++;
37	    }
38	  });
39	 
40	  // construct a square matrix counting relationships.
41	  follows.foreach(function(d) {
42	    var source = indexbyname[name(d.name)],
43	        row = matrix[source];
44	    if (!row) {
45	     row = matrix[source] = [];
46	     for (var i = -1; ++i < n;) row[i] = 0;
47	    }
48	    d.follows.foreach(function(d) { row[indexbyname[name(d)]]++; });
49	  });
50	 
51	  chord.matrix(matrix);
52	 
53	  var g = svg.selectall("g.group")
54	      .data(chord.groups)
55	    .enter().append("g")
56	      .attr("class", "group");
57	 
58	  g.append("path")
59	      .style("fill", function(d) { return fill(d.index); })
60	      .style("stroke", function(d) { return fill(d.index); })
61	      .attr("d", arc);
62	 
63	  g.append("text")
64	      .each(function(d) { d.angle = (d.startangle + d.endangle) / 2; })
65	      .attr("dy", ".35em")
66	      .attr("text-anchor", function(d) { return d.angle > math.pi ? "end" : null; })
67	      .attr("transform", function(d) {
68	        return "rotate(" + (d.angle * 180 / math.pi - 90) + ")"
69	            + "translate(" + (r0 + 26) + ")"
70	            + (d.angle > math.pi ? "rotate(180)" : "");
71	      })
72	      .text(function(d) { return namebyindex[d.index]; });
73	 
74	  svg.selectall("path.chord")
75	      .data(chord.chords)
76	    .enter().append("path")
77	      .attr("class", "chord")
78	      .style("stroke", function(d) { return d3.rgb(fill(d.source.index)).darker(); })
79	      .style("fill", function(d) { return fill(d.source.index); })
80	      .attr("d", d3.svg.chord().radius(r0));
81	 
82	});

all of the code is available on github .
finally, we’ll put all this on heroku, like i’ve shown you before:


1	git clone git@github.com:maxdemarzi/d3_js_intro.git
2	cd d3_js_intro
3	bundle install
4	heroku create --stack cedar
5	heroku addons:add neo4j
6	git push heroku master
7	heroku run rake neo4j:create

pretty, isn't it?

source: http://maxdemarzi.com/2012/02/02/graph-visualization-and-neo4j-part-three/
Graph (Unix) Visualization (graphics) Neo4j

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • API Security Weekly: Issue 165
  • Which Backend Frameworks Are Impacting Web App Development Immensely?
  • What Emerging Technologies Make Data Centers More Energy Efficient?
  • How to Build Microservices With Node.js

Comments

Java Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • MVB Program
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends:

DZone.com is powered by 

AnswerHub logo