Creating a Graph Visualization From Neo4j Data
A visualization enables users to visually explore the stored data, identify significant structures, and get a better understanding of relationships. Besides the visual exploration, it is also possible to interactively edit the stored data by modifying the diagram without any Cypher knowledge, which enables non-technical users to explore and modify the data. For example, new nodes and relationships can be created using mouse gestures. Therefore, visualizing a graph database is a powerful solution when handling or analyzing vast amounts of data.
Neo4j comes with a built-in visualization tool. This tool lets you run Cypher queries and displays the result either as a table or in a simple, force-based diagram. While this is useful to learn Cypher and as a quick check if a query returns the right result, more complex tasks often require a sophisticated and customized visualization.
Visualizing Neo4j Data With yFiles
yFiles for HTML is a commercial programming library explicitly designed for diagram visualization and is a perfect fit for the challenges of graph database visualization. Its sophisticated layout algorithms can easily transform the data into a readable, pleasing, and informative network. The different layout styles, for example, hierarchic, organic, tree, circular, or radial, enable the user to intuitively identify structural characteristics of the data, such as hierarchy, connected components, or rings.
Connecting yFiles for HTML With Neo4j
Neo4j provides a standard JavaScript driver implementation that lets you connect to a database via the bolt protocol, making it easy to send Cypher Queries from JavaScript code to the database. In return, you get JavaScript objects containing the data you queried from the database.
yFiles for HTML comes with a Graph Builder, which transforms the raw data resulting from a Cypher query into a graph structure. After building the graph structure, the full power of the yFiles diagramming library is at your disposal.
Data-Driven Visualization
A good visualization provides insights into the data that are not obvious by looking at the raw data. yFiles for HTML offers several ways to use the data from the Neo4j database to create a rich and meaningful representation. The user can take advantage of the powerful data binding capabilities to create item templates that utilize the labels and properties of the Neo4j data.
Automatic Arrangement
Automatic layouts can give you different perspectives on your data structure. In particular, they make it easy to identify substructures in your data like connected components, chains, circles, stars, and hierarchies. yFiles provides an extensive set of sophisticated, highly configurable automatic layout algorithms that arrange your data in a clear, concise, and readable manner in the blink of an eye.
 Organic Placement
|
 Hierarchic Placement
|
 Orthogonal Placement
|
 Circular Placement
|
Powerful Exploration
An interactive application can provide much more functionality than a simple static representation. With yFiles for HTML, a graph visualization can be augmented with a considerable set of interactive features:
- Grouping lets you combine similar or related items to reduce visual complexity
- Drill down helps to explore specific parts of the data
- Filtering can be used to reduce the number of displayed entities without any additional database queries
- Data exploration and interactive modification is possible by mouse, keyboard and touch gestures
- Animations can help to provide a pleasant user experience
Example and Source Code
yFiles for HTML comes with a Neo4j Integration Sample Application. This example loads a small dataset from a Neo4j database. Starting from this, users can, for example, investigate the properties of the current nodes and edges, interactively expand adjacent parts of the graph, and switch to a different dataset by entering a custom Cypher query.
The source code of the Neo4j Integration Sample Application is available on the yWorks Github repository and part of the yFiles for HTML package.
Visualize a Neo4j Database in Your Own Application
Test yFiles’ powerful diagramming component with a 60-day, fully-functional trial package of yFiles for HTML.
To visualize your own Neo4j database with yFiles for HTML in your own application, start with the Neo4j Integration Sample Application that is part of the yFiles for HTML package. It is not only a showcase application but also provides best-practice source code that you can re-use in your project.
- Download the trial version of yFiles for HTML at the yWorks Customer Center.
- Navigate to the source directory of the Neo4j Integration Sample Application.
- Explore the sample application’s features and
- adjust its source code to match your requirements or
- copy the source code of the features you like to your project.
Neo4j Explorer – A Free Web Application to Explore Your Database
The Neo4j Explorer is a free web application built with yFiles for HTML that connects to a Neo4j database. It can be used to explore the database content visually and allows to apply different filters, styles, and automatic layouts on the stored content.
This introduction video provides an overview of the application: