Data Visualizations with Neo4J

Empowering your users with Data Visualization

In recent years NoSql databases have gotten a lot of traction. In this post we'll be looking at ways to give your users a visualization of graph data. In particular we'll be giving a Javascript visualization of graph data from Neo4j.

Prepping Our Instance with User Data.

In this tutorial we are going to clone a github repo that contains the Javascript to visualize our Neo4j data.To this end it would be nice for our Ec2 instance to spin up with a web server already installed. An Ec2 construct called user data allows you to do just that. To take advantage of this concept launch your Ec2 instance as normal but on the Configure Instance tab click on the Advanced Details tab on the bottom to expand the hidden User Data options. Here is what it looks like

The standard online AWS documentation shows us how to install a basic Apache sever as the instances is created. Indeed, in the user data text area just enter the following script.

\#!/bin/bash
yum update -y  
yum install -y httpd24 php56 mysql55-server php56-mysqlnd  
service httpd start  
chkconfig httpd on  
groupadd www  
usermod -a -G www ec2-user  
chown -R root:www /var/www  
chmod 2775 /var/www  
find /var/www -type d -exec chmod 2775 {} +  
find /var/www -type f -exec chmod 0664 {} +  
echo "<?php phpinfo(); ?>" > /var/www/html/phpinfo.php  

The script is very straight forward and installs Apache, Php and Mysql with appropriate permissions. Once this instance fully spins up you can point your browser to http://ec2-publicip/ and see the default Apache installation page.

Moreover, our script has setup a default phpinfo page that you can see at http://ec2-publicip/phpinfo.php

Neo4J Up and Running on AWS

Recall our overall goal here is to build you a framework where your application users can visualize graph data. We have already seen the installation of Neo4j on an Ec2 in the Sequoia blogs here. However, before you can access the Neo4j admin console you'll need to add this line org.neo4j.server.webserver.address=0.0.0.0 to the end of the neo4j-server.properties file. At this point you should be able to point your browser to http://ec2-publicIp:7474 and see the Neo4j admin console. You can load your database with any type of generic data you want but I'll just use the default movie data from Neo4j. On the Neo4j command type :play movie graph Then move the carousel one slide over to access the create commands for their default movie database. Here is a what it looks like
. Once your database is loaded you can run the perfunctory MATCH(n) return n command to see the entire graph as below

Understanding the Data Representation

What we really want to do here is access the underlying JSON Neo4j is using to generate the graph so that we can pipe that data to our front end engines D3.js and Alchemy.js. To accomplish that let's take a look at the Python client library Py2neo to get our hands on that data. Below is a quick script using Py2neo that will get our hands on the JSON used to make the Neo4j graph.

import py2neo  
from py2neo import authenticate, Graph  
from json import dumps  
authenticate("localhost:7474", "neo4j", "admin")  
g = Graph("http://localhost:7474/db/data/")  
output = dumps(g.run("MATCH(n)  RETURN n").data())  
print output  

When we run this we can see a data representation of the graph. This data can be fed to Javascript libraries for visualization purposes. Here is a sample of the returned JSON.

[{"n": {"tagline": "Welcome to the Real World", "title": "The Matrix", "released": 1999}}, {"n": {"born": 1964, "name": "Kean
u Reeves"}}, {"n": {"born": 1967, "name": "Carrie-Anne Moss"}}, {"n": {"born": 1961, "name": "Laurence Fishburne"}}, {"n": {"  
born": 1960, "name": "Hugo Weaving"}}, {"n": {"born": 1967, "name": "Andy Wachowski"}}, {"n": {"born": 1965, "name": "Lana Wa  
chowski"}}, {"n": {"born": 1952, "name": "Joel Silver"}}, {"n": {"born": 1978, "name": "Emil Eifrem"}}, {"n": {"tagline": "Fr  
ee your mind", "title": "The Matrix Reloaded", "released": 2003}}, {"n": {"tagline": "Everything that has a beginning has an  
end", "title": "The Matrix Revolutions", "released": 2003}}  

Bring it All Together

We have seen how to interact with Neo4j and spin up our instances with an Apache Web Server installed. Let's bring it all together. Make sure git is installed on your instances and head over to cd /var/www/html Once you are there let's check out some Javascript code to digest that JSON we generated earlier. Type rm -rf * to clear out the test pages we generated earlier and then
git clone https://github.com/jdav999/cy2neo.git Now you are ready to go. Point your browser to http://public-ip/cy2neo/ and enter your Neo4j address (http://public-ip:7474), user name and password in the form in the upper right corner and and press play. Now be amazed as a Neo4j graph is displayed on your website like this

Wrapping Up

Visualization is a powerful concept because it makes complicated data readily accessible and easily digestible. There is a lot more you can do with this code and infrastructure. It all depends on your goals and what flavor of value you want to give to your users. Enjoy!