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" : "n2","id2" : "n1"},{"id1" : "n3","id2" : "n1"},{"id1" : "n3","id2" : "n2"},{"id1" : "n4","id2" : "n1"},{"id1" : "n4","id2" : "n2"},{"id1" : "n4","id2" : "n3"},{"id1" : "n5","id2" : "n1"},{"id1" : "n6","id2" : "n1"},{"id1" : "n7","id2" : "n1"},{"id1" : "n7","id2" : "n5"},{"id1" : "n7","id2" : "n6"},{"id1" : "n8","id2" : "n1"},{"id1" : "n8","id2" : "n2"},{"id1" : "n8","id2" : "n3"},{"id1" : "n8","id2" : "n4"},{"id1" : "n9","id2" : "n1"},{"id1" : "n9","id2" : "n3"},{"id1" : "n10","id2" : "n3"},{"id1" : "n11","id2" : "n1"},{"id1" : "n11","id2" : "n5"},{"id1" : "n11","id2" : "n6"},{"id1" : "n12","id2" : "n1"},{"id1" : "n13","id2" : "n1"},{"id1" : "n13","id2" : "n4"},{"id1" : "n14","id2" : "n1"},{"id1" : "n14","id2" : "n2"},{"id1" : "n14","id2" : "n3"},{"id1" : "n14","id2" : "n4"},{"id1" : "n17","id2" : "n6"},{"id1" : "n17","id2" : "n7"},{"id1" : "n18","id2" : "n1"},{"id1" : "n18","id2" : "n2"},{"id1" : "n20","id2" : "n1"},{"id1" : "n20","id2" : "n2"},{"id1" : "n22","id2" : "n1"},{"id1" : "n22","id2" : "n2"},{"id1" : "n26","id2" : "n24"},{"id1" : "n26","id2" : "n25"},{"id1" : "n28","id2" : "n3"},{"id1" : "n28","id2" : "n24"},{"id1" : "n28","id2" : "n25"},{"id1" : "n29","id2" : "n3"},{"id1" : "n30","id2" : "n24"},{"id1" : "n30","id2" : "n27"},{"id1" : "n31","id2" : "n2"},{"id1" : "n31","id2" : "n9"},{"id1" : "n32","id2" : "n1"},{"id1" : "n32","id2" : "n25"},{"id1" : "n32","id2" : "n26"},{"id1" : "n32","id2" : "n29"},{"id1" : "n33","id2" : "n3"},{"id1" : "n33","id2" : "n9"},{"id1" : "n33","id2" : "n15"},{"id1" : "n33","id2" : "n16"},{"id1" : "n33","id2" : "n19"},{"id1" : "n33","id2" : "n21"},{"id1" : "n33","id2" : "n23"},{"id1" : "n33","id2" : "n24"},{"id1" : "n33","id2" : "n30"},{"id1" : "n33","id2" : "n31"},{"id1" : "n33","id2" : "n32"},{"id1" : "n34","id2" : "n9"},{"id1" : "n34","id2" : "n10"},{"id1" : "n34","id2" : "n14"},{"id1" : "n34","id2" : "n15"},{"id1" : "n34","id2" : "n16"},{"id1" : "n34","id2" : "n19"},{"id1" : "n34","id2" : "n20"},{"id1" : "n34","id2" : "n21"},{"id1" : "n34","id2" : "n23"},{"id1" : "n34","id2" : "n24"},{"id1" : "n34","id2" : "n27"},{"id1" : "n34","id2" : "n28"},{"id1" : "n34","id2" : "n29"},{"id1" : "n34","id2" : "n30"},{"id1" : "n34","id2" : "n31"},{"id1" : "n34","id2" : "n32"},{"id1" : "n34","id2" : "n33"}], "nodes" : [{"color" : "rgb(255,0,0)","id" : "n1"},{"color" : "rgb(255,0,0)","id" : "n2"},{"color" : "rgb(255,0,0)","id" : "n3"},{"color" : "rgb(255,0,0)","id" : "n4"},{"color" : "rgb(255,0,0)","id" : "n5"},{"color" : "rgb(255,0,0)","id" : "n6"},{"color" : "rgb(255,0,0)","id" : "n7"},{"color" : "rgb(255,0,0)","id" : "n8"},{"color" : "rgb(255,0,0)","id" : "n9"},{"color" : "rgb(255,0,0)","id" : "n10"},{"color" : "rgb(255,0,0)","id" : "n11"},{"color" : "rgb(255,0,0)","id" : "n12"},{"color" : "rgb(255,0,0)","id" : "n13"},{"color" : "rgb(255,0,0)","id" : "n14"},{"color" : "rgb(255,0,0)","id" : "n15"},{"color" : "rgb(255,0,0)","id" : "n16"},{"color" : "rgb(255,0,0)","id" : "n17"},{"color" : "rgb(255,0,0)","id" : "n18"},{"color" : "rgb(255,0,0)","id" : "n19"},{"color" : "rgb(255,0,0)","id" : "n20"},{"color" : "rgb(255,0,0)","id" : "n21"},{"color" : "rgb(255,0,0)","id" : "n22"},{"color" : "rgb(255,0,0)","id" : "n23"},{"color" : "rgb(255,0,0)","id" : "n24"},{"color" : "rgb(255,0,0)","id" : "n25"},{"color" : "rgb(255,0,0)","id" : "n26"},{"color" : "rgb(255,0,0)","id" : "n27"},{"color" : "rgb(255,0,0)","id" : "n28"},{"color" : "rgb(255,0,0)","id" : "n29"},{"color" : "rgb(255,0,0)","id" : "n30"},{"color" : "rgb(255,0,0)","id" : "n31"},{"color" : "rgb(255,0,0)","id" : "n32"},{"color" : "rgb(255,0,0)","id" : "n33"},{"color" : "rgb(255,0,0)","id" : "n34"}] } <-- Create the configuration for the graph --> var config = { "coordinateNetworkConvexHullCommunityColor":"true", "graphType":"Network", "showNetworkCommunities":"true", "title":"Zachary's famous Karate Club" } <!-- 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-networkkarate-nodes.txt", header=TRUE, sep="\t", quote="", fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE) edges=read.table("https://www.canvasxpress.org/data/cX-networkkarate-edges.txt", header=TRUE, sep="\t", quote="", fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE) canvasXpress( nodeData=nodes, edgeData=edges, coordinateNetworkConvexHullCommunityColor=TRUE, graphType="Network", showNetworkCommunities=TRUE, title="Zachary's famous Karate Club" )