Visualizing the tree of life

TLDR: I made a website about how different species are related: taxonomy.schauderbasis.de

I wanted my children to understand how species are related to each other:

• how jellyfish, dolphins and fish are not related at all, even when they all live in the ocean (visualization)
• that chimpanzees and humans are related in the same way that tigers and lions are (visualization)

Words can only get you so far with complicated topics, so I looked into visualizations of the tree of life. There are some awesome websites out there:

• https://www.onezoom.org/
• https://labs.minutelabs.io/Tree-of-Life-Explorer
• https://www.evogeneao.com/en/explore/tree-of-life-explorer

It was interesting, but I had a hard time finding something that fit the questions my children have. They want to know about specific animal, those that they see in zoological garden.

What I needed was an interactive website that would show a tree of life for those species that I am interested in. I couldn’t find one. But I did find Wikidata.

Wikidata is like Wikipedia, but as a database. A graph database with a lot of very interesting design decisions. And it does have tons of taxonomy data in it (Taxonomy is the science of categorizing things, organisms in this case). Each instance of taxon (think of a taxon as a species) has a parent taxon. And that one has a parent taxon of its own, and so forth… until you arrive at Biota, the root of the tree.

All the tree data I wanted was right there, under a free license and available through an open api.

So I made the interactive visualisation myself. You can find it at taxonomy.schauderbasis.de.

Project goals

• Allow users to explore the tree of life
• Make the website as accessible as possible (for children, not-technical people and people who don’t know a lot biology)

Project strategy

I went for an agile approach (because that is the only way I know how to write software):

• deploy early and continuously
• small, incremental improvements
• use feedback from users to decide what to work on next

Of course, I am doing this in my spare free time, so I need to choose carefully what I work on. Sooo…

• if it is not fun anymore I will stop

At this point I am pretty done with the project. I can’t think of anything I would like to add or remove. But when inspiration strikes I will be happy to come back to work on this.

Technology

I used the most basic setup possible:

• after a short prototype in python I decided that a website would have the lowest entry barrier
• a static website with no dedicated backend
• wrote all the javascript, html and css by hand without a build system
• all the data is queried directly from the Wikidata api
• as few dependencies as possible:
  • axios: for doing http requests to the Wikidata api
  • cytoscape.js: for visualizing the graph
  • cytoscape-tidytree: for a nice, planar layout without crossings
• vendored all (3) of the dependencies so I don’t have to deal with the npm
• functional programming with the courage to choose simplicity over dogma
• no tracking of users, no ads, nothing I wouldn’t like in a website

Of course I only used free software and the project itself is also under a free license (GPL3). I also made sure to track all the sources and licenses of dependencies and assets.

Design decisions

I made a few design decisions that I am pretty proud of:

• query parameters: I save the state of the tree in the query parameters. This allows to revisit or share your tree without a backend saving a single bit about you. Just copy the url and send it to a friend.

• emojy button: For users that don’t want to type I have a button with an unicode character that represents a lifeform (like 🐅.,🍒 or 🐟). When you click on it the name of the life form is fake-typed into the search bar and the life form is inserted into the tree. You can click it multiple times to quickly insert a few species. This is great for discovering what the site does. It is also great for testing.

  Also it turns out that those species that have an emoji associated with them are interesting. There is no emoji for algae, sea cucumbers, or plankton. But there are emojis for most big mammals.

• translations: I query the names of the nodes in all supported languages and keep them in memory. So when you change the language all existing nodes change their language as well. I earned multipe approving “Ohhh…” sounds when users discovered this.

Accessibility

I tried hard to make everything as accessible as possible. This was hard because:

• It is basically a website that shows the image of a tree - if you can’t see that image then there is not much I can give you.
• cytoscape.js does use a canvas to show the tree, not some fancy svg graphics that a screen reader could maybe work with.
• I am doing this without feedback from people that really need those accessibility features. If you are such a person I would love to hear your feedback and suggestions.

Graph visualization libraries

There are not as many graph-visulisation libraries as I had expected. And those I found are not as great for the visualizing trees as I wanted.

In an earlier version I used vis-network as a visalization library. It has many excelent examples and I liked how the tree was curvy and organic. I wasn’t able to make it planar, though. All the branches overlapped all the time.

Wikidata

This project is definitely a love-letter to Wikidata. I didn’t know it before and now I am obsessed with it. What a great resource.

Mastering the SPARQL query language was very hard though. You to know a lot about the graph and the data it encodes. Also, I find it impossible to predict which queries will be fast and which ones will never terminate.

Taxonomy

It turs out that the world of taxonomy is not as clear as I had expected. The tree of life is well defined in it’s basic form, but there are all sorts of open questions to consider:

• Sometimes it is not clear what the parent taxon of a taxon is (there are different opinions and Wikidata contains them all).
• Should viruses be included (Wikidata includes them even when they are not really alive)?
• And of course biology is always more complicated then you would expect it to be. The tree of life is a model and the more you go into the details the more you see where the model doesn’t fit reality.

The problem about uncertainty was one I could solve algorithmically. I decided to remove all the connections that acted as shortcuts. When there are two branches that could reach a taxon (one with many intermediate nodes and one with few) then I would always choose the one with more nodes, deleting the one with few nodes. (The rationale here is that I wanted all the intermediate nodes but not all the complicated connections.) This made the trees a lot cleaner. A LOT!

Only a few cases remained where this algorithm couldn’t decide what to trim. Thats ok, though.

Results

• my children do understand how different species are related and talk about it themselves.
• I learned a lot about a lot of things:
  • javascript
  • accessibility
  • graph libraries
  • graph databases
  • SPARQL (Wikidatas query language)
  • taxonomy in general
  • some species especially
  • responsiveness of websites
• I showed the website to a lot of people and got a lot of great feedback. Most interesting was that every single person found their own species that they wanted to explore. Some went all in on fruit, some into big cats, trees, monkeys, insects… And every single time it was interesting.
• I tried hard to be a good web-citizen:
  • make the website as accessible as I could
  • make the website responsive
  • don’t track your users
  • treat the Wikidata backend well All of this was a lot of work. I am glad I did it, though.
• This is the second “big” vanilla-javascript project and I think I got to a point where I should consider a framework next time. I am torn on this one though, because I don’t want to dive deep into the ever mutating world of frontend frameworks.