cytoscape show traffic between nodes along an animated path









up vote
3
down vote

favorite












I need to show things moving between nodes along their connection paths similar to this project. I haven't been able to find any examples of it in cytoscape, but I have used cytoscape in the past and prefer to keep using it for this as well. I would appreciate recommendations on how to approach this problem.










share|improve this question



























    up vote
    3
    down vote

    favorite












    I need to show things moving between nodes along their connection paths similar to this project. I haven't been able to find any examples of it in cytoscape, but I have used cytoscape in the past and prefer to keep using it for this as well. I would appreciate recommendations on how to approach this problem.










    share|improve this question

























      up vote
      3
      down vote

      favorite









      up vote
      3
      down vote

      favorite











      I need to show things moving between nodes along their connection paths similar to this project. I haven't been able to find any examples of it in cytoscape, but I have used cytoscape in the past and prefer to keep using it for this as well. I would appreciate recommendations on how to approach this problem.










      share|improve this question















      I need to show things moving between nodes along their connection paths similar to this project. I haven't been able to find any examples of it in cytoscape, but I have used cytoscape in the past and prefer to keep using it for this as well. I would appreciate recommendations on how to approach this problem.







      cytoscape.js






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited 2 days ago









      AlexanderPico

      1155




      1155










      asked Nov 9 at 23:37









      Anthony Aragues

      232




      232






















          1 Answer
          1






          active

          oldest

          votes

















          up vote
          0
          down vote



          accepted










          You've got a few options...




          1. The easiest is the Marquee visual style. It produces a "marching ants" illusion in the direction of directed edges. Simply to the Styles tab in the Control Panel and select the "Marquee" style. In the EDGE tab, you can choose from 3 different Marquee Line Types. You could imagine mapping these 3 line types to 3 categories (or bins) of traffic density, for example. Or you could use color, thickness and/or transparency in combination with a marquee style to represent traffic density. You can see an example here:



            • https://youtu.be/MF0zsxEPoPc?t=44



          2. There's also an app for animation! This takes the approach of interpolating any visual style (including position and existence) between any set of key frames you provide. So, for example, you would have a start and finish frame and then CyAnimator would make a movie file for you:



            • http://apps.cytoscape.org/apps/cyanimator



          3. And yet another completely different approach: with the scripting capabilities of Cytoscape, you can pretty much do whatever you want. The Unit tests for the RCy3 package, for example, ends up being an almost psychedelic display of data vis potential (and the unit tests aren't even at full coverage, shame). So you could direct your own animations in real time with a bit of scripting in R or Python. Here's the RCy3 unit test demo and links to the scripting libs:




            • https://www.youtube.com/watch?v=IXqbdlUnzUE&t=1s (caution: flashing graphics)

            • https://bioconductor.org/packages/release/bioc/html/RCy3.html

            • https://py2cytoscape.readthedocs.io/en/latest/






          share|improve this answer




















          • thanks, this is all very thorough and makes sense... my mistake is that I didnt not mention I was using cytoscape.js
            – Anthony Aragues
            Nov 16 at 21:20










          • Ah, lol. Well that changes everything. I updated the tag to make that clearer for others. I'll point Max to this question and see if he has suggestions...
            – AlexanderPico
            Nov 17 at 1:03










          Your Answer






          StackExchange.ifUsing("editor", function ()
          StackExchange.using("externalEditor", function ()
          StackExchange.using("snippets", function ()
          StackExchange.snippets.init();
          );
          );
          , "code-snippets");

          StackExchange.ready(function()
          var channelOptions =
          tags: "".split(" "),
          id: "1"
          ;
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function()
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled)
          StackExchange.using("snippets", function()
          createEditor();
          );

          else
          createEditor();

          );

          function createEditor()
          StackExchange.prepareEditor(
          heartbeatType: 'answer',
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader:
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          ,
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          );



          );













           

          draft saved


          draft discarded


















          StackExchange.ready(
          function ()
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53234617%2fcytoscape-show-traffic-between-nodes-along-an-animated-path%23new-answer', 'question_page');

          );

          Post as a guest















          Required, but never shown

























          1 Answer
          1






          active

          oldest

          votes








          1 Answer
          1






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes








          up vote
          0
          down vote



          accepted










          You've got a few options...




          1. The easiest is the Marquee visual style. It produces a "marching ants" illusion in the direction of directed edges. Simply to the Styles tab in the Control Panel and select the "Marquee" style. In the EDGE tab, you can choose from 3 different Marquee Line Types. You could imagine mapping these 3 line types to 3 categories (or bins) of traffic density, for example. Or you could use color, thickness and/or transparency in combination with a marquee style to represent traffic density. You can see an example here:



            • https://youtu.be/MF0zsxEPoPc?t=44



          2. There's also an app for animation! This takes the approach of interpolating any visual style (including position and existence) between any set of key frames you provide. So, for example, you would have a start and finish frame and then CyAnimator would make a movie file for you:



            • http://apps.cytoscape.org/apps/cyanimator



          3. And yet another completely different approach: with the scripting capabilities of Cytoscape, you can pretty much do whatever you want. The Unit tests for the RCy3 package, for example, ends up being an almost psychedelic display of data vis potential (and the unit tests aren't even at full coverage, shame). So you could direct your own animations in real time with a bit of scripting in R or Python. Here's the RCy3 unit test demo and links to the scripting libs:




            • https://www.youtube.com/watch?v=IXqbdlUnzUE&t=1s (caution: flashing graphics)

            • https://bioconductor.org/packages/release/bioc/html/RCy3.html

            • https://py2cytoscape.readthedocs.io/en/latest/






          share|improve this answer




















          • thanks, this is all very thorough and makes sense... my mistake is that I didnt not mention I was using cytoscape.js
            – Anthony Aragues
            Nov 16 at 21:20










          • Ah, lol. Well that changes everything. I updated the tag to make that clearer for others. I'll point Max to this question and see if he has suggestions...
            – AlexanderPico
            Nov 17 at 1:03














          up vote
          0
          down vote



          accepted










          You've got a few options...




          1. The easiest is the Marquee visual style. It produces a "marching ants" illusion in the direction of directed edges. Simply to the Styles tab in the Control Panel and select the "Marquee" style. In the EDGE tab, you can choose from 3 different Marquee Line Types. You could imagine mapping these 3 line types to 3 categories (or bins) of traffic density, for example. Or you could use color, thickness and/or transparency in combination with a marquee style to represent traffic density. You can see an example here:



            • https://youtu.be/MF0zsxEPoPc?t=44



          2. There's also an app for animation! This takes the approach of interpolating any visual style (including position and existence) between any set of key frames you provide. So, for example, you would have a start and finish frame and then CyAnimator would make a movie file for you:



            • http://apps.cytoscape.org/apps/cyanimator



          3. And yet another completely different approach: with the scripting capabilities of Cytoscape, you can pretty much do whatever you want. The Unit tests for the RCy3 package, for example, ends up being an almost psychedelic display of data vis potential (and the unit tests aren't even at full coverage, shame). So you could direct your own animations in real time with a bit of scripting in R or Python. Here's the RCy3 unit test demo and links to the scripting libs:




            • https://www.youtube.com/watch?v=IXqbdlUnzUE&t=1s (caution: flashing graphics)

            • https://bioconductor.org/packages/release/bioc/html/RCy3.html

            • https://py2cytoscape.readthedocs.io/en/latest/






          share|improve this answer




















          • thanks, this is all very thorough and makes sense... my mistake is that I didnt not mention I was using cytoscape.js
            – Anthony Aragues
            Nov 16 at 21:20










          • Ah, lol. Well that changes everything. I updated the tag to make that clearer for others. I'll point Max to this question and see if he has suggestions...
            – AlexanderPico
            Nov 17 at 1:03












          up vote
          0
          down vote



          accepted







          up vote
          0
          down vote



          accepted






          You've got a few options...




          1. The easiest is the Marquee visual style. It produces a "marching ants" illusion in the direction of directed edges. Simply to the Styles tab in the Control Panel and select the "Marquee" style. In the EDGE tab, you can choose from 3 different Marquee Line Types. You could imagine mapping these 3 line types to 3 categories (or bins) of traffic density, for example. Or you could use color, thickness and/or transparency in combination with a marquee style to represent traffic density. You can see an example here:



            • https://youtu.be/MF0zsxEPoPc?t=44



          2. There's also an app for animation! This takes the approach of interpolating any visual style (including position and existence) between any set of key frames you provide. So, for example, you would have a start and finish frame and then CyAnimator would make a movie file for you:



            • http://apps.cytoscape.org/apps/cyanimator



          3. And yet another completely different approach: with the scripting capabilities of Cytoscape, you can pretty much do whatever you want. The Unit tests for the RCy3 package, for example, ends up being an almost psychedelic display of data vis potential (and the unit tests aren't even at full coverage, shame). So you could direct your own animations in real time with a bit of scripting in R or Python. Here's the RCy3 unit test demo and links to the scripting libs:




            • https://www.youtube.com/watch?v=IXqbdlUnzUE&t=1s (caution: flashing graphics)

            • https://bioconductor.org/packages/release/bioc/html/RCy3.html

            • https://py2cytoscape.readthedocs.io/en/latest/






          share|improve this answer












          You've got a few options...




          1. The easiest is the Marquee visual style. It produces a "marching ants" illusion in the direction of directed edges. Simply to the Styles tab in the Control Panel and select the "Marquee" style. In the EDGE tab, you can choose from 3 different Marquee Line Types. You could imagine mapping these 3 line types to 3 categories (or bins) of traffic density, for example. Or you could use color, thickness and/or transparency in combination with a marquee style to represent traffic density. You can see an example here:



            • https://youtu.be/MF0zsxEPoPc?t=44



          2. There's also an app for animation! This takes the approach of interpolating any visual style (including position and existence) between any set of key frames you provide. So, for example, you would have a start and finish frame and then CyAnimator would make a movie file for you:



            • http://apps.cytoscape.org/apps/cyanimator



          3. And yet another completely different approach: with the scripting capabilities of Cytoscape, you can pretty much do whatever you want. The Unit tests for the RCy3 package, for example, ends up being an almost psychedelic display of data vis potential (and the unit tests aren't even at full coverage, shame). So you could direct your own animations in real time with a bit of scripting in R or Python. Here's the RCy3 unit test demo and links to the scripting libs:




            • https://www.youtube.com/watch?v=IXqbdlUnzUE&t=1s (caution: flashing graphics)

            • https://bioconductor.org/packages/release/bioc/html/RCy3.html

            • https://py2cytoscape.readthedocs.io/en/latest/







          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Nov 15 at 20:50









          AlexanderPico

          1155




          1155











          • thanks, this is all very thorough and makes sense... my mistake is that I didnt not mention I was using cytoscape.js
            – Anthony Aragues
            Nov 16 at 21:20










          • Ah, lol. Well that changes everything. I updated the tag to make that clearer for others. I'll point Max to this question and see if he has suggestions...
            – AlexanderPico
            Nov 17 at 1:03
















          • thanks, this is all very thorough and makes sense... my mistake is that I didnt not mention I was using cytoscape.js
            – Anthony Aragues
            Nov 16 at 21:20










          • Ah, lol. Well that changes everything. I updated the tag to make that clearer for others. I'll point Max to this question and see if he has suggestions...
            – AlexanderPico
            Nov 17 at 1:03















          thanks, this is all very thorough and makes sense... my mistake is that I didnt not mention I was using cytoscape.js
          – Anthony Aragues
          Nov 16 at 21:20




          thanks, this is all very thorough and makes sense... my mistake is that I didnt not mention I was using cytoscape.js
          – Anthony Aragues
          Nov 16 at 21:20












          Ah, lol. Well that changes everything. I updated the tag to make that clearer for others. I'll point Max to this question and see if he has suggestions...
          – AlexanderPico
          Nov 17 at 1:03




          Ah, lol. Well that changes everything. I updated the tag to make that clearer for others. I'll point Max to this question and see if he has suggestions...
          – AlexanderPico
          Nov 17 at 1:03

















           

          draft saved


          draft discarded















































           


          draft saved


          draft discarded














          StackExchange.ready(
          function ()
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53234617%2fcytoscape-show-traffic-between-nodes-along-an-animated-path%23new-answer', 'question_page');

          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          這個網誌中的熱門文章

          How to read a connectionString WITH PROVIDER in .NET Core?

          Node.js Script on GitHub Pages or Amazon S3

          Museum of Modern and Contemporary Art of Trento and Rovereto