/react-graph

Render dynamic graphs based on d3 models

Primary LanguageTypeScriptGNU General Public License v3.0GPL-3.0

React Graph

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

NPM JavaScript Style Guide

Live Demo

Dashboard View

node

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 and responsive Dashboard 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

People

License

GPLv3 🄯 jcarva