Home

Popoto.js is a JavaScript library built with D3.js designed to create interactive and customizable visual query builder for Neo4j graph databases.

The graph queries are translated into Cypher and run on the database. Popoto also helps to display and customize the results.

An application is composed of various components, each one can be included independently anywhere in a web application. It just need to be bound to a container ID in an HTML page and the content will be generated automatically.

A common example application contains the following components:

	Graph component is an interactive interface designed to build queries for non technical users, the graph is made of selectable nodes connected to each other by links.
	Toolbar is a list of actions available in the graph container.
	Taxonomy container contains the list of searchable labels in the database.
	Query viewers container shows different representation of the corresponding query defined in the Graph component.
	Result container displays the results matching the graph query.

See the list of Basic-action available in Graph.

Install

For NPM, npm install popoto For Yarn, yarn add popoto.

You can also load directly from unpkg Example:

<!-- Add default CSS reference -->
<link rel="stylesheet" href="https://unpkg.com/popoto/dist/popoto.min.css">

<!-- Add Popoto script reference, will default to popoto.min.js -->
<script src="https://unpkg.com/popoto"></script>

For source version:

<!-- Add Popoto script reference -->
<script src="https://unpkg.com/popoto/dist/popoto.js"></script>

See a detailed example page in Getting started.