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.
<!-- 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" : "x","offsets" : [{"nodeId" : "Id1","offset" : "0"},{"nodeId" : "Id2","offset" : "0"},{"nodeId" : "Id3","offset" : "0"}], "type" : "alignment" }, { "axis" : "y", "offsets" : [{"nodeId" : "Id0","offset" : "0"},{"nodeId" : "Id1","offset" : "0"},{"nodeId" : "Id4","offset" : "0"}], "type" : "alignment" } ], "edges" : [{"id1" : "Id1","id2" : "Id2","thickness" : 3},{"id1" : "Id2","id2" : "Id0","thickness" : 3},{"id1" : "Id2","id2" : "Id3","thickness" : 3},{"id1" : "Id2","id2" : "Id4","thickness" : 3}], "nodes" : [{"height" : 20,"id" : "Id0","name" : "a","shape" : "roundrect","width" : 30},{"height" : 20,"id" : "Id1","name" : "b","shape" : "roundrect","width" : 30},{"height" : 20,"id" : "Id2","name" : "c","shape" : "roundrect","width" : 30},{"height" : 20,"id" : "Id3","name" : "d","shape" : "roundrect","width" : 30},{"height" : 20,"id" : "Id4","name" : "e","shape" : "roundrect","width" : 30}] } <-- Create the configuration for the graph --> var config = { "edgeColor":"rgb(122,78,79)", "edgeThickness":"3", "graphType":"Network", "networkColaAllConstraintsIterations":"10", "networkColaAvoidOverlaps":"true", "networkColaHandleDisconnected":"true", "networkColaLinkDistance":"80", "networkColaStartUnconstrainedIterations":"10", "networkColaUserConstraintIterations":"10", "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-constraints-nodes.txt", header=TRUE, sep="\t", quote="", fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE) edges=read.table("https://www.canvasxpress.org/data/cX-constraints-edges.txt", header=TRUE, sep="\t", quote="", fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE) constraints=read.table("https://www.canvasxpress.org/data/cX-constraints-constraints.txt", header=TRUE, sep="\t", quote="", fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE) canvasXpress( nodeData=nodes, edgeData=edges, constraintData=constraints, edgeColor="rgb(122,78,79)", edgeThickness=3, graphType="Network", networkColaAllConstraintsIterations=10, networkColaAvoidOverlaps=TRUE, networkColaHandleDisconnected=TRUE, networkColaLinkDistance=80, networkColaStartUnconstrainedIterations=10, networkColaUserConstraintIterations=10, networkLayoutType="cola" )