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

How to Use Three.js, a Lightweight 3D Library, with Neo4j

  • submit to reddit

Last week we saw Sigma.js, and as promised here is a graph visualization with Three.js and Neo4j. Three.js is a lightweight 3D library, written by Mr. Doob and a small army of contributors.

The things you can do with Three.js are amazing, and my little demo here doesn’t give it justice, but nonetheless I’ll show you how to build it.

We need to pass the nodes and relationships to Three.js, one of the ways we can do that easily is with the Gon gem, since we’re using sinatra, we’ll use the special gon-sinatra gem.

class App < Sinatra::Base
  register Gon::Sinatra
  def nodes
    neo =
    cypher_query =  " START node = node:nodes_index(type='User')"
    cypher_query << " RETURN ID(node), node"
    neo.execute_query(cypher_query)["data"].collect{|n| {"id" => n[0]}.merge(n[1]["data"])}
  def edges
    neo =
    cypher_query =  " START source = node:nodes_index(type='User')"
    cypher_query << " MATCH source -[rel]-> target"
    cypher_query << " RETURN ID(rel), ID(source), ID(target)"
    neo.execute_query(cypher_query)["data"].collect{|n| {"id" => n[0], "source" => n[1], "target" => n[2]} }
  get '/' do
    neo =
    gon.nodes = nodes  
    gon.edges = edges
    erb :index

In our view we will add”include_gon” which ties our nodes and edges to our html page.

<!doctype html>
<html lang="en">
		<title>Three.js and Neo4j</title>
		<%= include_gon %>
		<meta charset="utf-8">
		<script type="text/javascript" src="Three.js"></script>
		<link type="text/css" rel="stylesheet" href="neo_three.css"/>
		<script type="text/javascript" src="neo_three.js"></script>

If you view the source of index.html, you’ll see our nodes and edges.

window.gon = {};

To use Three.js, we’ll need to create a camera, a scene and pick a renderer to use.

camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 100;

scene = new THREE.Scene();

scene.add( camera );

renderer = new THREE.CanvasRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );

To create our nodes, we’ll use Spheres and use a normal material. We’ll grab the nodes from gon and use their properties to position and set the orientation of our spheres.

var geometry = new THREE.SphereGeometry( 50, 8, 7, false );
var material = new THREE.MeshNormalMaterial();
group = new THREE.Object3D();

for (n in gon.nodes) {

  var mesh = new THREE.Mesh( geometry, material );
  mesh.position.x = gon.nodes[n].position_x;
  mesh.position.y = gon.nodes[n].position_y;
  mesh.position.z = gon.nodes[n].position_z;
  mesh.rotation.x = gon.nodes[n].rotation_x;
  mesh.rotation.y = gon.nodes[n].rotation_y;
  mesh.matrixAutoUpdate = false;
  group.add( mesh );


scene.add( group );

For our edges, we’ll create simple lines of random colors between the source and target nodes.

for (n in gon.edges) {
  var line_segment = new THREE.Geometry();
  line_segment.vertices.push( new THREE.Vertex( group.children[gon.edges[n].source - 1].position ) );
  line_segment.vertices.push( new THREE.Vertex( group.children[gon.edges[n].target - 1].position ) );
  var line = new THREE.Line( line_segment, 
                            new THREE.LineBasicMaterial( { color: Math.random() * 0xffffff, 
                                                           opacity: 0.5 } ) );


We’ll animate our visualization by rendering the scene and controlling the camera with the mouse.

document.addEventListener( 'mousemove',  onDocumentMouseMove,  false );

function onDocumentMouseMove(event) {
  mouseX = event.clientX - windowHalfX;
  mouseY = event.clientY - windowHalfY;

function animate() {
  requestAnimationFrame( animate );

function render() {
  camera.position.x += ( mouseX - camera.position.x ) * .05;
  camera.position.y += ( - mouseY + 200 - camera.position.y ) * .05;
  camera.lookAt( scene.position );
  renderer.render( scene, camera );

I’m going to skip the graph creation but all the code is available on github as usual, and you’ll definitively want to see this live on Heroku.

If you want to learn more about Three.js, check out these tutorial and these videos.

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

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