Created
February 26, 2016 16:15
-
-
Save sdowsland/faecbe964fc28b2e35f1 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- 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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment