A simplistic app for displaying family trees in your browser.
Features:
- visualize family tree data in your browser
- expand and collapse the tree by clicking on nodes
- hover over nodes to display additional information in tooltips
- move around the tree by zooming and panning
- uses d3-dag for layout calculation and d3 for rendering
| ❗ Note for developers |
|---|
| v1.0.0 introduced significant changes to the codebase. Read more here. |
- Edit
data/data.jsto represent your family tree - Open
index.html - Done!
The file data/data.js defines a single JavaScript object named data that represents your family tree. The structure is as follows:
start: The ID of the person who should be the starting point of the family tree. Only this person will be visible, initially. Further family members become visible when clicking on it.persons: An object where each key is a unique person ID, and each value is an object with metadata about that person. It is recommended to at least addname,birthyear,birthplace,deathyearanddeathplace, as these information are shown in the tooltip by default.unions: An object where each key is a unique union ID, and each value is an object with metadata about the union. The object may be empty.links: An array of pairs, each representing a connection (edge) between a person and a union. This list will be used to construct the tree.
data = {
"start":"p2",
"persons": {
"p1": { "name": "Adam", "birthyear": 1900, "deathyear": 1980, "birthplace": "Alberta", "deathplace":"Austin", "other": "enter anything here" },
"p2": { "name": "Berta", "birthyear": 1901, "deathyear": 1985, "birthplace": "Berlin", "deathplace": "Bern" },
"p3": { "name": "Charlene", "birthyear": 1930, "deathyear": 2010, "birthplace": "Château", "deathplace": "Cuxhaven" },
//...
},
"unions": {
"u1": { },
"u2": { "foo": "bar" },
//...
},
"links": [
["p1", "u1"],
["p2", "u1"],
["u1", "p3"],
//...
]
}