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.

Prop | Datatype | Description ----------------|----------|------------ backgroundColor | string | Background Color of the canvas height, width | number | Size of the Graph run | boolean | Animate Graph

NodeDag

Prop | Datatype | Description ----------------|----------|------------ id | string | Used to identify the node (for edges) label? | string | Label attached to the Node labelColor? | string | Color of the label text symbol? | string | String used for a font-icon (e.g. FontAwesome) symbolColor? | string | Color for symbol font-icon symbolSize? | number | Size of font-icon symbolFont? | string | Symbol Font name (e.g. "fontawesome")

EdgeDag

Prop | Datatype | Description ----------------|----------|------------ linkTo | string | The id of the node to link to ratePerSecond | number | How many particles animating per second through the edge variationMin? | number | The minimum width of the Edge for random dispersal (default -0.01) variationMax? | number | The maximum width of the Edge for random dispersal (default 0.01) color? | string | Color of the particle (or color at starting position) endingColor? | string | Color of the particle at the target position (optional, defaults to starting color) shape? | number | Roundness of particle range 0..1 - 1 being circle, 0 being square size? | number | Size of the particles (range 1..20) pathColor? | string | Color of the edge's path (defaults to lighter shade of canvas background) pathWidth? | number | Width of the line for the edge's path (default 12) pathOpacity? | number | Opacity of the path for the edge (default is 0.2) nonrandom | boolean | Disable random distribution of particles (evenly spaced)

EdgeFlow

Main underlying component providing absolute positioning

Prop | Datatype | Description ----------------------|----------|------------ style: | Style... | style.backgroundColor | string | Background Color of the canvas style.height | number | Size of the Graph, pixels style.width | number | Size of the Graph run | boolean | Animate Graph

Node

Represents a node on the Graph

Prop | Datatype | Description ----------------|----------|------------ id | string | Used to identify the node (for edges) center | {x,y} | Location of Node (auto-scales) label? | string | Label attached to the Node labelColor? | string | Color of the label text symbol? | string | String used for a font-icon (e.g. FontAwesome) symbolColor? | string | Color for symbol font-icon symbolSize? | number | Size of font-icon symbolFont? | string | Symbol Font name (e.g. "fontawesome")

Edge

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

Prop | Datatype | Description ----------------|----------|------------ linkTo | string | The id of the node to link to ratePerSecond | number | How many particles animating per second through the edge variationMin? | number | The minimum width of the Edge for random dispersal (default -0.01) variationMax? | number | The maximum width of the Edge for random dispersal (default 0.01) color? | string | Color of the particle (or color at starting position) endingColor? | string | Color of the particle at the target position (optional, defaults to starting color) shape? | number | Roundness of particle range 0..1 - 1 being circle, 0 being square size? | number | Size of the particles (range 1..20) pathColor? | string | Color of the edge's path (defaults to lighter shade of canvas background) pathWidth? | number | Width of the line for the edge's path (default 12) pathOpacity? | number | Opacity of the path for the edge (default is 0.2) source? | {x,y} | Starting point of edge (defaults to the connected node) target? | {x,y} | Ending point of edge (defaults to the connected node) p2?, p3? | {x,y} | Cubic bezier control points