Popoto.js is a JavaScript library built with D3.js providing a graph based search interface generated in HTML and SVG usable on any modern browser.

This library generates an interactive graph query builder into any website or web based application to create advanced queries on Neo4j databases and display the results.

Video of a full example application of Popoto.js on a Neo4j graph database containing restaurant data

Popoto.js supports all "modern" browsers (all but IE8 and below) and Neo4j 2.0 or higher as labels are required for customizations.

Every different components provided by Popoto.js listed below can be used and included independently anywhere in your web application. You just need to bind a component to a container ID in your page and the content will be generated automatically.

See Popoto documentation and Popoto examples for more details.

See a live application example here.

Graph query builder

The graph query builder component is a user friendly interface generated in SVG to discover and build a query using data dynamically extracted from the graph database. This graph is generated in SVG based on the Force Layout features provided by D3.js.

The graph is highly and easily customizable with a few JavaScript and CSS configurations. It is possible to change for example the SVG generated for a node, to use custom images, change the attributes constraints to use in the query or the labels displayed for a kind of node.

See query builder examples and query builder documentation for more details.

The graph built is translated into a Cypher query and executed through the Neo4j REST API and the displayed results are updated on every graph modifications.

Video example of graph query builder:

Labels or taxonomy filter

The label or taxonomy filter tree (optional) is generated from configuration, it defines all the Neo4j labels that can be searched with the graph.

Once selected it defines the root node type target of the query. All results returned will be of this type. This is also the root node used to discover the relations.

See taxonomy documentation and taxonomy examples for more details on its configuration.

Video example of taxonomy filter:

Generated query viewer

The generated query viewer (optional) is a dynamic and interactive textual representation of the graph. The graph is translated into a phrase describing the exact semantic of the generated query.

Label providers can be configured to generate localized labels or custom representations for relations.

See query viewer documentation and query viewer examples for details.

Snapshot of a generated query viewer example
Image example of a generated query viewer:

Generated Cypher query viewer

The Cypher query viewer (optional) works like the textual query viewer except that instead of a phrase the Cypher query is displayed. This is the same query sent to Neo4j to get the results.

This feature is designed mainly for advanced users. Popoto.js can be used for example as a graphical Cypher query builder tool with this functionality.

See Cypher query viewer documentation and Cypher query viewer examples for details.

Snapshot of a generated cypher viewer example
Image example of a generated cypher viewer: