Hey, Andrei!
What is the key difference between ngraph and Sigma.js libs? I need to choose a library to display dynamic server-side updated graph. Is there some memory or performance issues to look on?

HI @anvaka,

I'm studying the module to build a big graph dynamically and I have a problem with the pixi.js, I have this renderer.

But to start rendered graph is

This is my code to build the pixi.js (Is the same in your example)

var NODE_WIDTH = 10;

module.exports = function (graph, layout) {
  var width = window.innerWidth,
      height = window.innerHeight;

  var stage = new PIXI.Stage(0x000000, true);
  var renderer = PIXI.autoDetectRenderer(width, height, null, false, true);
  renderer.view.style.display = 'block';
  document.body.appendChild(renderer.view);

  var graphics = new PIXI.Graphics();
  graphics.position.x = width/2;
  graphics.position.y = height/2;
  graphics.scale.x = 0.4;
  graphics.scale.y = 0.4;
  stage.addChild(graphics);

  // Default callbacks to build/render nodes
  var nodeUIBuilder = defaultCreateNodeUI,
      nodeRenderer  = defaultNodeRenderer,
      linkUIBuilder = defaultCreateLinkUI,
      linkRenderer  = defaultLinkRenderer;

  // Storage for UI of nodes/links:
  var nodeUI = {}, linkUI = {};

  graph.forEachNode(initNode);
  graph.forEachLink(initLink);

  listenToGraphEvents();

  return {
    renderFrame: function () {
      layout.step();
      drawGraph();
      renderer.render(stage);
    },

    /**
     * This callback creates new UI for a graph node. This becomes helpful
     * when you want to precalculate some properties, which otherwise could be
     * expensive during rendering frame.
     *
     * @callback createNodeUICallback
     * @param {object} node - graph node for which UI is required.
     * @returns {object} arbitrary object which will be later passed to renderNode
     */
    /**
     * This function allows clients to pass custon node UI creation callback
     * 
     * @param {createNodeUICallback} createNodeUICallback - The callback that 
     * creates new node UI
     * @returns {object} this for chaining.
     */
    createNodeUI : function (createNodeUICallback) {
      nodeUI = {};
      nodeUIBuilder = createNodeUICallback;
      graph.forEachNode(initNode);
      return this;
    },

    /**
     * This callback is called by pixiGraphics when it wants to render node on
     * a screen.
     *
     * @callback renderNodeCallback
     * @param {object} node - result of createNodeUICallback(). It contains anything
     * you'd need to render a node
     * @param {PIXI.Graphics} ctx - PIXI's rendering context.
     */
    /**
     * Allows clients to pass custom node rendering callback
     *
     * @param {renderNodeCallback} renderNodeCallback - Callback which renders
     * node.
     *
     * @returns {object} this for chaining.
     */
    renderNode: function (renderNodeCallback) {
      nodeRenderer = renderNodeCallback;
      return this;
    },

    /**
     * This callback creates new UI for a graph link. This becomes helpful
     * when you want to precalculate some properties, which otherwise could be
     * expensive during rendering frame.
     *
     * @callback createLinkUICallback
     * @param {object} link - graph link for which UI is required.
     * @returns {object} arbitrary object which will be later passed to renderNode
     */
    /**
     * This function allows clients to pass custon node UI creation callback
     * 
     * @param {createLinkUICallback} createLinkUICallback - The callback that
     * creates new link UI
     * @returns {object} this for chaining.
     */
    createLinkUI : function (createLinkUICallback) {
      linkUI = {};
      linkUIBuilder = createLinkUICallback;
      graph.forEachLink(initLink);
      return this;
    },

    /**
     * This callback is called by pixiGraphics when it wants to render link on
     * a screen.
     *
     * @callback renderLinkCallback
     * @param {object} link - result of createLinkUICallback(). It contains anything
     * you'd need to render a link
     * @param {PIXI.Graphics} ctx - PIXI's rendering context.
     */
    /**
     * Allows clients to pass custom link rendering callback
     *
     * @param {renderLinkCallback} renderLinkCallback - Callback which renders
     * link.
     *
     * @returns {object} this for chaining.
     */
    renderLink: function (renderLinkCallback) {
      linkRenderer = renderLinkCallback;
      return this;
    },

    domContainer: renderer.view,
    graphGraphics: graphics,
    stage: stage,
    getNodeAt: getNodeAt 
  };

  function drawGraph() {
    graphics.clear();

    Object.keys(linkUI).forEach(renderLink);
    Object.keys(nodeUI).forEach(renderNode);
  }

  function renderLink(linkId) {
    linkRenderer(linkUI[linkId], graphics);
  }

  function renderNode(nodeId) {
    nodeRenderer(nodeUI[nodeId], graphics);
  }

  function initNode(node) {
    var ui = nodeUIBuilder(node);
    // augment it with position data:
    ui.pos = layout.getNodePosition(node.id);
    // and store for subsequent use:
    nodeUI[node.id] = ui;
  }

  function initLink(link) {
    var ui = linkUIBuilder(link);
    ui.from = layout.getNodePosition(link.fromId);
    ui.to = layout.getNodePosition(link.toId);
    linkUI[link.id] = ui;
  }

  function defaultCreateNodeUI(node) {
    return {};
  }

  function defaultCreateLinkUI(link) {
    return {};
  }

  function defaultNodeRenderer(node) {
    var x = node.pos.x - NODE_WIDTH/2,
        y = node.pos.y - NODE_WIDTH/2;

    graphics.beginFill(0xFF3300);
    graphics.drawRect(x, y, NODE_WIDTH, NODE_WIDTH);
  }

  function defaultLinkRenderer(link) {
    graphics.lineStyle(1, 0xcccccc, 1);
    graphics.moveTo(link.from.x, link.from.y);
    graphics.lineTo(link.to.x, link.to.y);
  }

  function getNodeAt(x, y) {
    var half = NODE_WIDTH/2;
    // currently it's a linear search, but nothing stops us from refactoring
    // this into spatial lookup data structure in future:
    for (var nodeId in nodeUI) {
      if (nodeUI.hasOwnProperty(nodeId)) {
        var node = nodeUI[nodeId];
        var pos = node.pos;
        var width = node.width || NODE_WIDTH;
        var half = width/2;
        var insideNode = pos.x - half < x && x < pos.x + half &&
                         pos.y - half < y && y < pos.y + half;

        if (insideNode) {
          return graph.getNode(nodeId);
        }
      }
    }
  }

  function listenToGraphEvents() {
    graph.on('changed', onGraphChanged);
  }

  function onGraphChanged(changes) {
      changes.forEach(function(change){
        if (change.changeType === 'add') {
            if (change.node) {
              initNode(change.node);
            }
            if (change.link) {
              initLink(change.link);
            }
          } else if (change.changeType === 'remove') {
            if (change.node) {
              delete nodeUI[change.node.id];
            }
            if (change.link) {
              delete linkUI[change.link.id];
            }
          }
      });
  }
}

