Examples

Neo4j movie graph

The Neo4j Movie Graph is a mini graph application containing actors and directors that are related through the movies they've collaborated on. This dataset can be generated automatically using Neo4j web interface.

The following examples rely on this dataset.

Note that the source code of all the examples can be seen directly from the live example pages using the view source action of your browser. The full set of examples can also be downloaded at once on the download page page.

Simple graph search   Live example

This example details the basic steps to generate a simple graph search on Neo4j movie database.

Define the basic HTML page structure, the minimum configuration and library usage.

Graph with query viewer   Live example

Based on previous example, this application details the additional steps to add a query viewer in the HTML page and also explains how to create links label provider customization.

Graph with results   Live example

This application details the steps to add a result list to the previous example, it also explains how to customize the displayed results and how to add custom listeners to the returned results.

Node label providers   Live example

This example details the steps to customize the displayed nodes and results by adding movies and actors images configuration.

Event customization   Live example

This example show how to customize events to initialize graph on a given node and how to listen to returned results.

CSS customization   Live example

This example shows how to customize Popoto.js CSS classes to generate an interface derived from Neo4j 2.2.0 web admin style.

Details coming soon...

Graph results   Live example

This example shows how to customize Popoto.js to display results as a graph using vis.js graph library.

Predefined constraints

Set in config   Live example

This example uses predefined constraints to filter data to display only the 3 Matrix movies and Person having born attribute in graph.
The predefined constraints are set in config.

Modifiable with inputs   Live example

This example shows how to use predefined constraints to filter displayed data in graph using dynamics inputs to modify the config.

Search in attribute   Live example

This example shows how to use predefined constraints to filter displayed data using a dynamic text box.
Data is filtered to show only nodes containing input text in person name or movie title.

US states SVG node provider

SVG node provider   Live example

This example details how to use SVG node display type in configuration. Instead of text or images it is possible with Popoto.js to use a list of SVG paths.

In this example the dataset contains a list of US states and the label provider is configured to return the corresponding state SVG paths.

Pre-election day Hackathon

Sources on GitHub   Live example

This application uses Popoto.js to visualize a Neo4j dataset containing UK election data. The visualization have been customized to include a proportional map generated with d3 using code from electionmap project.

Date search on multi-level tree stucture

Factual restaurant search application

This example is a complete application using restaurant dataset provided by Factual modeled as a graph, hosted on GrapheneDB and shows most of the features available in Popoto.js:

Detailed implementation is coming soon and will cover the following subjects:

  • Label configuration with all different types of nodes
  • Taxonomies and inheritance configuration
  • Custom SVG path creation to use on nodes
  • Label localization example
  • Live CSS update
  • Result listener customization with Mapbox integration
  • GrapheneDB setup to host data

  Live example