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>
);
}