This is a dynamic graph visualization. It's still coming together. It is based on this paper, a paper which is taking me the better part of a decade's free time to understand.

  1. Click "add vertex" to specify an id for a new vertex.
  2. Click "add edge" to specify the ids of two previously added vertices, (be sure to prefix it with a #)
  3. Rotate your graph by holding the left mouse button clicked, and dragging it across the area.
  4. Double click an item to center it, double click empty space to return the camera to normal.

The code for this simple graph looks like something this: 

<graph-visualization 
  width="100%"
  height="500px">

  <graph-vertex id="one" size="10" face="blue" ondblclick="centerAround(this)"></graph-vertex>
  <graph-vertex id="two" size="10" face="green" ondblclick="centerAround(this)"></graph-vertex>
  <graph-vertex id="three" size="10" face="red" ondblclick="centerAround(this)"></graph-vertex>
  <graph-vertex id="four" size="10" face="purple" ondblclick="centerAround(this)"></graph-vertex>
  
  <graph-edge source="#one" target="#two" color="red"></graph-edge>
  <graph-edge source="#one" target="#three"></graph-edge>
  <graph-edge source="#one" target="#four"></graph-edge>
  <graph-edge source="#two" target="#three"></graph-edge>
  <graph-edge source="#two" target="#four"></graph-edge>
  <graph-edge source="#three" target="#four"></graph-edge>
</graph-visualization>
Coming soon:
  • Vertex Labels
  • Edge Labels
  • Heavier Math

I am currently looking for work, either remote or in the Las Vegas area. joshua.moore@leudla.net