Mastering Unconstrained Cola Layout in Network Graphs

Network graphs are powerful visualizations of relationships within datasets. Nodes represent entities, and edges show connections between them. Applications range from social networks and infrastructure mapping to biological systems and cybersecurity analysis. Understanding network graph properties like centrality and clustering reveals valuable insights. Analyzing network graphs helps identify key players, vulnerabilities, and community structures. Tools and algorithms exist for creating, visualizing, and analyzing these graphs, providing crucial data-driven insights across many fields. From identifying influential figures to optimizing infrastructure, network graphs offer a versatile approach to complex data representation.

Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa

HTML / JS
R Code

<html>

  <head>
    <!-- Include the CanvasXpress library in your HTML file -->
    <link rel="stylesheet" href="https://www.canvasxpress.org/dist/canvasXpress.css" type="text/css"/>
    <script src="https://www.canvasxpress.org/dist/canvasXpress.min.js"></script>
  </head>

  <body>

    <!-- Create a canvas element for the chart with the desired dimensions -->
    <div>
      <canvas id="canvasId" width="600" height="600"></canvas>
    </div>


    <!-- Create a script to initialize the chart -->
    <script>

      // Create the data for the graph
      var data = {
         "edges" : [{"id1" : "Id0","id2" : "Id1","value" : 1},{"id1" : "Id0","id2" : "Id2","value" : 1},{"id1" : "Id0","id2" : "Id9","value" : 1},{"id1" : "Id0","id2" : "Id11","value" : 1},{"id1" : "Id1","id2" : "Id78","value" : 1},{"id1" : "Id2","id2" : "Id3","value" : 1},{"id1" : "Id3","id2" : "Id4","value" : 1},{"id1" : "Id4","id2" : "Id5","value" : 1},{"id1" : "Id5","id2" : "Id6","value" : 1},{"id1" : "Id6","id2" : "Id10","value" : 1},{"id1" : "Id7","id2" : "Id8","value" : 1},{"id1" : "Id7","id2" : "Id11","value" : 1},{"id1" : "Id8","id2" : "Id12","value" : 1},{"id1" : "Id9","id2" : "Id18","value" : 1},{"id1" : "Id10","id2" : "Id35","value" : 1},{"id1" : "Id12","id2" : "Id13","value" : 1},{"id1" : "Id12","id2" : "Id14","value" : 1},{"id1" : "Id12","id2" : "Id15","value" : 1},{"id1" : "Id12","id2" : "Id16","value" : 1},{"id1" : "Id12","id2" : "Id17","value" : 1},{"id1" : "Id12","id2" : "Id19","value" : 1},{"id1" : "Id12","id2" : "Id20","value" : 1},{"id1" : "Id12","id2" : "Id21","value" : 1},{"id1" : "Id12","id2" : "Id23","value" : 1},{"id1" : "Id12","id2" : "Id25","value" : 1},{"id1" : "Id12","id2" : "Id26","value" : 1},{"id1" : "Id12","id2" : "Id28","value" : 1},{"id1" : "Id12","id2" : "Id29","value" : 1},{"id1" : "Id12","id2" : "Id31","value" : 1},{"id1" : "Id13","id2" : "Id24","value" : 1},{"id1" : "Id14","id2" : "Id45","value" : 1},{"id1" : "Id15","id2" : "Id22","value" : 1},{"id1" : "Id16","id2" : "Id49","value" : 1},{"id1" : "Id18","id2" : "Id30","value" : 1},{"id1" : "Id19","id2" : "Id39","value" : 1},{"id1" : "Id20","id2" : "Id40","value" : 1},{"id1" : "Id21","id2" : "Id50","value" : 1},{"id1" : "Id22","id2" : "Id27","value" : 1},{"id1" : "Id23","id2" : "Id63","value" : 1},{"id1" : "Id24","id2" : "Id72","value" : 1},{"id1" : "Id26","id2" : "Id60","value" : 1},{"id1" : "Id27","id2" : "Id68","value" : 1},{"id1" : "Id29","id2" : "Id59","value" : 1},{"id1" : "Id31","id2" : "Id32","value" : 1},{"id1" : "Id31","id2" : "Id33","value" : 1},{"id1" : "Id31","id2" : "Id34","value" : 1},{"id1" : "Id31","id2" : "Id36","value" : 1},{"id1" : "Id31","id2" : "Id37","value" : 1},{"id1" : "Id31","id2" : "Id38","value" : 1},{"id1" : "Id32","id2" : "Id58","value" : 1},{"id1" : "Id33","id2" : "Id75","value" : 1},{"id1" : "Id34","id2" : "Id41","value" : 1},{"id1" : "Id35","id2" : "Id48","value" : 1},{"id1" : "Id36","id2" : "Id76","value" : 1},{"id1" : "Id37","id2" : "Id42","value" : 1},{"id1" : "Id38","id2" : "Id44","value" : 1},{"id1" : "Id38","id2" : "Id46","value" : 1},{"id1" : "Id38","id2" : "Id47","value" : 1},{"id1" : "Id39","id2" : "Id43","value" : 1},{"id1" : "Id40","id2" : "Id57","value" : 1},{"id1" : "Id41","id2" : "Id67","value" : 1},{"id1" : "Id42","id2" : "Id74","value" : 1},{"id1" : "Id43","id2" : "Id51","value" : 1},{"id1" : "Id48","id2" : "Id52","value" : 1},{"id1" : "Id48","id2" : "Id53","value" : 1},{"id1" : "Id48","id2" : "Id54","value" : 1},{"id1" : "Id48","id2" : "Id55","value" : 1},{"id1" : "Id48","id2" : "Id56","value" : 1},{"id1" : "Id48","id2" : "Id61","value" : 1},{"id1" : "Id48","id2" : "Id62","value" : 1},{"id1" : "Id62","id2" : "Id64","value" : 1},{"id1" : "Id62","id2" : "Id65","value" : 1},{"id1" : "Id62","id2" : "Id66","value" : 1},{"id1" : "Id62","id2" : "Id69","value" : 1},{"id1" : "Id69","id2" : "Id70","value" : 1},{"id1" : "Id69","id2" : "Id71","value" : 1},{"id1" : "Id69","id2" : "Id73","value" : 1},{"id1" : "Id69","id2" : "Id77","value" : 1},{"id1" : "Id78","id2" : "Id79","value" : 1}],
         "nodes" : [{"id" : "Id0","name" : "Toprato"},{"id" : "Id1","name" : "Fella"},{"id" : "Id2","name" : "Tirti"},{"id" : "Id3","name" : "LA Piu' Bella"},{"id" : "Id4","name" : "Deep Shadow 1-5-8"},{"id" : "Id5","name" : "Oobiscus"},{"id" : "Id6","name" : "Rioky"},{"id" : "Id7","name" : "Klashe"},{"id" : "Id8","name" : "Tau Beta"},{"id" : "Id9","name" : "311040"},{"id" : "Id10","name" : "Nevf Zotsamm"},{"id" : "Id11","name" : "Gnaron"},{"id" : "Id12","name" : "Green Dor"},{"id" : "Id13","name" : "Gravity"},{"id" : "Id14","name" : "Jurrawensaed"},{"id" : "Id15","name" : "Andrill Primus"},{"id" : "Id16","name" : "Ulti-Mad"},{"id" : "Id17","name" : "Jellyfish"},{"id" : "Id18","name" : "Yersa"},{"id" : "Id19","name" : "Therfady"},{"id" : "Id20","name" : "SC 09"},{"id" : "Id21","name" : "Glueck"},{"id" : "Id22","name" : "Fiddle"},{"id" : "Id23","name" : "LV-017"},{"id" : "Id24","name" : "Sardinle"},{"id" : "Id25","name" : "Latalava"},{"id" : "Id26","name" : "Penumbra"},{"id" : "Id27","name" : "Chi Qoppa"},{"id" : "Id28","name" : "Vopru Maufyb"},{"id" : "Id29","name" : "Onadha"},{"id" : "Id30","name" : "Muplita Furr"},{"id" : "Id31","name" : "Psi Epsilon"},{"id" : "Id32","name" : "Dimloon"},{"id" : "Id33","name" : "Tanned I"},{"id" : "Id34","name" : "Woolaris 10"},{"id" : "Id35","name" : "Semend"},{"id" : "Id36","name" : "Blacus"},{"id" : "Id37","name" : "Darknok"},{"id" : "Id38","name" : "Oastar Secundus"},{"id" : "Id39","name" : "Green One"},{"id" : "Id40","name" : "Kayin Minor A"},{"id" : "Id41","name" : "Arton"},{"id" : "Id42","name" : "Anerstis"},{"id" : "Id43","name" : "Lament"},{"id" : "Id44","name" : "Shaison"},{"id" : "Id45","name" : "Rekini-H-S6"},{"id" : "Id46","name" : "Darkless"},{"id" : "Id47","name" : "MBTP 20"},{"id" : "Id48","name" : "Yankee Quebec"},{"id" : "Id49","name" : "Shere Jauj-Bred"},{"id" : "Id50","name" : "Embalm"},{"id" : "Id51","name" : "Small Rock 4"},{"id" : "Id52","name" : "Libra-D-S3"},{"id" : "Id53","name" : "Dying Warmth"},{"id" : "Id54","name" : "Sofa"},{"id" : "Id55","name" : "Grobnor"},{"id" : "Id56","name" : "Forbidden 1"},{"id" : "Id57","name" : "Glimmer II"},{"id" : "Id58","name" : "Aleksis"},{"id" : "Id59","name" : "Relu"},{"id" : "Id60","name" : "Scoff"},{"id" : "Id61","name" : "Elas"},{"id" : "Id62","name" : "Great Crater"},{"id" : "Id63","name" : "Leuprekota"},{"id" : "Id64","name" : "Yetton"},{"id" : "Id65","name" : "Fheyhs"},{"id" : "Id66","name" : "Edriwoise"},{"id" : "Id67","name" : "Usque"},{"id" : "Id68","name" : "Surfatu"},{"id" : "Id69","name" : "Drumana"},{"id" : "Id70","name" : "Hausner"},{"id" : "Id71","name" : "Vitalis"},{"id" : "Id72","name" : "Hyacinta IV"},{"id" : "Id73","name" : "Revenge of the Lith"},{"id" : "Id74","name" : "Asclephyrus"},{"id" : "Id75","name" : "Little Friend VI"},{"id" : "Id76","name" : "Fontelitio"},{"id" : "Id77","name" : "Shinmien"},{"id" : "Id78","name" : "Nine"},{"id" : "Id79","name" : "Kalgash"}]
      }

      // Create the configuration for the graph
      var config = {
         "graphType" : "Network",
         "networkColaStartUnconstrainedIterations" : 30,
         "networkColaSymmetricDiffLinkLengths" : 5,
         "networkLayoutType" : "cola",
         "nodeColor" : "rgb(31,119,180)",
         "nodeSizeScaleFactor" : 0.5
      }

      // Event used to create graph (optional)
      var events = false


      // Call the CanvasXpress function to create the graph
      var cX = new CanvasXpress("canvasId", data, config, events);

      
    </script>

  </body>

</html>

library(canvasXpress)
nodes=read.table("https://www.canvasxpress.org/data/r/cX-chris-nodes.txt", header=TRUE, sep="\t", quote="", fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
edges=read.table("https://www.canvasxpress.org/data/r/cX-chris-edges.txt", header=TRUE, sep="\t", quote="", fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
canvasXpress(
  nodeData=nodes,
  edgeData=edges,
  graphType="Network",
  networkColaStartUnconstrainedIterations=30,
  networkColaSymmetricDiffLinkLengths=5,
  networkLayoutType="cola",
  nodeColor="rgb(31,119,180)",
  nodeSizeScaleFactor=0.5
)