Hello Anvaka!

I would like to make a webgl version (with canvas fallback) of my work built upon SVG with vivagraph - [http://nifty.works/insight/4xJWNMLgg2aL16y9/dna#topic-article]

Could you help choosing a pixi or three, and could you help understanding difference with webgl module in vivagraph ?

I am looking at a library that:

• is supported on mobile apps, too
• eventually can be embedded into mobile apps fraweworks (ionic or similar)
• can handle tappable events on nodes (eventually on links?)
• can modify appearance of nodes with images and links - including properties of size, thick, color
• possibly have a "simpler" learning curve

Could you help in making a choice?

Vis.js has one but it seems very "buggy".
http://visjs.org/examples/network/18_fully_random_nodes_clustering.html

Loving the Library but, are you planning to create a Central Wiki in which the Library and its submodules are listed and well documented?

Here's the thing:

Downloaded/cloned ngraph master branch.
copied "ngraph-master/examples/pixi.js/03 - Zoom And Pan" folder into another folder.
renamed it zoompan.
ran:
npm install

This is what happened:

Here's node and npm versions:

Hi, I am looking at:
https://bl.ocks.org/mattkohl/146d301c0fc20d89d85880df537de7b0

at the moment in ngraph is possibile to have two link between two nodes, with an id of the edge like "from.id-to.id" corresponding to the id of vertexes.

Have you considered the possibility to pass custom IDs , so that is possible to have multiple types of links?

Is there some module that make it possible to render graphs (as svg image for example) server side (from node) ?

Hey again! I've been playing with ngraph a bit and I'm currently trying out the fromJSON package. This is the JSON data I'm retrieving:

{
    "nodes": [
        {
            "id": "BBA1"
       },
        {
            "id": "Bank and stock"
        },
        {
            "id": "Economic history"
        },
        {
            "id": "Principles of law"
        },
        {
            "id": "Statistics I"
        },
        {
            "id": "Managerial economics B"
        },
        { 
            "id": "Mathematics I-B"
        },
        {
            "id": "Accounting B"
        }
   ],
    "links": [
        {
            "toId": "Bank and stock",
           "fromId": "BBA1"
        },
        {
            "toId": "Economic history",
            "fromId": "BBA1"
        },
        {
            "toId": "Principles of law",
            "fromId": "BBA1"
        },
        {
            "toId": "Statistics I",
            "fromId": "BBA1"
        },
        {
            "toId": "Managerial economics B",
            "fromId": "BBA1"
        },
       {
            "toId": "Mathematics I-B",
            "fromId": "BBA1"
        },
        {
            "toId": "Accounting B",
            "fromId": "BBA1"
        }
    ]
}

My test.html file is this:

<script src="/static/node_modules/ngraph.fabric/node_modules/fabric/dist/fabric.js"></script>
<script src="/static/bundle.js" type="application/x-javascript"></script>
<title>Ngraph testing</title>
<style>
    body { height: 100%; width: 100%; position: absolute; overflow: hidden; margin: 0; padding: 0;}
</style>

</head>
<body onload="ngraph.main()">

</body>
</html>

And this is my index.js:

module.exports.main = function () {
    var jsonString = $.ajax({
            'url': '/coursedata',
            'datatype': 'json',
            'type': 'GET',
            'data': {
                'path': '-BBA1-Semester 2',
            }
        })

    var fromJSON = require('ngraph.fromjson')
    var graph = fromJSON(jsonString)
    var createFabric = require('ngraph.fabric')
    var fabricGraphics = createFabric(graph);

    fabricGraphics.run();

}

As I am passing my nodes and links, I have no clue what's causing this error :p many thanks in advance for reading and replying!

Hi,
Again nice work (like Vivagraph) !
Have you an example to show how events works in with threejs render like with for Vivagraph?
Thanks :)

