javidhsueh / react-test

For testing how to load shader using webpack loaders

react-graph-gl

This component is implemented to render large graph with interactive speed. It's a statelful react component, which means it changes the visualization result according to the props you passed into.

Usage

    return r.div({},[
      r(GraphGL, {
        graphData: graphData,
        setting: renderSetting,
        width: 1000,
        height: 1000
      })
    ]);

See example/main.js for a full example

API

graphData: (object)

The graph data.

width: (number)

The width of the container.

height: (number)

The height of the container.

setting: (object)

The rendering setting of the graph. Including three parts:

// example: 
  setting: {
    uniformSetting: {
      nodeSize: 5,
      nodeColor: [43, 140, 190, 255],
      nodeShape: 'circle',
      nodeBorderColor: [143, 140, 190, 255],
      nodeShowLabel: true,
      edgeThickness: 2.0,
      edgeColor: [200, 200, 200, 255],
      edgePattern: 'solid',
      edgeRouting: 'line',
      edgeShowLabel: true
    },
    dataMapping: {
      nodeSizeProperty: 'none',
      nodeSizeRange: [1, 20],
      nodeColorProperty: 'none',
      nodeColorMap: [
        {offset: 0, color: [0, 0, 255, 255]},
	    {offset: 0.5, color: [128, 0, 128, 255]},
	    {offset: 1, color: [255, 0, 0, 255]}
      ],
      edgeThicknessProperty: 'none',
      edgeThicknessRange: [0.1, 5.0],
      edgeColorProperty: 'none',
      edgeColorMap: [
        {offset: 0, color: [0, 0, 255, 255]},
        {offset: 0.5, color: [128, 0, 128, 255]},
        {offset: 1, color: [255, 0, 0, 255]}
      ]
    },
    individualMapping: [
      {id: 0, nodes: [2,5,6], nodeSize: 15, nodeColor: [255, 0, 0, 255]}
    ]
  }

The rednering result will change according to this setting.

Callback

function onNodeSelected (selectedNodes)

More related work to read

1. Andrew Thall's Extended-Precision Floating-Point Numbers for GPU Computation.
2. Improving precision in your vertex transform
3. Double Precision in OpenGL and WebGL
4. Heavy computing with GLSL – Part 2: Emulated double precision

To install

npm install

To run

npm run start

This will start a budo server running on localhost:9966.