Go Extinct!

Force directed version

This is the force directed version of the code. Actually, it’s a mix of tree layout and force directed chart: I’m positioning the nodes and links using the tree layout and, after that, I’m using the force simulation to separate the nodes. The images don’t correspond to the nodes, I assigned them arbitrarily, and there are repeated images (since you had less images than nodes in your image folder).

This method has some pros and cons.

Pros:

• We can be sure that there are no overlapping nodes.
• The whole layout is less evenly spaced, giving it a more “natural” look.

Cons:

• Since this is a force simulation, we cannot know where each node is ending up. The process is random.
• We cannot guarantee that there will be no links crossing.

Because of those problems I added a drag feature, which the user can use to make improvements to the layout, I don’t know if you like the idea.

Don’t worry about the privacy of your data, I’m using a “noindex/nofollow” on this page.