Lately I’ve been playing around with implementing genealogy sparklines on the web. Still very much a work in progress, but I’m trying to do more working in public, so here’s the messy current status (and at some point I’ll post the actual HTML/CSS):
Ruby test
Implementation notes:
The sparklines use inline SVG
This test uses the <ruby> and <rt> tags, with ruby-position set to under and ruby-align set to start (though only Firefox supports it so it’s not sadly viable for actual use yet)
I don’t really like that it makes the leading uneven (lines that have ruby vs. lines that don’t)
Design notes:
Rather than having solid squares at the births and deaths, I’ve gone for vertical lines so they’re less obtrusive (and have also considered just getting rid of the vertical lines, though I haven’t tried it out yet)
Circles are simple so I went with them for marriages and children
Absolute positioning test
Implementation notes:
The names are wrapped in span tags with position: relative set, and the SVG gets position: absolute. Fairly simple.
Even leading!
There’s some wonkiness right now when the span is at the beginning of a line (the sparkline shows up at the end of the previous line), haven’t tried very hard to fix it yet
This proof of concept takes the genealogy sparklines idea and puts it on a pedigree chart:
The white diamond represents a marriage, and the small circles represent children. The length of the line corresponds to how long the person lived. (Also, the data is very made up.)
As I’m writing this, I’m thinking these sparklines might work better on a family group sheet instead of a pedigree chart.
Yesterday morning I was thinking about sparklines and how they might be used in genealogy, and after a few quick sketches I came up with this:
Here’s how it works for individuals: the first black dot is their birth. Each pixel is one year. The final dot is their death. Any middle dots are the person’s marriage(s). It’s nice because you can see at a glance how long they lived (in comparison to others), whether they married early or late (and how many times), and so on.
For families, the first dot is the marriage year. The last is the year the second parent died or a divorce year, whichever comes first. Any dots in between are children. Again, it provides a lot of information in a small space — how long they were married, how many children and how they were spaced, etc.
I originally thought of using different colors for the various dots (you can see a glimmer of this in the family sparkline for Tom & Jane Smith), but I’m now thinking it’d be better to leave them monochromatic so that they can still carry all the information when printed/displayed in black and white. (The line could be black instead of grey, of course.) Once the rules are understood (what each dot means), there’s no need for colors to differentiate them.
You could also use these when writing family histories:
If including them inline isn’t your style, you could always use footnotes or sidenotes:
I’m in the middle of figuring out if there’s a good, compact way to represent one’s ancestors via sparklines. I’ll post again if I come up with anything. Oh, and I haven’t written any code to generate these genealogy sparklines yet, but soon…
