KISS genealogy tree visualization using d3.js + birthday calendar
KISS genealogy tree visualization depending on d3.js only.
https://chezsoi.org/lucas/genealogic-d3/
This tool can only display tree-like genealogies, e.g. all nodes are descendants of one given ancestor, like in a pedigree tree. It won't be able to render generic genealogy graphs with non-unique root ancestor.
A basic setup requires only to put 3 files in a directory, and you'll be able to view the result locally with a browser:
JSON genealogy structure :
{
"name": "Node name",
"caption": "Optional caption",
"miniature_img_url": "Optional image url",
"partner": {
// Optional node with all standard attributes available, except .children
},
"children": [ // Optional
{
// Recurse
}
]
}
You can check the skywalker_genealogy.json for a complete example.
The bundles also include the JS & CSS code for the birthday calendar. The following will generate them, plus a HTML file containing both the calendar and genealogy, assuming there is a file called ${genealogy}_genealogy.json and a directory miniatures${genealogy}/_ containing the pictures :
make genealogy=skywalker
For the needs of the demo, index.html is a bit verbose. There is a basic HTML file skeleton to use genealogic.d3
:
<script type="text/javascript" src="bundle.js"></script>
<svg width="1000" height="1000" id="genealogic-tree"/>
<svg id="genealogic-miniature"/>
<script type="text/javascript">
genealogic.generate({
json_input_genealogy: 'my-family-genealogy.json',
path_to_miniature_imgs: 'miniatures_dir/'
use_fixed_miniature: false, // Defaults to true
});
The list of all those parameters default values can be found in the source code here: https://github.com/Lucas-C/genealogic-d3/blob/master/genealogic-d3.js#L3
This visualization tool can be combined with an 'upload-and-crop-your-own-picture' plugin, to let members of the family upload their photos themselves. E.g. :
Also, this is a useful command to list missing miniatures:
diff <(jq -r '..|objects|.name' genealogy.json | sort) <(ls miniatures | sed 's/\..*//' | sort)
Tl;dr plain English version: https://tldrlegal.com/license/adaptive-public-license-1.0-%28apl-1.0%29