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" : [{"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", "networkColaStartUnconstrainedIterations":"30", "networkColaSymmetricDiffLinkLengths":"5", "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-chris-nodes.txt", header=TRUE, sep="\t", quote="", fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE) edges=read.table("https://www.canvasxpress.org/data/cX-chris-edges.txt", header=TRUE, sep="\t", quote="", fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE) canvasXpress( nodeData=nodes, edgeData=edges, graphType="Network", networkColaStartUnconstrainedIterations=30, networkColaSymmetricDiffLinkLengths=5, networkLayoutType="cola", nodeColor="rgb(31,119,180)", nodeSizeScaleFactor=0.5 )