Add animations to the edges, like circles travelling over them or icons.

[anzeljg]

Would it be possible (is it already) to create a computer network (using appropriate images for nodes: e.g. computer, router, switch, firewall, internet, etc.) and then show the animation how a data packet travels through the network. E.g. data packet (could be the circle) going in animated way along the edges from node1 (e.g. computer) to node2 (e.g. switch) to node3 (e.g. firewall) to node4 (e.g. Internet).

I know that it is possible to use images/icon and I've successfully created a network using OSA icon library (http://www.opensecurityarchitecture.org/cms/library/icon-library) based on Tango icons. All I really want to know is, if there is a way to simulate network traffic in an animated way?

Kind regards, Gregor

[AlexDM0]

Hi,

We had something like this in the chap links library (the precursor of vis.js). We have not needed this yet internally but it could be a cool addition. The easy fix is to highlight edges and use arrow styles to show traffic. We don't have the animations you're looking for at the moment but we're always open to pull requests :)

Cheers

[anzeljg]

How can I dynamically highlight/change edges after I have created the network graph?

[AlexDM0]

Use the vis.DataSet for your data. You can then use the update method on the dataset to update the settings. It's used in a lot of our examples and it's documented on our website.

Have fun!

[AlexDM0]

Hi, is this still unresolved?

Cheers!

[anzeljg]

I managed to achieve what I wanted by using dynamic color change of the edges. Though it would be great if some sort of animation could be used...

[AlexDM0]

Hi,

Over the last year a lot of feature requests have been made. We have just introduced our new website which has a list of the requested features. We have placed this request on that list.

The list can be found here: http://visjs.org/featureRequests.html

An explaination of the new system can be found here: http://visjs.org/blog.html#New\ website\ for\ vis.js!

I would like to stress that this does not mean we abandon this request. Discussion here will continue if needed on this feature but we will close it to keep our Github issue page more of a bug-todo list.

Future feature requests will still be made here and then added to the website by us.

Regards,

Alex

[anzeljg]

Thank you for informing me about that, but on that web page my issue #507is linked to issue #530.

Kind regards, Gregor

Sent from my iPad

On 09 Jan 2015, at 15:24, Alex notifications@github.com wrote:

Hi,

Over the last year a lot of feature requests have been made. We have just introduced our new website which has a list of the requested features. We have placed this request on that list.

The list can be found here: http://visjs.org/featureRequests.html

An explaination of the new system can be found here: http://visjs.org/blog.html#New\ website\ for\ vis.js!

I would like to stress that this does not mean we abandon this request. Discussion here will continue if needed on this feature but we will close it to keep our Github issue page more of a bug-todo list.

Future feature requests will still be made here and then added to the website by us.

Regards,

Alex

— Reply to this email directly or view it on GitHub.

[AlexDM0]

My bad, i'll fix it later today. Thanks for letting me know!

Regards

[AlexDM0]

fixed it :)

[edvineshagh]

Hi,

I added a proptype method that animates the network traffic; but, I don't know where to upload the draft version of the module. It isn't really ready to integrate with vis.

The module has pre/post frame and animation handler. For example, I used pre/post animation to update the node value based on traffic size. The size of the circle is determined by the traffic size from each node.

I have two issues with this implementation:

• it does not render well in IE
• it does not use vis internal animation engine

Despite these limitations; someone may still find it useful; or want to add/update to it. Where can I post this draft version of the code:

Here is the usage:

<script type="text/javascript" src="./inc/vis.js"></script>
<script type="text/javascript" src="./inc/vis.animateTraffic.js"></script>
<script type="text/javascript">
  var myNodes = new vis.DataSet([  
        {id: 1, label: 'Node 1'}, 
        {id: 2, label: 'Node 2'}, 
        {id: 3, label: 'Node 3'} ]);
  var myEdges = new vis.DataSet([
        {id:1, from:1, to:2}, 
        {id:2, from:2, to:1},
        {id:3, from:2, to:3},
        {id:4, from:3, to:1}]);

  var container = document.getElementById('mynetwork');

  var data = {nodes: myNodes, edges: myEdges};
  var options = {};
  var network = new vis.Network(container, data, options);
   /////////////////////////////////////////////////////
   //
   function clickMe() {
    // **************************************
    // Here is the code for animation
    //
    network.animateTraffic([
        {edge:1},                           // specify forward animation with traffic size=1
        {edge:2, trafficSize:2},            // specify the size of traffic (circle animated)
        {edge:3, trafficSize:5, isBackward: true}   // animates the traffic backward on the edge
    ]);
  }
</script>
...
<body>
<a href="javacript:clickMe()">click me</a>
...

[anzeljg]

This looks great...

[AlexDM0]

