tangled-web-components

skatejs + d3 + math → graph (as in graph theory) web components.

~ very experimental ~

As well as a very special and original puppy-dog element, a handle-box element, a fancy algorithm for calculating the intersection of a line and a rectangle, and some colorful, smudgy images made in krita.

But don't take my word for it. See for yourself...

Notes

Try the examples locally:

% npm -g install superstatic
% superstatic

Then open the browser to http://localhost:3474/examples/.

Compile:

% npm install
% npm run build

Examples

A dog on a scooter.

<puppy-dog></puppy-dog>

Three dogs on scooters in a totally connected graph:

<graph-container>
  <edges-all-pairs></edges-all-pairs>
  <puppy-dog></puppy-dog>
  <puppy-dog></puppy-dog>
  <puppy-dog></puppy-dog>
</graph-container>

Using an adjacency matrix to define the edges.

<graph-container>
  <edges-adjacency-matrix>
    [[0,1,0],[0,0,1],[1,0,0]]
  </edges-adjacency-matrix>
  <div>reduce</div>
  <div>reuse</div>
  <div>recyle</div>
</graph-container>

The handle-box element makes its contents draggable:

<graph-container>
  <handle-box>
    <h1>grab this</h1>
  </handle-box>
  <handle-box>
    <h1>grab this</h1>
  </handle-box>
<edges-all-pairs></edges-all-pairs>
</graph-container>

Okay! Hope you enjoy!