Hands on Graph Data Visualization

Using Graph Visualization Frameworks with the Neo4j Graph Database

Michael Hunger
Apr 13, 2018 · 7 min read

It turned out that there is much more content on graph visualization that it fits into one article, so we will turn this into a series of indefinite length.

We hope you enjoy it. Please let us know in the comments.

Introduction: Querying Data from Neo4j

A graph database stores its data as nodes and relationships each with type and attributes. That makes it easy to represent connected, real world information to find new insights in the data.

To visualize the stored data, we often use Javascript data visualization frameworks.

This time, we’ll be not drawing charts or maps but graphs, aka. networks. You can do the former easily too by using aggregation or geo-information drawn from the graph but that’s for another time.

To query a Neo4j database we use Cypher a pictorial graph query language, that represents patterns as Ascii Art.

Where we …​

If you haven’t installed Neo4j, you can do that quickly with Neo4j-Desktop. After installation just create a project and a graph, start up the engine and open Neo4j Browser (which itself is a React Application). In the command line on top, type :play movies graph and click on the 2nd slide the create script, run it once and you should have a basic dataset for playing around.

You can also just spin up a Neo4j Sandbox which have many different datasets available, e.g. Twitter, Paradise Papers, Movie recommendations and more. For an empty database just use a “Blank Sandbox” and then create the movie database as above. Note your password, the server ip-address and the bolt port (not HTTP!).

So the simplest and fastest query is:

This query can pull a million relationships from a graph in a single second, much more than most visualization frameworks can visualize.

It only retrieves the graph structure which is useful when zoomed out.

For more details we might want to know labels of nodes and types of relationships, so we can color each accordingly.

If we want to we can return more detail, e.g. caption, sizes, clusters, weights:

Those queries return incrementally more data, so perhaps it’s more sensible to pull that additional information only if the user zooms in.

Then we can provide a list of already loaded, visible ids (with the first query) as filter:

You can pre-set params in Neo4j-Browser with :param ids:[1,2,3]

For the full detail information of a node (with all possible properties), we can load that data when the user hovers or clicks on the node:

Loading Data with the Javascript Driver

Querying data with the Neo4j Javascript Driver is very performant and quite straightforward, I’ll mention the one only weirdness as we get there.

You can add the driver via npm, or via CDN (rawgit) to your project.

Let’s start by querying with the node shell:

import module, create a driver

If the connection fails, please check that

  1. your server is running,
  2. the address (esp. in the remote case) and
  3. the authentication.

create a session

get a single node

result datastructure

We see the attribute records, each of which has a keys, a get(key) method, and private _fields and _fieldLookup attributes. Also there is a summary with resultConsumedAfter/resultAvailableAfter timing, statement, counters, plan, notifications, serverInfo.

return keys and values for each record

We see that unexpected Integer type, which is the "number" type of the Neo4j driver, due to Javascripts inability to represent whole numbers > 2^53 You can call value.toNumber() on it, more details in the docs/readme of the neo4j-javascript-driver

turn single record into an object

performance test

A small performance test on my machine using a cross product which we limit to 1M results with 3 values each.

It shows that it takes a bit less than 2 seconds to retrieve that 1 million rows. If we were processing that data in a streaming manner and not build up a large array, it is much faster (less than 1 second).

close session & driver

Ok, now we should know how to query Neo4j.

Code on Webpage

Within the browser our code will mostly look like this. All additional code will be setup or configuration of the visualization framework.

If you connect to your live database from a webpage, make sure to set up a read-only account. Alternatively you can ask the user for login and password in a form. Upcoming versions of Neo4j will add possibilities of more restrictions on data.

Game of Thrones Graph with Weights and Colors

Javascript Graph Visualization Frameworks

Most graph visualization frameworks have some kind of “graph” API to take a number of nodes and a number of links or relationships and then render them either with SVG, Canvas or WebGL. Some of them take plain objects as input, others have an API to add nodes and relationships.

Most of the frameworks offer several options for styling, interaction, graph-layout algorithms etc. When we discuss each in turn we will point out the details and where to find more information.

Here are the open-source frameworks we’ll look in this series:

There are a number of other, commercial frameworks and tools, that we also will try to introduce in this series, with the help of each vendor.

  • yWorks yFiles
  • Linkurio.us OGMA
  • Keylines
  • Tom Sawyer Perspectives
  • Graphistry
  • Graphileon

Most of them have Neo4j support built-in.

In the next post next week, William Lyon will introduce neovis.js the Neo4j wrapper he created around vis.js.

If you have questions around graph visualization, make sure to join the Neo4j-Users Slack and ask in the #help-viz channel.

Stay Tuned

Neo4j Developer Blog

Developer Content around Graph Databases, Neo4j, Cypher…

Neo4j Developer Blog

Developer Content around Graph Databases, Neo4j, Cypher, Data Science, Graph Analytics, GraphQL and more.

Michael Hunger

Written by

A software developer passionate about teaching and learning. Currently working with Neo4j, GraphQL, Kotlin, ML/AI, Micronaut, Spring, Kafka, and more.

Neo4j Developer Blog

Developer Content around Graph Databases, Neo4j, Cypher, Data Science, Graph Analytics, GraphQL and more.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store