Very nice you show how to do offline layout for large graphs. Have not been able to find example demonstrating how to use this data and render in browser (ideally using three.js). Thanks.

Is there documentation or an example somewhere that demonstrates the following:
set node coordinate
set node dimensions, color, & opacity
pan programmatically
animate programmatically
set text over node

?

Hi there,

I'm trying out your ngraph framework and looking into the Pixi example because I need to display thousands of nodes and relationships which seems to work well with a force directed layout using Pixi.

I seem to remember seeing a comment from you somewhere that it was not possible to render text. Do you have a recommendation on how to build on Pixi to add text labels, or popup on hover and such?

Jun

Just ran across ngraph, looks pretty nice. Was curious how difficult it would be to get D3 rendering support in? Already use D3 for a lot of other things in my app and don't really want to introduce yet another visualization library.

If you have pointers I'd even get started on the work when I have free time (may be a while honestly).

Hello,

I would like to propose a suggestion for the TODO list.
The vivagraph guide to use the library is very neat, I miss a step by step guide for ngraph that shows, without browserify but with 'vanilla approach', how to use ngraph modules - I would like to better understand how layout computation is de-coupled from rendering (done with viva, or three, or pixi... ).

I also would find useful an example to combine the library (or some of its modules) with a reactive component - maybe vue.js, that looks light and easier to be learnt.