Hi,

This looks interesting, which version of vis does it use? It could use the renderEvents of v4 to make use of the vis renderer. Why does this not work on IE? In an unpolished form we cannot add it to vis.. Maybe we could make another event that would draw on top of edges but behind nodes.

Regards,

Alex

[edvineshagh]

Because I'm not very familiar with internals of vis, I tried to stay away from modifying it; I took the less obtrusive approach by adding a canvas on top of the Network. My canvas has the following pseudo animation. In IE, the traffic appears to be shifted (though the scaling is right).

    var s = this.thisNetwork.getScale();
    var t = this.thisNetwork.body.view.translation; 

    this.trafficCanvasCtx.translate(t.x, t.y);
    this.trafficCanvasCtx.scale(s, s);
    ...
    clearAnimationCanvas();
    for each edge {
          var p = edge.edgeType.getPoint(offset);
         // drawCircle(p)
     }
     // setTimeout for above block

Animating the traffic on top of the edges and below the nodes is the way to go.

I used vis version 4.3.0 for this implementation; but, I don't see a "renderEvents" object in the source.

[anzeljg]

Is it possible for the traffic to be sequential: circle traveling over the first edge, then over the second edge etc? Now the circle travel over edges at the same time...

[edvineshagh]

I didn't account for that; but, it can be accommodated with existing implementation using post event handler. Something like:

var sequentialEdgesToAnimate= [
       // forward sequence
       {edge:1}, {edge:3}, {edge:4}, 
       // backwards sequence
       {edge:4, isBackward: true}, 
       {edge:3, isBackward: true}, 
       {edge:2}
];
function animate(startingEdgeNum) {

    network.animateTraffic(
                        /* first edge to start animating */
                        sequentialEdgesToAnimate [startingEdgeNum] ,
                        /* onPreAnimationHandler*/
                        null, 
                        /*onPreAnimateFrameHandler*/
                        null , 
                       /*onPostAnimateFrameHandler*/ 
                        null ,

                        /* onPostAnimationHandler */
                        function(edgesTrafficList) { 
                              if (++ startingEdgeNum < sequentialEdgesToAnimate.length) {
                                   animate(startingEdgeNum); 
                              }
                       }
    );
}
...
<body>
<a href="javacript:animate(0)">click me</a>

[AlexDM0]

Take a look at this example.

http://visjs.org/examples/network/events/renderEvents.html

You could use the methods in the edge classes to get a position along the edge.

The new modular setup of the vis network in v4 should be relatively easy to extend to make animation like this possible.

Basic outline:

1) we'd introduce a new event between the beforeDrawing and afterDrawing to draw. 2) we'd use the methods of the edge to find the coordinates of the position on the edge. 3) we could make a callback function to draw the item or use the node system already available. In v4 we have the physics toggle that can be used for this to disable all physics simulation interaction. 4) to allow animation after physics stabilisation you can use the events in the renderer to request a render loop for this.

It's all nice an decoupled with the events as internal messaging and the body object for essential data.

Regards,

Alex

On 23 jun. 2015, at 18:37, edvineshagh notifications@github.com wrote:

Because I'm not very familiar with internals of vis, I tried to stay away from modifying it; I took the less obtrusive approach by adding a canvas on top of the Network. My canvas has the following pseudo animation. In IE, the traffic appears to be shifted (though the scaling is right).

var s = this.thisNetwork.getScale();
var t = this.thisNetwork.body.view.translation; 

this.trafficCanvasCtx.translate(t.x, t.y);
this.trafficCanvasCtx.scale(s, s);
...

for each edge {
      var p = edge.edgeType.getPoint(offset);
     // drawCircle(p)
 }
 // setTimeout for above block

Animating the traffic on top of the edges and below the nodes is the way to go.

I used vis version 4.3.0 for this implementation; but, I don't see a "renderEvents" object in the source.

— Reply to this email directly or view it on GitHub.

[cetso]

Dear @edvineshagh, could you upload vis.animateTraffic.js anyway?

[edvineshagh]

Hi Cesto, Here is the attached file...

vis.animateTraffic.js.txt

[cetso]

Thanks! @edvineshagh

[smaldini]

Hey there, any way to track the progress of that feature request ?

[AlexDM0]

Nope. We're swamped and not working on it at the moment. There is no progress on this feature so far. Feel free take this up and make a pull req :)

[smaldini]

I would but I haven't touched JS enough for a long time to propose anything of quality :( For the context, we were evaluating vis for http://github.com/reactor/reactor (which is also behind schedule) and the latest Vis versions are greater and greater, kudos to the Vis team !

[sebastianservat]

Hi Alex,

Could you pls point me to the docs which explain how to get the x/y positions of edges? Thanks!

