react-graph

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
 />
)

• Minimalist
• Dashboard

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": []
}

Credits

Inspired and helped this awesome project.

Projects

• neo4jd3.js
• Disjoint Force-Directed Graph
• Neo4j

People

• Nicolò Taddei
• Eddy Hernandez

License

GPLv3 🄯 jcarva