Phylogenetic Tree with Genetic Distance

Functional Overview

This example visualizes evolutionary relationships between species with branch lengths representing genetic distance or time since divergence. Nodes represent species, and the distance between connected nodes shows how closely related they are. Commonly used in biology and paleontology.

Implementation of Key Features

Distance-Based Layout

const createPhylogeneticTree = (speciesData: Species[]) => {
    const nodes = speciesData.map(species => ({
        id: species.name,
        text: species.name,
        data: {
            geneticDistance: species.distanceFromRoot,
            divergenceTime: species.divergenceTime
        }
    }));

    // Position nodes based on genetic distance
    nodes.forEach(node => {
        node.x = node.data.geneticDistance * scale;
        // Y position determined by cladistics algorithm
    });

    return { nodes, lines };
};

Branch Length Representation

const lines = phylogeneticData.map(branch => {
    const length = branch.geneticDistance * scale;

    return {
        from: branch.ancestor,
        to: branch.descendant,
        text: `${branch.geneticDistance.toFixed(2)} substitutions`,
        // Line length proportional to genetic distance
    };
});

Clade Highlighting

const highlightClade = (cladeRoot: string) => {
    const cladeMembers = getCladeMembers(cladeRoot);
    cladeMembers.forEach(member => {
        graphInstance.updateNode(member, {
            color: '#ff5722',
            borderWidth: 2
        });
    });
};

Creative Use Cases

Evolutionary Biology: Teach phylogenetic relationships.

Epidemiology: Track virus mutation and spread.

Linguistics: Show language family trees with time depth.

Genealogy: Family trees with generational distances.

Feature Evolution: Software feature lineage and evolution.

Tree - Level Distance & Node Distance