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
<!-- 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
)
