Over a million developers have joined DZone.

Going Meta: Exploring the Neo4j Graph Database... as a Graph

DZone's Guide to

Going Meta: Exploring the Neo4j Graph Database... as a Graph

Graph visualization is deeply intuitive and harnesses the brain’s unrivaled ability to spot patterns. It’s also flexible enough to apply to virtually any dataset. To prove it, I thought we’d go a bit meta.

· Database Zone ·
Free Resource

Download the Altoros NoSQL Performance Benchmark 2018. Compare top NoSQL solutions – Couchbase Server v5.5, MongoDB v3.6, and DataStax Enterprise v6 (Cassandra).

The graph data model is inherently visual. Try explaining a graph to someone new. You’ll inevitably draw a picture or wave your hands around to convey what you mean by "nodes… links…. and more nodes." People think in graphs, and they interpret graph intelligence visually. That’s what makes graph visualization such a powerful tool.

Graph visualization is deeply intuitive and harnesses the brain’s unrivaled ability to spot patterns. It’s also flexible enough to apply to virtually any dataset. If there’s an interesting relationship in your data somewhere, you’ll find value in graph visualization.

To prove it, I thought we’d go a bit meta.

In this post, I’ll use KeyLines’ graph visualization power to explore the Neo4j GitHub community. It’ll show how KeyLines makes your graph data more accessible, insightful, and valuable.

Our Stack

First, we’ll look at the technologies we’ll use for this GitHub exploration tool:

  • KeyLines for the visualization front-end.
  • GraphQL to fetch data from the GitHub API.
  • Neo4j as a graph datastore "cache" for our GitHub data.
  • Angular to neatly tie the project together.

The Neo4j KeyLines graph visualization architectureNeo4j and KeyLines play nicely with the new kid on the block, too: GraphQL. The Facebook-backed query language is a specification for pulling data efficiently and in a more type-aware way than REST. Particularly exciting is its capacity to support nested queries, reducing the number of calls our app needs to make.

Loading a Github Account

Let’s kick off our visual exploration by searching GitHub for the world’s most popular graph database:

The initial load of Neo4j GitHub repos

Loading Neo4j’s 20 most recently updated repos

With each KeyLines interaction (a search, a click, a double-click, etc.), we’re setting off a set of actions:

  1. Send an event to the service provider.
  2. The service auto-generates some Cypher to query the Neo4j database:
    MATCH (User {login:"christian-cam"})-[PullRequest:PULL_REQUEST]->(Repository)
       RETURN User, PullRequest, Repository
  3. If the response is blank, it sends a GraphQL query to the GitHub API:
    query ($login: String!) {
      user(login: $login) {
    pullRequests(first: 50, states: [MERGED], orderBy: {field: CREATED_AT, direction: DESC}) {
      nodes {
        commits {
        repository {
          owner {
    {‘login’: ‘christian-cam’}
  4. The GitHub API returns some data, which is cached in our Neo4j instance. It’s then loaded into KeyLines and styled according to your customization code.

The Neo4j GitHub org contains 26 repos, hundreds of users, and millions of pull requests and diffs. It’s a vast data set that we couldn’t hope to understand in its raw format. Thankfully, graph visualization will help us distill thousands of lines of data into an interactive chart.

graph data model visualizationKeyLines’ seven graph layouts will reveal different features of the network.

The structural layout helps to reveal distinct communities. Here’s the Neo4j GitHub community:

meta exploration of Neo4j graph visualizationI’ve used a simple color code to indicate the type of connections between people and repos:

Pull requests have been bundled into weighted links to avoid chart clutter. With this view, one account that stands out is lutovich, especially in some of the driver repos.

Double-clicking on lutovich reveals their most recent commits:

Explore the Neo4j Graph Database community on GitHub using the power of Neo4j graph visualization

This "expand and layout" approach is a powerful way to explore large graphs. It puts the user in the driving seat, so they can explore details at their own pace.

Filtering the Graph by Time

A prominent feature of my GitHub app is the KeyLines time bar — a neat component for exploring temporal networks.

On the first load, the spike of pull requests around September stands out. There’s no surprise that this was around the time of Neo4j 3.2.5 and 3.3 beta.

KeyLines time bar visualizationNeo4j GitHub activity in SeptemberSo we’ve zoomed into our graph’s details. Now, let’s try exploring outwards. Here, I’ve added a few Neo4j partners with GitHub accounts:

Image title

Our starting point is familiar. KeyLines’ standard layout spaces nodes around the chart, revealing three distinct clusters with some collaboration between. But the chart is still fairly cluttered.

KeyLines’ new and improved combos functionality is a powerful way to declutter a graph, highlighting the most important nodes and links. Here’s what happens when we combine our repos and run the standard layout:

Combos and layout in KeyLines graph visualization

In two clicks we’ve transformed a cluttered chart into a clear graph visualization. We can instantly see Neo4j’s GitHub community contributors, and the bridges between the different projects. This approach can be applied to any kind of graph dataset, revealing trends and patterns that would otherwise be hidden.

Try It Yourself

Inspired to try some graph visualization? We’re happy to help! You can see the power of KeyLines new combos functionality and find working examples of KeyLines with Neo4j on our SDK site or follow the tutorials on our blog.

Download the whitepaper, Moving From Relational to NoSQL: How to Get Started. We’ll take you step by step through your first NoSQL project.

data visualization ,graph visualization ,database ,graph database ,keylines ,graphql ,neo4j ,angular

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}