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