Human Evolution Tree

An interactive evolutionary tree showing human ancestry with collapsible nodes to explore different branches of human evolution and related species.

import React from 'react';
import { TreeChart } from 'treecharts-react';

// Human evolution tree data structure
const humanEvolutionData = {
  value: "Common Ancestor",
  description:
    "Shared ancestor of humans and other great apes, lived approximately 6-7 million years ago in Africa",
  collapsibleState: { expanded: true },
  child: [
    {
      value: "Australopithecus",
      description:
        "Early hominins who lived 4-2 million years ago, known for bipedalism while retaining ape-like features. Famous example: Lucy (A. afarensis)",
      collapsibleState: { expanded: false },
      child: [
        {
          value: "Homo habilis",
          description:
            "First species in genus Homo (2.8-1.5 million years ago), known as 'handy man' for their tool use and larger brain size",
          collapsibleState: { expanded: false },
          child: [
            {
              value: "Homo erectus",
              description:
                "First hominin to leave Africa (1.9 million-300,000 years ago), developed more sophisticated tools and controlled fire",
              collapsibleState: { expanded: false },
              child: [
                {
                  value: "Homo neanderthalensis",
                  description:
                    "Lived in Europe and Asia (400,000-40,000 years ago), had large brains, complex tools, and buried their dead",
                  collapsibleState: { expanded: false },
                  child: [],
                },
                {
                  value: "Homo sapiens",
                  description:
                    "Modern humans that emerged ~300,000 years ago in Africa, developed language, art, and complex societies",
                  collapsibleState: { expanded: false },
                  child: [],
                },
              ],
            },
          ],
        },
      ],
    },
    {
      value: "Other Great Apes",
      description:
        "Modern great apes that diverged from the human lineage, including chimpanzees, bonobos, gorillas, and orangutans",
      collapsibleState: { expanded: false },
      child: [
        {
          value: "Gorillas",
          description:
            "Largest living primates, primarily terrestrial, with complex social structures and demonstrated intelligence",
          collapsibleState: { expanded: false },
          child: [],
        },
        {
          value: "Orangutans",
          description:
            "Highly intelligent arboreal apes from Southeast Asia, known for tool use and problem-solving abilities",
          collapsibleState: { expanded: false },
          child: [],
        },
      ],
    },
  ],
};

export default function EvolutionTreeExample() {
  return (
    <div className="w-full">
      <TreeChart
        data={humanEvolutionData}
        type="right-angle"
        nodeConfig={{
          type: "collapsible-node",
          color: "#f8f9fa",
          fontColor: "#333",
          width: 220,
          borderColor: "#8B4513",
          borderWidth: 2,
          borderRadius: 8,
        }}
        edgeConfig={{
          color: "#8B4513",
          width: 2,
        }}
        titleConfig={{
          title: "Human Evolution Tree",
          description:
            "Click the ▼ buttons to explore our evolutionary journey",
        }}
        width="100%"
        height="600px"
      />
    </div>
  );
}

Expected Output

Output for Human Evolution Tree
right-anglecollapsible-node