Help
In theory, the Tree of Life represents all living organisms, along with their parents, grandparents, and so on, all the way up to a single common ancestor.
Each name labels a node, and represents a biological taxon, such as a species or genus. The top node is the root, and those at the bottom are leaves.
The metaphor doesn't always fit. For example, many bacteria can transfer DNA to each other without creating children. But the concept is still helpful for visualisation.
Determining the structure of the tree is an ongoing area of work, but much of it has been traced out using genetic information, statistical analysis, and human inference.
Tilo attempts to display the Tree of Life by representing nodes with tiles, and placing tiles within other tiles to show structure.
Within a tile's header:
- The color denotes the number of children. White means zero, green means 1+, orange means 10+, and red means 100+.
- An asterisk indicates that the node's placement lack evidence, or is disputed. (In the Open Tree of Life, each node has zero or more associated hypothetical trees that either support or conflict with it. The asterisk is added if there are no supporting trees, or if there is a single conflicting tree.)
There are many other methods of visualisation, which can enable viewing
many more nodes as text, or for exploring a more natural tree-like diagram.
Examples include
iTOL
This section provides some details not included in the tutorial.
Settings
-
Sweep leaves left
If disabled, an expanded tile's children are simply laid out in order, fromleft to right, then top to bottom. This can leave a lot of empty space when large children are next to small ones. Moving the unexpanded children (the 'leaves') to the left helps avoid this.
-
Sweep into parent
If enabled, leaves being swept left can be moved beyond the tile's rectangle, into leftover space in the parent.
-
Trees to use
Three choices are available, and all are simplified versions of the tree from the Open Tree of Life. (Without this, some nodes would have over 10,000 children, and significantly slow the browser down during rendering)
- Complex: The least simplified choice. In short, it only includes nodes that have an image or description, with a soft limit of 600 children. (Has about 450,000 nodes)
- Visual: Only keeps nodes with images, with a soft limit of 300 children. (Has about 140,000 nodes)
- Minimal: Created using a rough list of 'well known' taxons, and adding a few more at random. (Has about 3,300 nodes)
-
Slider Resets
You can {{touchDevice ? 'tap' : 'click'}} on a slider's label to reset it to the default value.
Keyboard Shortcuts
- Ctrl-F opens the search bar
- Ctrl-Shift-F toggles the search animation
- Esc closes an open pane, and cancels an active search or auto mode
Unusual Node Names
-
Disambiguation Nodes
These have names like 'Iris [2]'. When multiple nodes are found to have the same name, all but one gets an '[N]' appended, where N is 2 or higher.
-
Compound Nodes
These are only present in the Complex tree, and have names like '[Homo Sapiens + Homo Heidelbergensis]'. They provide structure for other nodes, and are named after two prominent descendants.
Overflowing Tiles
Some tiles have too many children to fit on-screen at once, and are displayed with a scroll bar. For layout reasons, this is only done if they are the outermost tile, so you may need to {{touchDevice ? 'double tap' : 'click and hold'}} the tile to expand it.
Sources
-
The tree structure was obtained from the Open Tree of Life
synthesis release
version 13.4, accessed 23/04/2022. -
The images and alternative-names data was partly obtained from the
Encyclopedia of Life. Name data was obtained from
here
, and image metadata from here , accessed 24/04/2022. -
The short descriptions, along with the remaining images and name data,
were obtained from Wikipedia. Descriptions were extracted from the
Wikipedia dump
for 01/05/22, and also obtained from the DBpedia knowledge base for 01/03/22. Images were downloaded from Wikipedia during Jun 2022.
Data Inconsistencies
When handling datasets this large, these are almost unavoidable. Significant effort was expended to minimise them, but, inevitably, there are always more. The most prominent types are listed below. If you find a major error, feel free to let me know at terry06890@gmail.com.
-
Errors in Node Linkage
The datasets don't share the same set of node identifiers. So, in order to link nodes from one dataset with another, their plain names were used. This doesn't work when names are ambiguous. For example, 'Proboscidea' might denote a taxon for elephants, but also plants. Most of these were manually corrected, but there are almost certainly more.
-
Errors Within the Datasets
Some issues are internal to the datasets themselves. For example, an image from EOL might display a plant that is in the wrong taxon. As most of the datasets are large projects distributed over many people over a long period of time, these errors are difficult to avoid, and may require specialised knowledge to resolve.
-
Errors in Descriptions
The short descriptions were extracted using imprecise heuristics. There are many cases of leftover wikitext markup, or cut-off sentences.
Some Possible Points of Confusion
-
Unexpected Images
Not all the images are well-suited for display. For example, many birds have their heads cropped out. And some fish are shown in a preserved form that is hard to recognise. And some moths are shown alongside a more prominent plant, and are hard to see.
-
Unexpected Search Results
- In the Complex tree, searching for 'orange', then pressing enter, brings up a kind of butterfly, instead of a citrus plant. This is because suggestions are not yet ordered by how well known the taxon is.
- In some cases, a search might unexpectedly have no results. For example, searching for 'golden retriever' brings up nothing. This is because breeds of domestic dog are not considered separate species, but as variant descendants of Canis familiaris.
Other Credits
-
The UI was largely coded in
Typescript
, and built using the Vue framework -
Tree data was processed using
Python
, and stored using Sqlite -
Styling was enhanced using
Tailwind
-
The font is called
Ubuntu Font
- Icons were obtained from
Feathericons
and Ionicons -
Images were cropped using
Smartcrop
Licensing
- The project's code is licensed under the MIT license
-
Tree data from the Open Tree of Life is licensed under the
BSD 2-Clause License
- Image licensing information is available from a tile's info pane, under 'Source information'
-
The short descriptions are extracted from Wikipedia's page content,
which is available under the
CC BY-SA 3.0 license