View on GitHub

GraphFellow

GraphFellow: directed graphs in JavaScript

Download this project as a .zip file Download this project as a tar.gz file

beta: GraphFellow is still in development!

GraphFellow documentation

Quick start

Create example.json defining a graph on a 1000 × 1000 grid (the default — don’t worry, it scales to fit your page when it’s rendered), with a “tick” every 2 seconds. This graph has four vertices joined by six edges (two are bi-directional diagonals), and one traveller that moves along them:

{
  "vertices": [
    { "id": "A", "x": 200, "y": 225 },
    { "id": "B", "x": 800, "y": 225 },
    { "id": "C", "x": 800, "y": 775 },
    { "id": "D", "x": 200, "y": 775 }
  ],
  "edges": [
    { "from": "A", "to": "B"},
    { "from": "B", "to": "C"},
    { "from": "C", "to": "D"},
    { "from": "D", "to": "A"},
    {
      "from": "A", "to": "C",
      "is_bidirectional": true,
      "journey_duration": 1.4
    },
    {
      "from": "B", "to": "D",
      "is_bidirectional": true,
      "journey_duration": 1.4
    }
  ],
  "travellers": [
    {
      "at_vertex": "A", 
      "radius": 30,
      "on_arrival": "_pulse",
      "fill_color": "0xff0000",
      "stroke_color": "0xff0000"
    }
  ],
  "config": {
    "vertices": {
      "stroke_width": 8,
      "radius": 120,
      "text_font_size": 80,
      "has_pulse": true,
      "pulse_scale": 1.2,
      "is_pulse_blur": false
    },
    "edges": {
      "stroke_width": 8,
      "arrowhead_length": 40
    },
    "tick_period": 2,
    "on_tick": "_send_travellers_on_all_random"
  }
}

Include the Pixi.js and Greensock libraries that GraphFellow uses. Use a CDN, or provide local copies.

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.0/pixi.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>

Load graphfellow.js:

<script src="graphfellow.js"></script>

Add a container with class graphfellow, and link to its JSON:

<div class="graphfellow" data-graph-src="example.json"></div>

Populate the graph with init:

<script> GraphFellow.init() </script>

…and graphy magic happens.




Really graphfellow.js is probably all you need, but if you download the whole repo you’ll get all the example source files to poke around in too.