Skip to content

TargetPackage/neo4jd3

 
 

Repository files navigation

neo4jd3.js

Neo4j graph visualization using D3.js.

neo3jd3.js

Features

  • Compatible with the Neo4j data format and the D3.js data format.
  • Force simulation.
  • Info panel that shows nodes and relationships information on hover.
  • Double click callbacks.
  • Custom node colors by node type.
  • Text nodes + Font Awesome icon nodes + SVG image nodes (e.g. using Twitter Emoji)).
  • Sticky nodes (drag to stick, single click to unstick).
  • Dynamic graph update (e.g. double click a node to expand it).
  • Highlight nodes on init.
  • Relationship auto-orientation.
  • Zoom, pan, auto fit.
  • Compatible with D3.js v7.

Running

Clone the repository, install all dependencies, build and serve the project.

> git clone https://github.com/TargetPackage/neo4jd3.git
> pnpm install
> gulp

Open http://localhost:8080 in your favorite browser.

Documentation

const neo4jd3 = new Neo4jd3(".selector", options);

Options

Parameter Type Description
highlight array Highlight several nodes of the graph.
Example:
[
    {
        class: 'Project',
        property: 'name',
        value: 'neo4jd3'
    }
]
icons object Map node labels to Font Awesome icons.
Example:
{
    'BirthDate': 'birthday-cake',
    'Password': 'lock',
    'Phone': 'phone',
    'User': 'user'
}.
images object Map node labels to SVG images (e.g. using Twitter Emoji).
Example:
{
    'Address': 'img/twemoji/1f3e0.svg',
    'BirthDate': 'img/twemoji/1f382.svg',
    'Password': 'img/twemoji/1f511.svg',
    'Project': 'img/twemoji/2198.svg',
    'Project|name|neo4jd3': 'img/twemoji/2196.svg',
    'User': 'img/twemoji/1f600.svg'
}.
infoPanel boolean Show the information panel: true, false. Default: true.
minCollision int Minimum distance between nodes. Default: 2 * nodeRadius.
neo4jData object Graph data in Neo4j data format.
neo4jDataUrl string URL of the endpoint that serves the graph data in Neo4j data format.
nodeRadius int Radius of nodes. Default: 25.
onNodeClick function Callback function to be executed when the user clicks a node.
onNodeDoubleClick function Callback function to be executed when the user double clicks a node.
onNodeDragEnd function Callback function to be executed when the user finishes dragging a node.
onNodeDragStart function Callback function to be executed when the user starts dragging a node.
onNodeMouseEnter function Callback function to be executed when the mouse enters a node.
onNodeMouseLeave function Callback function to be executed when the mouse leaves a node.
onRelationshipDoubleClick function Callback function to be executed when the user double clicks a relationship.
zoomFit boolean Adjust the graph to the container once it has been loaded: true, false. Default: false.
showNullProperties boolean Whether or not empty properties should be displayed in the node information. Default: false.
contextMenuItems array The items to display in the context menu when a node is right clicked. Default: [].

JavaScript API

Function Description
appendRandomDataToNode(d, maxNodesToGenerate) Generates between 1 and maxNodesToGenerate random nodes connected to node d and updates the graph data.
neo4jDataToD3Data(data) Converts data from Neo4j data format to D3.js data format.
randomD3Data(d, maxNodesToGenerate) Generates between 1 and maxNodesToGenerate random nodes connected to node d.
size() Returns the number of nodes and relationships.
Example:
{
    nodes: 25,
    relationships: 50
}
updateWithD3Data(d3Data) Updates the graph data using the D3.js data format.
updateWithNeo4jData(neo4jData) Updates the graph data using the Neo4j data format.

Documentation

D3.js data format

