React-graph NPM

React Graph

Render dynamic graphs based on d3 models with Neo4j data format.

Live Demo

Minimalist
Dashboard
Dashboard View

Installation

npm install react-graph  --save

Usage

import ReactGraph from 'react-graph';

export const Minimalist = (props) => (
 <ReactGraph
   initialState={props.initialState}
   nodes={props.nodes}
   relationships={props.relationships}
   hasTruncatedFields
   hasLegends
   hasInspector
 />
)

Features

Compaptible with Neo4j data format.
Complete Dashboard(link to demo) to map your data.
Info panel that shows nodes and relationships information on hover.
Node menu on click.
Custom node colors by node label.
Custom relationship colors by relationship type.
Sticky nodes (drag to stick, single click to unstick).
Dynamic graph update.
Zoom.

Neo4j data format

{
    "results": [
        {
            "columns": ["user", "entity"],
            "data": [
                {
                    "graph": {
                        "nodes": [
                            {
                                "id": "1",
                                "labels": ["User"],
                                "properties": {
                                    "userId": "jcarva"
                                }
                            },
                            {
                                "id": "8",
                                "labels": ["Project"],
                                "properties": {
                                    "name": "react-graph",
                                    "title": "react-graph",
                                    "description": "Render dynamic graphs based on d3 models with Neo4j data format.",
                                    "url": "https://github.com/jcarva/react-graph",
                                    "mood": "https://youtu.be/dQw4w9WgXcQ"
                                }
                            }
                        ],
                        "relationships": [
                            {
                                "id": "7",
                                "type": "DEVELOPES",
                                "startNode": "1",
                                "endNode": "8",
                                "properties": {
                                    "from": 1470002400000
                                }
                            }
                        ]
                    }
                }
            ]
        }
    ],
    "errors": []
}