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 = { "edges" : [{"color" : "rgb(51,12,255)","endArrow" : "arrow","id1" : "Gene1","id2" : "Gene2","startArrow" : "square","type" : "curved","width" : "3"},{"color" : "rgb(51,12,255)","endArrow" : "arrow","id1" : "Gene4","id2" : "Gene3","startArrow" : "square","type" : "dashedCurved","width" : "3"},{"color" : "rgb(51,12,255)","endArrow" : "arrow","id1" : "Gene5","id2" : "Met","type" : "line","width" : "3"},{"color" : "rgb(51,12,255)","endArrow" : "round","id1" : "Gene3","id2" : "DNA","startArrow" : "square","type" : "bezier","width" : "3"},{"color" : "rgb(51,12,255)","endArrow" : "square","id1" : "Gene7","id2" : "Gene1","startArrow" : "arrow","type" : "dashedBezier","width" : "3"},{"color" : "rgb(51,12,255)","elbows" : [ [235,100], [50,100], [50,230] ], "endArrow" : "square", "id1" : "Gene5", "id2" : "Gene7", "type" : "dotted", "width" : "3" }, { "color" : "rgb(51,12,255)", "elbows" : [[275,100,325,100,325,165], [325,165,325,270,425,270] ], "endArrow" : "square", "id1" : "Gene5", "id2" : "DNA", "type" : "bezier", "width" : "3" } ], "legend" : { "edges" : [{"id" : "edgesLegendId0","text" : "Activate","type" : "arrowHeadLine"}], "nodes" : [{"color" : "rgb(255,0,0)","id" : "nodesLegendId0","shape" : "sphere","text" : "Gene"}], "pos" : { "decorations" : { "x" : 450, "y" : 360 }, "edges" : { "x" : 360, "y" : -5 }, "nodes" : { "x" : -5, "y" : -5 } }, "text" : [{"id" : "textLegendId0","text" : "Cool Pathway","x" : 150,"y" : 460}] }, "nodes" : [{"eventless" : true,"height" : 400,"hideLabel" : true,"id" : "Cell","imagePath" : "https : //www.canvasxpress.org/assets/images/cell.png","shape" : "image","width" : 525,"x" : 250,"y" : 250},{"exp1" : 1,"exp2" : 2,"exp3" : 4,"exp4" : {"cl1" : 2,"cl2" : 4,"cl3" : 3},"exp5" : {"cl1" : 12,"cl2" : 1,"cl3" : 5},"height" : 40,"id" : "Gene1","imagePath" : "https : //www.canvasxpress.org/assets/images/prot.png","shape" : "image","width" : 40,"x" : 155,"y" : 160},{"color" : "rgb(255,0,0)","exp1" : 2,"exp2" : 4,"exp3" : 1,"exp4" : {"cl1" : 7,"cl2" : 1,"cl3" : 8},"exp5" : {"cl1" : 1,"cl2" : 11,"cl3" : 8},"id" : "Gene2","shape" : "sphere","size" : 1,"x" : 155,"y" : 340},{"color" : "rgb(255,0,0)","exp1" : 1,"exp2" : 5,"exp3" : 1,"exp4" : {"cl1" : 12,"cl2" : 4,"cl3" : 8},"exp5" : {"cl1" : 3,"cl2" : 7,"cl3" : 5},"id" : "Gene3","shape" : "sphere","size" : 1,"x" : 355,"y" : 160},{"color" : "rgb(255,0,0)","exp1" : 4,"exp2" : 2,"exp3" : 1,"exp4" : {"cl1" : 1,"cl2" : 14,"cl3" : 7},"exp5" : {"cl1" : 2,"cl2" : 1,"cl3" : 15},"id" : "Gene4","label" : "Receptor Gene4","shape" : "sphere","size" : 1,"x" : 355,"y" : 340},{"color" : "rgb(255,0,0)","exp1" : 1,"exp2" : 3,"exp3" : 2,"exp4" : {"cl1" : 4,"cl2" : 4,"cl3" : 8},"exp5" : {"cl1" : 6,"cl2" : 7,"cl3" : 2},"height" : 20,"id" : "Gene5","shape" : "sphere","width" : 20,"x" : 255,"y" : 100},{"height" : 40,"hideLabel" : true,"id" : "Met","imagePath" : "https : //www.canvasxpress.org/assets/images/met.png","shape" : "image","width" : 40,"x" : 255,"y" : 400},{"exp1" : 3,"exp2" : 3,"exp3" : 4,"exp4" : {"cl1" : 2,"cl2" : 14,"cl3" : 1},"exp5" : {"cl1" : 9,"cl2" : 3,"cl3" : 5},"height" : 40,"id" : "Gene7","imagePath" : "https : //www.canvasxpress.org/assets/images/prot7.png","shape" : "image","width" : 40,"x" : 50,"y" : 250},{"height" : 40,"hideLabel" : true,"id" : "DNA","imagePath" : "https : //www.canvasxpress.org/assets/images/dna1.png","shape" : "image","width" : 40,"x" : 450,"y" : 250}] } <-- Create the configuration for the graph --> var config = { "calculateLayout":"false", "decorations":[ "exp1", "exp2", "exp3" ], "decorationsPosition":"top", "decorationsType":"bar", "graphType":"Network", "networkFreezeOnLoad":"true", "nodeFontColor":"rgb(29,34,43)", "showAnimation":"true", "showDecorations":"true" } <!-- 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-networkbasic-nodes.txt", header=TRUE, sep="\t", quote="", fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE) edges=read.table("https://www.canvasxpress.org/data/cX-networkbasic-edges.txt", header=TRUE, sep="\t", quote="", fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE) canvasXpress( nodeData=nodes, edgeData=edges, calculateLayout=FALSE, decorations=list("exp1", "exp2", "exp3"), decorationsPosition="top", decorationsType="bar", graphType="Network", networkFreezeOnLoad=TRUE, nodeFontColor="rgb(29,34,43)", showAnimation=TRUE, showDecorations=TRUE )