{
  "nodes": [
    {
      "id": "1",
      "labels": ["User"],
      "properties": {
        "userId": "TargetPackage"
      }
    },
    {
      "id": "8",
      "labels": ["Project"],
      "properties": {
        "name": "neo4jd3",
        "title": "neo4jd3.js",
        "description": "Neo4j graph visualization using D3.js.",
        "url": "https://targetpackage.github.io/neo4jd3"
      }
    }
  ],
  "relationships": [
    {
      "id": "7",
      "type": "DEVELOPS",
      "startNode": "1",
      "endNode": "8",
      "properties": {
        "from": 1470002400000
      },
      "source": "1",
      "target": "8",
      "linknum": 1
    }
  ]
}

Neo4j data format

{
  "results": [
    {
      "columns": ["user", "entity"],
      "data": [
        {
          "graph": {
            "nodes": [
              {
                "id": "1",
                "labels": ["User"],
                "properties": {
                  "userId": "TargetPackage"
                }
              },
              {
                "id": "8",
                "labels": ["Project"],
                "properties": {
                  "name": "neo4jd3",
                  "title": "neo4jd3.js",
                  "description": "Neo4j graph visualization using D3.js.",
                  "url": "https://targetpackage.github.io/neo4jd3"
                }
              }
            ],
            "relationships": [
              {
                "id": "7",
                "type": "DEVELOPS",
                "startNode": "1",
                "endNode": "8",
                "properties": {
                  "from": 1470002400000
                }
              }
            ]
          }
        }
      ]
    }
  ],
  "errors": []
}

Example

Live example @ https://targetpackage.github.io/neo4jd3/

const neo4jd3 = new Neo4jd3.default("#neo4jd3", {
  highlight: [
    {
      class: "Project",
      property: "name",
      value: "neo4jd3"
    },
    {
      class: "User",
      property: "userId",
      value: "TargetPackage"
    }
  ],
  icons: {
    Api: "gear",
    BirthDate: "birthday-cake",
    Cookie: "paw",
    Email: "at",
    Git: "git",
    Github: "github",
    Ip: "map-marker",
    Issues: "exclamation-circle",
    Language: "language",
    Options: "sliders",
    Password: "asterisk",
    Phone: "phone",
    Project: "folder-open",
    SecurityChallengeAnswer: "commenting",
    User: "user",
    zoomFit: "arrows-alt",
    zoomIn: "search-plus",
    zoomOut: "search-minus"
  },
  images: {
    Address: "img/twemoji/1f3e0.svg",
    BirthDate: "img/twemoji/1f5d3.svg",
    Cookie: "img/twemoji/1f36a.svg",
    CreditCard: "img/twemoji/1f4b3.svg",
    Device: "img/twemoji/1f4bb.svg",
    Email: "img/twemoji/2709.svg",
    Git: "img/twemoji/1f5c3.svg",
    Github: "img/twemoji/1f5c4.svg",
    icons: "img/twemoji/1f38f.svg",
    Ip: "img/twemoji/1f4cd.svg",
    Issues: "img/twemoji/1f4a9.svg",
    Language: "img/twemoji/1f1f1-1f1f7.svg",
    Options: "img/twemoji/2699.svg",
    Password: "img/twemoji/1f511.svg",
    "Project|name|d3": "img/twemoji/32-20e3.svg",
    "Project|name|neo4j": "img/twemoji/33-20e3.svg",
    "Project|name|neo4jd3": "img/twemoji/31-20e3.svg",
    User: "img/twemoji/1f600.svg"
  },
  minCollision: 60,
  neo4jDataUrl: "json/neo4jData.json",
  nodeRadius: 25,
  onNodeDoubleClick: function (node) {
    switch (node.id) {
      case "25":
        // Google
        window.open(node.properties.url, "_blank");
        break;
      default:
        var maxNodes = 5,
          data = neo4jd3.randomD3Data(node, maxNodes);
        neo4jd3.updateWithD3Data(data);
        break;
    }
  },
  zoomFit: true
});

What's coming?

  • Toolbar.
  • More than one relationship between two nodes.
  • Markers.
  • Performance optimization.
  • Testing.

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 96.8%
  • SCSS 3.2%