Neo4j Demo

This demo shows how to load data from a Neo4j database and display it with yFiles for HTML.

First, connect to a Neo4j database by entering a URL, a username, and a password into the corresponding form fields, then click the Connect button.

After establishing a connection, a small set of data from the database will be displayed.

Things to Try

• Explore the data: Change the viewport by dragging the canvas with the mouse and change the zoom level by using the mouse wheel.
• Click on a node to select it, which will show its labels and properties in the properties view on the right.
• Double click on a node to load more nodes that are connected to it, if any are available.
• Hover over a node to highlight the adjacent edges. Hover over an edge to highlight the adjacent nodes.
• Toggle the display of edge labels using the "Show Edge Labels" checkbox.
• Move the sliders for the maximum node count and label diversity and then click the Reload Data button to query the database for a new set of data.
  Warning: Retrieving data with the sliders set to high might take a really long time (2 minutes and more) or might yield no results at all, depending on the database.
• Enter a custom Cypher query into the editor in the right, then click the "Run Cypher Query" button. Every node and relationship that is returned by that query will be visualized as a graph and will replace the current visualization.

Details

This demo uses the Neo4j driver for JavaScript to connect to a Neo4j database and query it for data.

The query results are then used by a GraphBuilder with a custom configuration to construct a graph from the data, while assigning different node styles to nodes with different labels.

The maximum node count setting limits the number of nodes that are queried from the database, while the label diversity setting determines the length of the distinct node label sequences that is searched for.

The graph layout is achieved by using OrganicLayout with substructures enabled.