[AlexDM0]

Hi,

Thats not available in the public api so it's not in the docs. You'll have to go into the source.

Regards

[aanm]

@edvineshagh Thanks for the script. However, on my screen the animation doesn't work. Maybe because of the screen resolution. The animation is on one place and the graph on the other.

Is this an easy fix? Thanks

[edvineshagh]

Hi aanm, Since it has been awhile I touched that code, the issue could be 1) browser compatibility, or 2) the script may not be in sync with the latest version of the library. I'll try to take a look this week (but, make no promises).

[aanm]

@edvineshagh Thanks for that.

JavaScript is not my strong but I changed line 115 and 116 from this:

                this.trafficCanvas.width = frame.canvas.width;
                this.trafficCanvas.height = frame.canvas.height;

to this:

                this.trafficCanvas.width = frame.canvas.clientWidth;
                this.trafficCanvas.height = frame.canvas.clientHeight;

and worked. I'm not sure if it is the proper fix or not though.

[mojoaxel]

I'm reopening this because there is obviously some interest on this.

[mojoaxel]

@edvineshagh It really would help if we could get a complete example running (e.g. on jsbin) to see the current state of this and to help improving it. I'm not sure if this kind of animation should be part of the vis.js core but we could create an interesting example out of this. I'm willing to help on that but need a base to start on.

[tt52743]

+1

[artipixel]

+1

[clojj]

+1

[fabric-io-rodrigues]

I think animation is very important, do you know when it will be implemented?

[wimrijnders]

Hi @FabricioRHS , I assume this is a request to reactivate the issue, so I will.

I have no idea when it will be implemented, this issue is not even on my radar. I'm currently the only developer regularly active with the network code, and there are more pressing issues than this one. Feel free to help!

[fabric-io-rodrigues]

Hi @wimrijnders, thanks for answering. Congratulations on your work. :-) You're right, this activity is not a high priority. I am available to help in whatever you need. Sorry my english, I am Brazilian. I created a small animation using the 'beforeDrawing' event.

But it needed animation for energy flow. I'm still investigating.

Thank you all for the tips. Especially the great work of @wimrijnders.

[wimrijnders]

@FabricioRHS That animation is actually quite lovely. This is all vis.network? I'm looking forward to what you will make with this.

[fabric-io-rodrigues]

Exact @wimrijnders, only VisJS.network + basic scripts (Bootstrap / Jquery). It will be used in project (project B) that builds a city's energy grid. Displaying power substations and transmission lines. I've worked on a similar project (project A) with georeferenced data using Leaflet + OpenStreetMap.

However, in this new project (project B), we will not have georeferenced data. Only to view the power grid (network).

[matanox]

This animation is cool, but the tweening is very unsmooth (Chrome, latest version, if it matters). With d3 these things were typically really tweened smoothly, may need to borrow from its tweening engine there or intertwine d3 into the same page. Tweening is a serious matter :face_with_head_bandage:

[robclouth]

@FabricioRHS Could you please share the animation code you used? How did you animate the beginDrawing event?

[vspinu]

There is an implementation of edge animation posted in #3300 along some other useful dom overlay techniques.

[fabric-io-rodrigues]

@robclouth Of course I can share. The following example (using event beforeDrawing):

Live sample: http://jsfiddle.net/fabriciorhs/ezvxcboh/

Below is the code used for animation of Nodes:

network.on("beforeDrawing", function(ctx) {
  if (animateRadius) {
      var inode;
      var nodePosition = network.getPositions();
      var arrayLength = nodes.length;
      for (inode = 0; inode < arrayLength; inode++) {
          var colorCircle = 'rgba(0, 255, 0, 0.8)';
          var colorBorder = 'rgba(0, 255, 0, 0.2)';
          ctx.strokeStyle = colorCircle;
          ctx.fillStyle = colorBorder;
          var radius = Math.abs(50 * Math.sin(currentRadius + inode / 50.0));
          ctx.circle(nodePosition[nodes[inode].id].x, nodePosition[nodes[inode].id].y, radius);
          ctx.fill();
          ctx.stroke();
      }
  };
});

[bgaskin]

edvineshagh's code above i seemed to have fixed by altering vis.js function _determinePixelRatio() so that it always returns 1. It now animates on the arcs in i.e., chrome and firefox

in vis.js looks like this

value: function _determinePixelRatio() {
        var ctx = this.getContext();
        if (ctx === undefined) {
          throw "Could not get canvax context";
        }
        return 1;
        //return (window.devicePixelRatio || 1) / (ctx.webkitBackingStorePixelRatio || //ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || //ctx.backingStorePixelRatio || 1);
      }

[Jensxy]

Is it possible to do something like this by using the visNetwork package in R?