Graph object can be already used to persist data and render the graph in other ways (not necessarily as a force-directed graph), but I think it would be helpful an example that shows how to extend some of its capabilities.
As example, observers on data binded to nodes or links, or to the graph on the whole - imagine you want to populate the graph dinamically (fetch new nodes from servers).

Can this library can render Gephi network files?
http://gephi.org

Hi,

Some links tend to not be displayed depending on the camera position.
The problem is visible on your demo when you zoom in a lot or in the picture.

Have you any idea to solved it ?

When an edge is added, non-existing nodes are added automatically.

However, sometimes the edges of a node are added while the other nodes, including those to be connected, haven't been added yet. Therefore it would be very helpful if those edges were added without creating non-existing nodes.
Even better: An event is emitted when those yet non-existing nodes are queries, so they can be dynamically added (e.g. by network request).

Hi Andrei,

I really like your idea to drive visualizations from the command line.
But I am missing something to get started. In the readme, there is something written about the ngraph command.

Where can I find that command? What is the source code repo to see how it works? How do i Install that ngraph package?

This repo seems more like a wrapper repo for the project, if I understand correctly.

Thanks a lot!

Hi,

I would like to to switch from vivagraph SVG rendering to webGL based on PIXI.
I am looking at the PIXI examples, but struggle to understand how the logic works respect to vivagraph.

In the PIXI example, you define a getNodeAt function on stage, to return the node at coordinates x,y.
But like that the stage is bounded to graphics, and while I can interact with coordinates, I can't interact with the graph object. So I don't know how to call graph.addNodes or createNodeUI to add new graphs elements.

So I tried to add a native PIXI event to the sprite of nodes themselves, when I initialise a new node - http://pixijs.download/v4.3.4/docs/PIXI.interaction.InteractionManager.html#event:click -
like:

function initNode(node) {

var bunny = new PIXI.Sprite.fromImage('2.png');
    bunny.interactive = true;
    bunny.on('tap',  function(e) {
        alert("tap!!");
    });
 
    graphics.addChild(bunny);

}

But, despite I don't see any error, it does not work and the event does not fire.
Only stage.movedown seems to work.

Instead, with Viva it was really great API, for I could just swtich the renderer engine between svg and webgl.

Could you show examples on how to handle adding or removing graph elements in pixigraphics ?
Can pixi rendering be integrated in vivagraph , instead of WebGL rendering ? Could someone show an example?
That would be ideal, for PIXI can already handle well all the webgl part.

http://jsperf.com/quadtest

Hi ,

npm start not building bundle.js because package.json is missing.
Can you help ?

Best regards
robert

Hi,
I am trying to play around with UX for graphs in webgl, but with images as textures.

I am not having still good results (as a number of nodes and links opened before I see cluttering, it is <= than SVG, so there is room for improving).

In SVG, I was able to play around with precompute() and postcompute() functions, pausing rendering ad hoc.

Does a layout function return a variable when graph is relaxed ?
As example, settings with theta = 0 will allow reduce number of computations, and I would like to pause rendering each time the graph is relaxed.

Hey Andrei!

I've been playing around with ngraph for a while but we've got some issues with the physics. I read the issues on VivaGraphJS and you mentioned pinning the center node but I haven't managed to recreate it. There are two things that we would really like to change: the graph moving outside of the screen and the "wobble". I found and looked at ngraph.forcelayout as well as ngraph.physics.simulator, but trying to include it in my script with the example code provided didn't do anything. https://dpaste.de/wdQ6 this is my script, everything has the proper path provided this time :p for the physics numbers, I just changed them a bit from what's on ngraph.forcelayout but I didn't see any changes. Again, many thanks for your help and I love the framework you've created here!

