Skip to content

Instantly share code, notes, and snippets.

@sdowsland

sdowsland/index.html

Created February 26, 2016 16:15
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save sdowsland/faecbe964fc28b2e35f1 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save sdowsland/faecbe964fc28b2e35f1 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. sdowsland created this gist Feb 26, 2016.
    88 changes: 88 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,88 @@
    <!-- 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>