Visualize Network Relationships with Cola Layout

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 = {
         "constraints" : [{"axis" : "y","offsets" : [{"nodeId" : "Id1","offset" : 0},{"nodeId" : "Id2","offset" : 0},{"nodeId" : "Id14","offset" : 0}],
               "type" : "alignment"
            },
            {
               "axis" : "x",
               "offsets" : [{"nodeId" : "Id1","offset" : 0},{"nodeId" : "Id3","offset" : 0},{"nodeId" : "Id4","offset" : 0},{"nodeId" : "Id5","offset" : 0},{"nodeId" : "Id6","offset" : 0},{"nodeId" : "Id7","offset" : 0}],
               "type" : "alignment"
            },
            {
               "axis" : "y",
               "offsets" : [{"nodeId" : "Id7","offset" : 0},{"nodeId" : "Id8","offset" : 0},{"nodeId" : "Id9","offset" : 0}],
               "type" : "alignment"
            },
            {
               "axis" : "x",
               "offsets" : [{"nodeId" : "Id9","offset" : 0},{"nodeId" : "Id13","offset" : 0},{"nodeId" : "Id14","offset" : 0},{"nodeId" : "Id23","offset" : 0},{"nodeId" : "Id24","offset" : 0},{"nodeId" : "Id25","offset" : 0}],
               "type" : "alignment"
            },
            {
               "axis" : "x",
               "offsets" : [{"nodeId" : "Id21","offset" : 0},{"nodeId" : "Id22","offset" : 0}],
               "type" : "alignment"
            },
            {
               "axis" : "x",
               "offsets" : [{"nodeId" : "Id35","offset" : 0},{"nodeId" : "Id36","offset" : 0},{"nodeId" : "Id43","offset" : 0},{"nodeId" : "Id44","offset" : 0}],
               "type" : "alignment"
            }
         ],
         "edges" : [{"endArrow" : "arrow","id1" : "Id1","id2" : "Id0"},{"endArrow" : "arrow","id1" : "Id2","id2" : "Id1"},{"endArrow" : "arrow","id1" : "Id1","id2" : "Id3"},{"endArrow" : "arrow","id1" : "Id3","id2" : "Id4"},{"endArrow" : "arrow","id1" : "Id4","id2" : "Id5"},{"endArrow" : "arrow","id1" : "Id6","id2" : "Id7"},{"endArrow" : "arrow","id1" : "Id7","id2" : "Id8"},{"endArrow" : "arrow","id1" : "Id8","id2" : "Id9"},{"endArrow" : "arrow","id1" : "Id4","id2" : "Id10"},{"endArrow" : "arrow","id1" : "Id10","id2" : "Id11"},{"endArrow" : "arrow","id1" : "Id11","id2" : "Id9"},{"endArrow" : "arrow","id1" : "Id3","id2" : "Id12"},{"endArrow" : "arrow","id1" : "Id12","id2" : "Id5"},{"endArrow" : "arrow","id1" : "Id12","id2" : "Id13"},{"endArrow" : "arrow","id1" : "Id13","id2" : "Id14"},{"endArrow" : "arrow","id1" : "Id14","id2" : "Id2"},{"endArrow" : "arrow","id1" : "Id14","id2" : "Id15"},{"endArrow" : "arrow","id1" : "Id15","id2" : "Id12"},{"endArrow" : "arrow","id1" : "Id16","id2" : "Id14"},{"endArrow" : "arrow","id1" : "Id19","id2" : "Id6"},{"endArrow" : "arrow","id1" : "Id6","id2" : "Id20"},{"endArrow" : "arrow","id1" : "Id17","id2" : "Id11"},{"endArrow" : "arrow","id1" : "Id11","id2" : "Id18"},{"endArrow" : "arrow","id1" : "Id22","id2" : "Id23"},{"endArrow" : "arrow","id1" : "Id23","id2" : "Id21"},{"endArrow" : "arrow","id1" : "Id23","id2" : "Id13"},{"endArrow" : "arrow","id1" : "Id24","id2" : "Id23"},{"endArrow" : "arrow","id1" : "Id9","id2" : "Id25"},{"endArrow" : "arrow","id1" : "Id25","id2" : "Id24"},{"endArrow" : "arrow","id1" : "Id28","id2" : "Id26"},{"endArrow" : "arrow","id1" : "Id26","id2" : "Id27"},{"endArrow" : "arrow","id1" : "Id29","id2" : "Id31"},{"endArrow" : "arrow","id1" : "Id24","id2" : "Id26"},{"endArrow" : "arrow","id1" : "Id31","id2" : "Id32"},{"endArrow" : "arrow","id1" : "Id33","id2" : "Id32"},{"endArrow" : "arrow","id1" : "Id34","id2" : "Id26"},{"endArrow" : "arrow","id1" : "Id34","id2" : "Id33"},{"endArrow" : "arrow","id1" : "Id34","id2" : "Id35"},{"endArrow" : "arrow","id1" : "Id35","id2" : "Id36"},{"endArrow" : "arrow","id1" : "Id38","id2" : "Id35"},{"endArrow" : "arrow","id1" : "Id35","id2" : "Id37"},{"endArrow" : "arrow","id1" : "Id37","id2" : "Id39"},{"endArrow" : "arrow","id1" : "Id39","id2" : "Id40"},{"endArrow" : "arrow","id1" : "Id40","id2" : "Id41"},{"endArrow" : "arrow","id1" : "Id41","id2" : "Id42"},{"endArrow" : "arrow","id1" : "Id36","id2" : "Id43"},{"endArrow" : "arrow","id1" : "Id43","id2" : "Id44"},{"endArrow" : "arrow","id1" : "Id46","id2" : "Id47"},{"endArrow" : "arrow","id1" : "Id48","id2" : "Id46"},{"endArrow" : "arrow","id1" : "Id46","id2" : "Id49"},{"endArrow" : "arrow","id1" : "Id38","id2" : "Id46"},{"endArrow" : "arrow","id1" : "Id31","id2" : "Id30"},{"endArrow" : "arrow","id1" : "Id5","id2" : "Id6"},{"endArrow" : "arrow","id1" : "Id43","id2" : "Id45"},{"endArrow" : "arrow","id1" : "Id9","id2" : "Id31"}],
         "groups" : [{"color" : "rgb(254,243,187)","id" : "G0","nodes" : ["Id29","Id25","Id24","Id23","Id22","Id21","Id20","Id19","Id18","Id17","Id16","Id15","Id14","Id13","Id12","Id11","Id10","Id9","Id8","Id7","Id6","Id5","Id4","Id3","Id2","Id1","Id0","Id27"],
               "padding" : 8
            },
            {
               "color" : "rgb(199,233,217)",
               "id" : "G1",
               "nodes" : ["Id28","Id30","Id45","Id44","Id43","Id38","Id37","Id36","Id35","Id34","Id33","Id32","Id47","Id39","Id40"],
               "padding" : 8
            },
            {
               "color" : "rgb(254,243,187)",
               "id" : "G2",
               "nodes" : ["Id48","Id49","Id42"],
               "padding" : 8
            }
         ],
         "nodes" : [{"color" : "rgb(245,245,221)","height" : 6,"id" : "Id0","name" : "P","rx" : 9,"ry" : 9,"shape" : "roundrect","width" : 10,"x" : 172,"y" : 238},{"color" : "rgb(245,245,221)","height" : 6,"id" : "Id1","name" : "sucrose phosphate phosphatase","rx" : 5,"ry" : 5,"shape" : "roundrect","width" : 10,"x" : 191,"y" : 172},{"color" : "rgb(245,245,221)","height" : 6,"id" : "Id2","name" : "sucrose 6-phosphate","rx" : 17,"ry" : 17,"shape" : "roundrect","width" : 10,"x" : 308,"y" : 179},{"color" : "rgb(245,245,221)","height" : 6,"id" : "Id3","name" : "sucrose","rx" : 9,"ry" : 9,"shape" : "roundrect","width" : 10,"x" : 203,"y" : 251},{"color" : "rgb(245,245,221)","height" : 6,"id" : "Id4","name" : "invertase","rx" : 5,"ry" : 5,"shape" : "roundrect","width" : 10,"x" : 202,"y" : 303},{"color" : "rgb(245,245,221)","height" : 6,"id" : "Id5","name" : "fructose","rx" : 9,"ry" : 9,"shape" : "roundrect","width" : 10,"x" : 203,"y" : 345},{"color" : "rgb(245,245,221)","height" : 6,"id" : "Id6","name" : "fructokinase","rx" : 5,"ry" : 5,"shape" : "roundrect","width" : 10,"x" : 194,"y" : 395},{"color" : "rgb(245,245,221)","height" : 6,"id" : "Id7","name" : "fructose 6-phosphate","rx" : 17,"ry" : 17,"shape" : "roundrect","width" : 10,"x" : 191,"y" : 485},{"color" : "rgb(245,245,221)","height" : 6,"id" : "Id8","name" : "phosphoglucose isomerase","rx" : 5,"ry" : 5,"shape" : "roundrect","width" : 10,"x" : 283,"y" : 485},{"color" : "rgb(245,245,221)","height" : 6,"id" : "Id9","name" : "glucose 6-phosphate","rx" : 17,"ry" : 17,"shape" : "roundrect","width" : 10,"x" : 393,"y" : 485},{"color" : "rgb(245,245,221)","height" : 6,"id" : "Id10","name" : "glucose","rx" : 9,"ry" : 9,"shape" : "roundrect","width" : 10,"x" : 306,"y" : 356},{"color" : "rgb(245,245,221)","height" : 6,"id" : "Id11","name" : "hexokinase","rx" : 5,"ry" : 5,"shape" : "roundrect","width" : 10,"x" : 309,"y" : 419},{"color" : "rgb(245,245,221)","height" : 6,"id" : "Id12","name" : "sucrose synthase","rx" : 5,"ry" : 5,"shape" : "roundrect","width" : 10,"x" : 309,"y" : 259},{"color" : "rgb(245,245,221)","height" : 6,"id" : "Id13","name" : "UDP - glucose","rx" : 17,"ry" : 17,"shape" : "roundrect","width" : 10,"x" : 404,"y" : 276},{"color" : "rgb(245,245,221)","height" : 6,"id" : "Id14","name" : "sucrose phosphate synthase","rx" : 5,"ry" : 5,"shape" : "roundrect","width" : 10,"x" : 400,"y" : 172},{"color" : "rgb(245,245,221)","height" : 6,"id" : "Id15","name" : "UDP","rx" : 9,"ry" : 9,"shape" : "roundrect","width" : 10,"x" : 354,"y" : 227},{"color" : "rgb(245,245,221)","height" : 6,"id" : "Id16","name" : "fructose 6-phosphate","rx" : 17,"ry" : 17,"shape" : "roundrect","width" : 10,"x" : 384,"y" : 125},{"color" : "rgb(245,245,221)","height" : 6,"id" : "Id17","name" : "ATP","rx" : 9,"ry" : 9,"shape" : "roundrect","width" : 10,"x" : 348,"y" : 388},{"color" : "rgb(245,245,221)","height" : 6,"id" : "Id18","name" : "ATP","rx" : 9,"ry" : 9,"shape" : "roundrect","width" : 10,"x" : 313,"y" : 451},{"color" : "rgb(245,245,221)","height" : 6,"id" : "Id19","name" : "ATP","rx" : 9,"ry" : 9,"shape" : "roundrect","width" : 10,"x" : 149,"y" : 378},{"color" : "rgb(245,245,221)","height" : 6,"id" : "Id20","name" : "ADP","rx" : 9,"ry" : 9,"shape" : "roundrect","width" : 10,"x" : 149,"y" : 411},{"color" : "rgb(245,245,221)","height" : 6,"id" : "Id21","name" : "PP","rx" : 9,"ry" : 9,"shape" : "roundrect","width" : 10,"x" : 486,"y" : 292},{"color" : "rgb(245,245,221)","height" : 6,"id" : "Id22","name" : "UTP","rx" : 9,"ry" : 9,"shape" : "roundrect","width" : 10,"x" : 484,"y" : 372},{"color" : "rgb(245,245,221)","height" : 6,"id" : "Id23","name" : "UDP glucose pyrophosphorylase","rx" : 5,"ry" : 5,"shape" : "roundrect","width" : 10,"x" : 374,"y" : 324},{"color" : "rgb(245,245,221)","height" : 6,"id" : "Id24","name" : "glucose 1-phosphate","rx" : 17,"ry" : 17,"shape" : "roundrect","width" : 10,"x" : 394,"y" : 372},{"color" : "rgb(245,245,221)","height" : 6,"id" : "Id25","name" : "phospho- glucomutase (cPGM)","rx" : 5,"ry" : 5,"shape" : "roundrect","width" : 10,"x" : 390,"y" : 419},{"color" : "rgb(245,245,221)","height" : 18,"id" : "Id26","name" : "G1P transporter","rx" : 5,"ry" : 5,"shape" : "roundrect","width" : 30,"x" : 536,"y" : 398},{"color" : "rgb(245,245,221)","height" : 6,"id" : "Id27","name" : "P","rx" : 9,"ry" : 9,"shape" : "roundrect","width" : 10,"x" : 496,"y" : 423},{"color" : "rgb(245,245,221)","height" : 6,"id" : "Id28","name" : "P","rx" : 9,"ry" : 9,"shape" : "roundrect","width" : 10,"x" : 628,"y" : 390},{"color" : "rgb(245,245,221)","height" : 6,"id" : "Id29","name" : "P","rx" : 9,"ry" : 9,"shape" : "roundrect","width" : 10,"x" : 496,"y" : 482},{"color" : "rgb(245,245,221)","height" : 6,"id" : "Id30","name" : "P","rx" : 9,"ry" : 9,"shape" : "roundrect","width" : 10,"x" : 630,"y" : 526},{"color" : "rgb(245,245,221)","height" : 18,"id" : "Id31","name" : "G6P transporter","rx" : 5,"ry" : 5,"shape" : "roundrect","width" : 30,"x" : 536,"y" : 502},{"color" : "rgb(245,245,221)","height" : 6,"id" : "Id32","name" : "glucose 6-phosphate","rx" : 17,"ry" : 17,"shape" : "roundrect","width" : 10,"x" : 628,"y" : 558},{"color" : "rgb(245,245,221)","height" : 6,"id" : "Id33","name" : "phospho- glucomutase (cPGM)","rx" : 5,"ry" : 5,"shape" : "roundrect","width" : 10,"x" : 628,"y" : 422},{"color" : "rgb(245,245,221)","height" : 6,"id" : "Id34","name" : "glucose 1-phosphate","rx" : 17,"ry" : 17,"shape" : "roundrect","width" : 10,"x" : 628,"y" : 337},{"color" : "rgb(245,245,221)","height" : 6,"id" : "Id35","name" : "ADPglucose pyrophosphorylase (pAGPase)","rx" : 5,"ry" : 5,"shape" : "roundrect","width" : 10,"x" : 718,"y" : 346},{"color" : "rgb(245,245,221)","height" : 6,"id" : "Id36","name" : "ADP - glucose","rx" : 17,"ry" : 17,"shape" : "roundrect","width" : 10,"x" : 748,"y" : 408},{"color" : "rgb(245,245,221)","height" : 6,"id" : "Id37","name" : "PP","rx" : 9,"ry" : 9,"shape" : "roundrect","width" : 10,"x" : 818,"y" : 408},{"color" : "rgb(245,245,221)","height" : 6,"id" : "Id38","name" : "ATP","rx" : 9,"ry" : 9,"shape" : "roundrect","width" : 10,"x" : 848,"y" : 345},{"color" : "rgb(245,245,221)","height" : 6,"id" : "Id39","name" : "inorganic diphosphatase","rx" : 5,"ry" : 5,"shape" : "roundrect","width" : 10,"x" : 838,"y" : 440},{"color" : "rgb(245,245,221)","height" : 6,"id" : "Id40","name" : "P","rx" : 9,"ry" : 9,"shape" : "roundrect","width" : 10,"x" : 874,"y" : 488},{"color" : "rgb(245,245,221)","height" : 18,"id" : "Id41","name" : "phosphate transporter","rx" : 5,"ry" : 5,"shape" : "roundrect","width" : 30,"x" : 948,"y" : 497},{"color" : "rgb(245,245,221)","height" : 6,"id" : "Id42","name" : "P","rx" : 9,"ry" : 9,"shape" : "roundrect","width" : 10,"x" : 1042,"y" : 521},{"color" : "rgb(245,245,221)","height" : 6,"id" : "Id43","name" : "starch synthase (simpl.)","rx" : 5,"ry" : 5,"shape" : "roundrect","width" : 10,"x" : 728,"y" : 456},{"color" : "rgb(245,245,221)","height" : 6,"id" : "Id44","name" : "ADP","rx" : 9,"ry" : 9,"shape" : "roundrect","width" : 10,"x" : 760,"y" : 504},{"color" : "rgb(245,245,221)","height" : 6,"id" : "Id45","name" : "starch","rx" : 9,"ry" : 9,"shape" : "roundrect","width" : 10,"x" : 806,"y" : 504},{"color" : "rgb(245,245,221)","height" : 18,"id" : "Id46","name" : "ATP/ADP transporter","rx" : 5,"ry" : 5,"shape" : "roundrect","width" : 30,"x" : 948,"y" : 359},{"color" : "rgb(245,245,221)","height" : 6,"id" : "Id47","name" : "ADP","rx" : 9,"ry" : 9,"shape" : "roundrect","width" : 10,"x" : 881,"y" : 384},{"color" : "rgb(245,245,221)","height" : 6,"id" : "Id48","name" : "ADP","rx" : 9,"ry" : 9,"shape" : "roundrect","width" : 10,"x" : 1042,"y" : 351},{"color" : "rgb(245,245,221)","height" : 6,"id" : "Id49","name" : "ATP","rx" : 9,"ry" : 9,"shape" : "roundrect","width" : 10,"x" : 1042,"y" : 384}]
      }

      // Create the configuration for the graph
      var config = {
         "graphType" : "Network",
         "networkLayoutType" : "cola"
      }

      // 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-dunart-nodes.txt", header=TRUE, sep="\t", quote="", fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
edges=read.table("https://www.canvasxpress.org/data/r/cX-dunart-edges.txt", header=TRUE, sep="\t", quote="", fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
groups=read.table("https://www.canvasxpress.org/data/r/cX-dunart-groups.txt", header=TRUE, sep="\t", quote="", fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
constraints=read.table("https://www.canvasxpress.org/data/r/cX-dunart-constraints.txt", header=TRUE, sep="\t", quote="", fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
canvasXpress(
  nodeData=nodes,
  edgeData=edges,
  groupData=groups,
  constraintData=constraints,
  graphType="Network",
  networkLayoutType="cola"
)