anvaka/ngraph

Beautiful Graphs

ngraph's Issues

Directed Graphs, Multiple Edges, Self Loops

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

npmjs.cf package mirror has been deprecated, and will be discontinued

fyi: npmjs-cf/meta#8

ngraph.merge issue

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.

Gephi format

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

Is there any central documentation?

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

Example of rendering from offline generated layout

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.

3D : Some links are not display

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 ?

How difficult to get D3 support?

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).

npm install failed on a pixi.js example

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:

add dinamically new nodes : which API for PIXI graphics VS vivagraph?

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.

Zooming pixi.js example help

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

package.json is missing

Hi ,

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

Best regards
robert

gexf file from gephi to 3d graph?

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?

large scale graph

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

How do I load filtered data?

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?

performance consideration for the quads sparse array used in the quadtreebh

http://jsperf.com/quadtest

Examples (TODO suggestions) to combine modules with reactive components

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).

Missing node to the graph whit pixi.js

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];
            }
          }
      });
  }
}

How to disable physics simulation?

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

detecting when layout stop computation (find optimal)

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.

"Cannot read property 'util' of undefined", fabric module not found

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

Disabling physics

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!

Pixi or Three js ?

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?

Add Clustering Node Based on Zoom demo

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

Difference with Sigma.js

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?

Move layout functions to Web Worker for pixi.js examples

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.

Rendering Text on Pixi Graph

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

Example for events with ngraph.three

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

"Cannot create graph without links and nodes"

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/jquery-1.11.0.min.js"></script>

<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!

Render graph server (node) side

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

Lazily add edges

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).

Improvement: handling multiple links between nodes

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?

Demonstration of basic node manipulation operations

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

?

Cannot read property 'antialias' of null (pixi.js-v4.2.2-dev-build)

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

<script src="../lib/pixi.dev.js"></script>.

with

<script src="../lib/pixi-v4.2.2-dev.js"></script>

Where is the ngraph command?

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!