Neod3 NPM | npm.io

neo4jd3.js

Neo4j graph visualization using D3.js.

neo3jd3.js

Features

Compaptible 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 v4.

Running

Clone the repository:

git clone https://github.com/vivopensource/neo4jd3.git

Install all dependencies using 'npm':

npm install

Install all dependencies using 'yarn':

yarn install

Serve the project using npm:

npm run lite-server

Serve the project using npm:

yarn run lite-server

Open http://localhost:3030 in the browser.

Inject in the angular (>= 4.0) project

You can use 'npm' to perform this task using the following code:

npm install neod3

Or you can use 'yarn' to perform this task using the following code:

yarn add neod3

Documentation

// 
var neo4jd3 = new Neo4jd3('.selector', options);
neo4jd3.init();

// 
neo4jd3 : Neo4jd3;

constructor() {
    this.neo4jd3 = new Neo4jd3('.selector', options);
}

  ngOnInit() {
      this.neo4jd3.init()
  }

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`.

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.
version()	Returns the version of neo4jd3.js.

Documentation

D3.js data format

{
    "nodes": [
        {
            "id": "1",
            "labels": ["User"],
            "properties": {
                "userId": "eisman"
            }
        },
        {
            "id": "8",
            "labels": ["Project"],
            "properties": {
                "name": "neo4jd3",
                "title": "neo4jd3.js",
                "description": "Neo4j graph visualization using D3.js.",
                "url": "https://eisman.github.io/neo4jd3"
            }
        }
    ],
    "relationships": [
        {
            "id": "7",
            "type": "DEVELOPES",
            "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": "eisman"
                                }
                            },
                            {
                                "id": "8",
                                "labels": ["Project"],
                                "properties": {
                                    "name": "neo4jd3",
                                    "title": "neo4jd3.js",
                                    "description": "Neo4j graph visualization using D3.js.",
                                    "url": "https://eisman.github.io/neo4jd3"
                                }
                            }
                        ],
                        "relationships": [
                            {
                                "id": "7",
                                "type": "DEVELOPES",
                                "startNode": "1",
                                "endNode": "8",
                                "properties": {
                                    "from": 1470002400000
                                }
                            }
                        ]
                    }
                }
            ]
        }
    ],
    "errors": []
}

Example

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

var neo4jd3 = new Neo4jd3('#neo4jd3', {
    highlight: [
        {
            class: 'Project',
            property: 'name',
            value: 'neo4jd3'
        }, {
            class: 'User',
            property: 'userId',
            value: 'eisman'
        }
    ],
    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
});