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



Show Code

Tools

<!-- 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","gap" : 25,"leftId" : "Id0","rightId" : "Id1"},{"axis" : "y","gap" : 25,"leftId" : "Id0","rightId" : "Id2"},{"axis" : "y","gap" : 25,"leftId" : "Id0","rightId" : "Id9"},{"axis" : "y","gap" : 25,"leftId" : "Id0","rightId" : "Id11"},{"axis" : "y","gap" : 25,"leftId" : "Id1","rightId" : "Id78"},{"axis" : "y","gap" : 25,"leftId" : "Id2","rightId" : "Id3"},{"axis" : "y","gap" : 25,"leftId" : "Id3","rightId" : "Id4"},{"axis" : "y","gap" : 25,"leftId" : "Id4","rightId" : "Id5"},{"axis" : "y","gap" : 25,"leftId" : "Id5","rightId" : "Id6"},{"axis" : "y","gap" : 25,"leftId" : "Id6","rightId" : "Id10"},{"axis" : "y","gap" : 25,"leftId" : "Id7","rightId" : "Id8"},{"axis" : "y","gap" : 25,"leftId" : "Id7","rightId" : "Id11"},{"axis" : "y","gap" : 25,"leftId" : "Id8","rightId" : "Id12"},{"axis" : "y","gap" : 25,"leftId" : "Id9","rightId" : "Id18"},{"axis" : "y","gap" : 25,"leftId" : "Id10","rightId" : "Id35"},{"axis" : "y","gap" : 25,"leftId" : "Id12","rightId" : "Id13"},{"axis" : "y","gap" : 25,"leftId" : "Id12","rightId" : "Id14"},{"axis" : "y","gap" : 25,"leftId" : "Id12","rightId" : "Id15"},{"axis" : "y","gap" : 25,"leftId" : "Id12","rightId" : "Id16"},{"axis" : "y","gap" : 25,"leftId" : "Id12","rightId" : "Id17"},{"axis" : "y","gap" : 25,"leftId" : "Id12","rightId" : "Id19"},{"axis" : "y","gap" : 25,"leftId" : "Id12","rightId" : "Id20"},{"axis" : "y","gap" : 25,"leftId" : "Id12","rightId" : "Id21"},{"axis" : "y","gap" : 25,"leftId" : "Id12","rightId" : "Id23"},{"axis" : "y","gap" : 25,"leftId" : "Id12","rightId" : "Id25"},{"axis" : "y","gap" : 25,"leftId" : "Id12","rightId" : "Id26"},{"axis" : "y","gap" : 25,"leftId" : "Id12","rightId" : "Id28"},{"axis" : "y","gap" : 25,"leftId" : "Id12","rightId" : "Id29"},{"axis" : "y","gap" : 25,"leftId" : "Id12","rightId" : "Id31"},{"axis" : "y","gap" : 25,"leftId" : "Id13","rightId" : "Id24"},{"axis" : "y","gap" : 25,"leftId" : "Id14","rightId" : "Id45"},{"axis" : "y","gap" : 25,"leftId" : "Id15","rightId" : "Id22"},{"axis" : "y","gap" : 25,"leftId" : "Id16","rightId" : "Id49"},{"axis" : "y","gap" : 25,"leftId" : "Id18","rightId" : "Id30"},{"axis" : "y","gap" : 25,"leftId" : "Id19","rightId" : "Id39"},{"axis" : "y","gap" : 25,"leftId" : "Id20","rightId" : "Id40"},{"axis" : "y","gap" : 25,"leftId" : "Id21","rightId" : "Id50"},{"axis" : "y","gap" : 25,"leftId" : "Id22","rightId" : "Id27"},{"axis" : "y","gap" : 25,"leftId" : "Id23","rightId" : "Id63"},{"axis" : "y","gap" : 25,"leftId" : "Id24","rightId" : "Id72"},{"axis" : "y","gap" : 25,"leftId" : "Id26","rightId" : "Id60"},{"axis" : "y","gap" : 25,"leftId" : "Id27","rightId" : "Id68"},{"axis" : "y","gap" : 25,"leftId" : "Id29","rightId" : "Id59"},{"axis" : "y","gap" : 25,"leftId" : "Id31","rightId" : "Id32"},{"axis" : "y","gap" : 25,"leftId" : "Id31","rightId" : "Id33"},{"axis" : "y","gap" : 25,"leftId" : "Id31","rightId" : "Id34"},{"axis" : "y","gap" : 25,"leftId" : "Id31","rightId" : "Id36"},{"axis" : "y","gap" : 25,"leftId" : "Id31","rightId" : "Id37"},{"axis" : "y","gap" : 25,"leftId" : "Id31","rightId" : "Id38"},{"axis" : "y","gap" : 25,"leftId" : "Id32","rightId" : "Id58"},{"axis" : "y","gap" : 25,"leftId" : "Id33","rightId" : "Id75"},{"axis" : "y","gap" : 25,"leftId" : "Id34","rightId" : "Id41"},{"axis" : "y","gap" : 25,"leftId" : "Id35","rightId" : "Id48"},{"axis" : "y","gap" : 25,"leftId" : "Id36","rightId" : "Id76"},{"axis" : "y","gap" : 25,"leftId" : "Id37","rightId" : "Id42"},{"axis" : "y","gap" : 25,"leftId" : "Id38","rightId" : "Id44"},{"axis" : "y","gap" : 25,"leftId" : "Id38","rightId" : "Id46"},{"axis" : "y","gap" : 25,"leftId" : "Id38","rightId" : "Id47"},{"axis" : "y","gap" : 25,"leftId" : "Id39","rightId" : "Id43"},{"axis" : "y","gap" : 25,"leftId" : "Id40","rightId" : "Id57"},{"axis" : "y","gap" : 25,"leftId" : "Id41","rightId" : "Id67"},{"axis" : "y","gap" : 25,"leftId" : "Id42","rightId" : "Id74"},{"axis" : "y","gap" : 25,"leftId" : "Id43","rightId" : "Id51"},{"axis" : "y","gap" : 25,"leftId" : "Id48","rightId" : "Id52"},{"axis" : "y","gap" : 25,"leftId" : "Id48","rightId" : "Id53"},{"axis" : "y","gap" : 25,"leftId" : "Id48","rightId" : "Id54"},{"axis" : "y","gap" : 25,"leftId" : "Id48","rightId" : "Id55"},{"axis" : "y","gap" : 25,"leftId" : "Id48","rightId" : "Id56"},{"axis" : "y","gap" : 25,"leftId" : "Id48","rightId" : "Id61"},{"axis" : "y","gap" : 25,"leftId" : "Id48","rightId" : "Id62"},{"axis" : "y","gap" : 25,"leftId" : "Id62","rightId" : "Id64"},{"axis" : "y","gap" : 25,"leftId" : "Id62","rightId" : "Id65"},{"axis" : "y","gap" : 25,"leftId" : "Id62","rightId" : "Id66"},{"axis" : "y","gap" : 25,"leftId" : "Id62","rightId" : "Id69"},{"axis" : "y","gap" : 25,"leftId" : "Id69","rightId" : "Id70"},{"axis" : "y","gap" : 25,"leftId" : "Id69","rightId" : "Id71"},{"axis" : "y","gap" : 25,"leftId" : "Id69","rightId" : "Id73"},{"axis" : "y","gap" : 25,"leftId" : "Id69","rightId" : "Id77"},{"axis" : "y","gap" : 25,"leftId" : "Id78","rightId" : "Id79"}],
     "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",
     "networkColaAllConstraintsIterations":"20",
     "networkColaAvoidOverlaps":"true",
     "networkColaFlowLayoutAxis":"y",
     "networkColaFlowLayoutSeparation":"30",
     "networkColaStartUnconstrainedIterations":"10",
     "networkColaSymmetricDiffLinkLengths":"6",
     "networkColaUserConstraintIterations":"20",
     "networkLayoutType":"cola",
     "nodeColor":"rgb(31,119,180)",
     "nodeSizeScaleFactor":0.5
  }
  

  <!-- 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-chrisC-nodes.txt", header=TRUE, sep="\t", quote="", fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
edges=read.table("https://www.canvasxpress.org/data/cX-chrisC-edges.txt", header=TRUE, sep="\t", quote="", fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
constraints=read.table("https://www.canvasxpress.org/data/cX-chrisC-constraints.txt", header=TRUE, sep="\t", quote="", fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
canvasXpress(
  nodeData=nodes,
  edgeData=edges,
  constraintData=constraints,
  graphType="Network",
  networkColaAllConstraintsIterations=20,
  networkColaAvoidOverlaps=TRUE,
  networkColaFlowLayoutAxis="y",
  networkColaFlowLayoutSeparation=30,
  networkColaStartUnconstrainedIterations=10,
  networkColaSymmetricDiffLinkLengths=6,
  networkColaUserConstraintIterations=20,
  networkLayoutType="cola",
  nodeColor="rgb(31,119,180)",
  nodeSizeScaleFactor=0.5
)