edge-flow v0.1.13

Edge Flow

A GPU based particle system React Component for showing data flow

Description

A React visual Graph component that animates particles between nodes and animates changes to the position of the nodes. This is one of the building block visualization components for building animated diagrams. The Graph component is fixed position. A separate component layer on top adds automatic layout using a force based algorithm.

Installation

Assuming you're using webpack or browserify:

npm install edge-flow

Package comes with types built in (it's written using TypeScript).

Live demo at joewood.github.io/edge-flow

Simple Directed Graph Usage

import { EdgeFlowDag, NodeDag, EdgeDag } from "edge-flow"

:: ::

render() {
    return (
        <EdgeFlowDag style={{backgroundColor:"#0f0f0f",height:600,width:600}} run={true}>
            <NodeDag key="1" id="node-1" label="node-1' labelColor="white" >
                <EdgeDag linkTo="node-2" ratePerSecond={30} color="blue" size={2} />
            </NodeDag>
            <NodeDag key="2" id="node-2" label="node-2' labelColor="white">
                <EdgeDag linkTo="node-3" ratePerSecond={30} color="red" shape={0.2}/>
            </NodeDag>
            <NodeDag key="3" id="node-3" label="node-3' labelColor="white">
                <EdgeDag linkTo="node-1" ratePerSecond={30}  color="pink" shape={0.8} size={10} />
            </NodeDag>
        </EdgeFlowDag>
    );
}

Usage

import { EdgeFlow, Node, Edge } from "edge-flow"

:: ::

render() {
    return (
        <EdgeFlow style={{backgroundColor:"#0f0f0f",height:600,width:600}} run={true}>
            <Node key="1" id="node-1" label="node-1' center={{x:30,y:20}} labelColor="white" >
                <Edge linkTo="node-2" ratePerSecond={30} color="blue" size={2} />
            </Node>
            <Node key="2" id="node-2" label="node-2' center={{x:530,y:120}} labelColor="white">
                <Edge linkTo="node-3" ratePerSecond={30} variationMin={-0.01} variationMax={0.05} color="red" shape={0.2}/>
            </Node>
            <Node key="3" id="node-3" label="node-3' center={{x:330,y:520}} labelColor="white">
                <Edge linkTo="node-1" ratePerSecond={30} variationMin={-0.06} variationMax={0.06} color="pink" shape={0.8} size={10} />
            </Node>
        </EdgeFlow>
    );
}

Components and Properties

Animated Directed Acrylic Graph - EdgeFlowDag

For a live demo see here.

NodeDag

EdgeDag

EdgeFlow

Main underlying component providing absolute positioning

Node

Represents a node on the Graph

Edge

Child component of a Node. Indicates which other Nodes this Node links to.