I'm not exactly sure where to report this, but I'm getting an error when trying to merge with ngraph.merge.

The problem happens when I both arguments of merge have a container. Since the container is an object, it gets into the recursion. The problem is, this is infinity due to self reference in the container.

I worked it around by adding an extra condition:

else if (optionsValueType === 'object' && key != 'container')

This works for what I'm doing, but basically any object with a pointer to self would get into an infinity loop.

fyi: npmjs-cf/meta#8

Hey guys, I'm having a TypeError when trying to use ngraph.fabric. It is in simpleLine.js and it can't find the "fabric" module. However, when I run a node shell it can find the package just fine. I've tried pretty much everything that I could think of (uninstalling, reinstalling, reinstalling globally, putting my files in the node_modules folder) and nothing worked. Does anyone know where the issue is? Many thanks in advance!

http://imgur.com/2hXbIyY is the full stack trace

Hello, I was wondering if you could shed some light on how you zoom to a specific point in your pixi demo. I am trying to achieve the same effect however when I try to run your code it doesn't work. What exactly do those transforms do when you zoom in?'

Thanks

Didn't find it in documentation and code. I use ngraph with fabric.

First of all: amazing work!

here you say that the ngraph generated from a .gexf file could also easily be rendered by using e.g. ngraph.three as the renderer. I changed ngraph.pixi to ngraph.three, but it doesn't seem to work. Could you please help?

Most of the examples I've seen have been for undirected graphs. Can ngraph draw directed graphs, possibly with self loops, and/or multiple edges? If arrows are difficult, what about tapered edges as in: http://tex.stackexchange.com/questions/100193/drawing-tapered-edges-in-graph

my graph in gexf file with 20,000 node and 590,000 edges. how i can render this gexf graph?

Please help me.
The following serialized data can be loaded with loadFromJSON()
{"objects":[{"type":"image","originX":"center","originY":"center","left":72.5,"top":91.5,"width":658,"height":982,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":0.22,"scaleY":0.22,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"crossOrigin":"","cropX":0,"cropY":0,"src":"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=361494400,3587695219&fm=27&gp=0.jpg","filters":[]}]}

but the following serialized data cannot be loaded with loadFromJSON()
{"objects":[{"type":"image","originX":"center","originY":"center","left":96.5,"top":186.5,"width":658,"height":982,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":0.46,"scaleY":0.46,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"crossOrigin":"","cropX":0,"cropY":0,"src":"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=361494400,3587695219&fm=27&gp=0.jpg","filters":[{"type":"Saturation","saturation":"0.913448"}]}]}

Here is my code

var canvas = new fabric.Canvas('c');
canvas.setWidth(500)
canvas.setHeight(500)

canvas.loadFromJSON('{"objects":[{"type":"image","originX":"center","originY":"center","left":96.5,"top":186.5,"width":658,"height":982,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":0.46,"scaleY":0.46,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"crossOrigin":"","cropX":0,"cropY":0,"src":"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=361494400,3587695219&fm=27&gp=0.jpg","filters":[{"type":"Saturation","saturation":"0.913448"}]}]}', canvas.renderAll.bind(canvas)); 

How do I load filtered data?

I updated the pixi.js library to the latest version, and the "03 - Zoom and Pan" example doesn't work anymore.

In "ngraph-master/examples/pixi.js/03 - Zoom And Pan"
In index.html
I replaced

with

I saw you mentioned in another issue that you were planning to move some functions to web workers in one of the other threads. This seems especially important for the pixi.js examples where layout is currently being done in the render loop.

I don't know if you've tried this yet, but I did a quick test of putting the layout function in a web worker. I don't have any performance comparisons, but I'm doing some more graphically intensive stuff in Pixi.js so I'm getting about 18 fps on the render loop. The layout loop on the worker is running at around 40fps. This ensures a much quicker (and consistent) layout resolution time while still keeping a reasonably smooth graphics performance. Its working well enough that I thought it was worth posting an issue here. I can extract and share the relevant code if that's helpful.