You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
88 lines
3.0 KiB
HTML
88 lines
3.0 KiB
HTML
5 years ago
|
<!-- This example demonstrates the JavaScript source code generated by pattern.graph's export().
|
||
|
|
It is a combination of canvas.js and graph.js.
|
||
|
|
canvas.js is a simple API for the HTML <canvas> element to generate 2D animated graphics.
|
||
|
|
graph.js is a JavaScript implementation of the pattern.graph module.
|
||
|
|
Try opening this file in a modern browser (e.g., Chrome).
|
||
|
|
-->
|
||
|
|
<!doctype html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>graph.js example</title>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<script type="text/javascript" src="../../pattern/canvas.js"></script>
|
||
|
|
<script type="text/javascript" src="../../pattern/graph/graph.js"></script>
|
||
|
|
<style type="text/css">
|
||
|
|
body { font: 11px sans-serif; }
|
||
|
|
#graph canvas { }
|
||
|
|
#graph .node-label { font-size: 11px; }
|
||
|
|
#graph {
|
||
|
|
display: inline-block;
|
||
|
|
position: relative;
|
||
|
|
overflow: hidden;
|
||
|
|
border: 1px solid #ccc;
|
||
|
|
}
|
||
|
|
a { color: dodgerblue; }
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="graph" style="width:700px; height:500px;">
|
||
|
|
<!-- A canvas.js animation has a <script type="text/canvas">
|
||
|
|
with a JavaScript setup() and draw() function.
|
||
|
|
-->
|
||
|
|
<script type="text/canvas">
|
||
|
|
function setup(canvas) {
|
||
|
|
/* The canvas setup() function is called once before the animation starts.
|
||
|
|
* Set the canvas size and initialize the graph.
|
||
|
|
*/
|
||
|
|
canvas.size(700, 500);
|
||
|
|
// Add random nodes and edges.
|
||
|
|
g = new Graph(canvas.element);
|
||
|
|
for (var i=0; i < 50; i++) {
|
||
|
|
g.addNode(i+1);
|
||
|
|
}
|
||
|
|
for (var i=0; i < 75; i++) {
|
||
|
|
var node1 = choice(g.nodes);
|
||
|
|
var node2 = choice(g.nodes);
|
||
|
|
g.addEdge(node1, node2, {weight: Math.random()});
|
||
|
|
}
|
||
|
|
// Calculate node weight (incoming traffic).
|
||
|
|
// Calculate node centrality (passing traffic).
|
||
|
|
g.eigenvectorCentrality();
|
||
|
|
g.betweennessCentrality();
|
||
|
|
// Two handy tricks to prettify the layout:
|
||
|
|
// 1) Nodes with a higher weight (i.e. incoming traffic) appear bigger.
|
||
|
|
// 2) Nodes with only one connection ("leaf" nodes) have a shorter connection.
|
||
|
|
for (var i=0; i < g.nodes.length; i++) {
|
||
|
|
var n = g.nodes[i];
|
||
|
|
n.radius = n.radius + n.radius * n.weight;
|
||
|
|
}
|
||
|
|
for (var i=0; i < g.nodes.length; i++) {
|
||
|
|
var e = g.nodes[i].edges();
|
||
|
|
if (e.length == 1) {
|
||
|
|
e[0].length *= 0.2;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
g.prune(0);
|
||
|
|
g.layout.k = 4.0; // Force constant (= edge length).
|
||
|
|
g.layout.force = 0.01; // Repulsive strength.
|
||
|
|
g.layout.repulsion = 50; // Repulsive radius.
|
||
|
|
}
|
||
|
|
function draw(canvas) {
|
||
|
|
/* The canvas draw() function is called each animation frame.
|
||
|
|
* Update the graph and draw nodes and edges to the canvas.
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
if (g.layout.iterations <= 500) {
|
||
|
|
fill(0, 0, 0, 0); // RGBA fill color for all nodes.
|
||
|
|
stroke(0, 0, 0, 1); // RGBA stroke color for all nodes & edges.
|
||
|
|
canvas.clear();
|
||
|
|
shadow();
|
||
|
|
g.update(2);
|
||
|
|
g.draw(weighted=0.5, directed=true);
|
||
|
|
}
|
||
|
|
g.drag(canvas.mouse); // Enable node dragging.
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|