CanvasXpress: Network Chart

Network Chart

Network diagrams (also called Graphs) show interconnections between a set of entities. Each entity is represented by a Node (or vertice). Connection between nodes are represented through links (or edges). Networks is an entire field of research in itself. For example, you need to set up a layout algorythm that finds out an optimal position for each node. Several type of networks exist. They can be directed (flow) or undirected (connection). Links can be wheigthed or not.

Example Color Themes

Example Fonts

Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa

Show Code

Tools

HTML / JS
R Code

<!-- 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/canvasXpress.min.js"></script>


<!-- 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"
  }
  

  <!-- Call the CanvasXpress function to create the graph -->
  var cX = new CanvasXpress("canvasId", data, config);


</script>

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