SVG node provider on US states

Create HTML page structure

This page contains only a div where the graph will be generated and includes the required scripts to use Popoto.js

<!DOCTYPE html>

    <title>Popoto graph search</title>

    <!-- Add Popoto default CSS styles -->
    <link rel="stylesheet" href="../../css/popoto.min.css">
        /* Classes used by region SVG paths */
        .region-back {
            fill: #2e3138; // Map background is grey
        .region-highlight {
            fill: #f0b017; // Region are yellow

    <!-- By default the graph is generated in the HTML element with
    ID "popoto-graph" -->
    <div id="popoto-graph" class="ppt-div-graph">
    <!-- Graph is generated here -->

    <!-- Required scripts -->
    <script src="../../js/jquery-2.1.0.min.js" charset="utf-8"></script>
    <script src="../../js/d3.v3.min.js" charset="utf-8"></script>
    <script src="../../js/popoto.min.js" charset="utf-8"></script>

    <!-- Add regions svg paths from a js file -->
    <script src="svg-us-region-data.js" charset="utf-8"></script>
    // detailed below

Configure Popoto.js

In this example the code is added in the HTML page in a script tag after popoto.min.js reference.

First step is to set the cypher REST url.
It defines the URL used by Popoto.js to execute Cypher queries. = "http://localhost:7474/db/data/cypher";

Next step is to define the labels to use svg paths for each region node in the application.

In the "Region" label provider configuration the function "getDisplayType" is customized to return "popoto.provider.NodeDisplayTypes.SVG" type.
With this configuration, region's nodes will no more use ellipses but a list of SVG paths to be drawn in the graph.

So the next step is to configure the "getSVGPaths" function.
In this examples all the SVG paths for each regions are stored in an external JavaScript file "svg-us-region-data.js" which stores all the values in a variable names "USRegionsSVGPaths."

// Define the list of label provider to customize the graph behavior:
popoto.provider.nodeProviders = {
  "Region": {
    "returnAttributes": ["name"],
    "constraintAttribute": "name",
    "getDisplayType": function (node) {
      return popoto.provider.NodeDisplayTypes.SVG;
    "getSVGPaths": function (node) {
      // Create the list of SVG path to draw the node.
      // A path here is composed of two elements: the SVG path ("d" attribute)
      // and a CSS class
      var paths = [];

      // In this example the paths are stored in "USRegionsSVGPaths" variable
      // defined in svg-location-data.js referenced script.
      // But here you could consider using json, generated path, a dedicated
      // service or even paths stored in node attribute data.

      // Add US background path:
      paths = paths.concat(USRegionsSVGPaths["US"]);

      // Then depending on node type add the path of the region.
      if (node.type === popoto.graph.node.NodeTypes.VALUE) {
        // The node is an expanded value then the path corresponding to the
        // region name is added:
        paths = paths.concat(USRegionsSVGPaths["US-" +]);
      } else {
        if (node.value) {
          // The node is an expandable node with a selected value then the
          // path corresponding to the selected value region name is added:
          paths = paths.concat(
                    USRegionsSVGPaths["US-" +]
      return paths;
    // Disable the displayed text on nodes to only see drawn paths
    "getIsTextDisplayed": function (node) {
        return false;

Last step is to start Popoto.js on the node label to search and the div where to generate the graph.

// Start the generation using parameter as root label of the query.

Run the page

With this little JavaScript configuration the page is ready to use and the result look like this:

Example image of Popoto.js using SVG paths to display US region nodes

See live example using GrapheneDB.

This example can be downloaded here:

The full set of examples can also be downloaded at once on the download page.