Blog: #sparklines

We’ll group the projects together today.

Family pedigrees

An old-yet-new chart type: family pedigrees.

As you can see, it’s a little different from the initial design. This modern incarnation admittedly isn’t as pretty in some ways, but it’s a heck of a lot easier to lay out programmatically.

New things: It shows which child the line comes through, I added the lifespan right after each parent’s name, and I added indicators for the children showing how many kids they had (the dot) and how many marriages (the slash, though if they were married only once and had children, I left the marriage indicator off).

It also supports four generations, admittedly with less space and smaller type:

I tried it without the table borders, by the way. While it was more readable than I expected, it felt a little too loose and unmoored.

The input uses ArchieML and currently looks like this:

[families]

family: 1.1
marriage: 30 Dec 1829 in Polanco
father: José Antonio Fuentevilla Fuentevilla // 1809-1878
mother: Manuela Gándara Cobo // 1811-1879
[.children]
  name: ? // 1830-1831

  name: Josefa // 1832-1834

  name: Francisca Maria // 1835-1843

  name: Maria Remedios // 1838-1898
  children: 6

  name: Maria Luisa // 1841-1916
  marriages: 1

  name: Manuel // 1845-

  name: < Maria Isabel // 1848-1928
  children: 9

  name: Maria Dolores // 1853-1853

  name: José Maria // 1858-1858
[]

# --------------------------------------

family: 2.1
marriage: 29 Feb 1808 in Polanco
father: José Fuentevilla Piñera // 1779-1855
mother: Vicenta Manuela Fuentevilla Ruiz // 1787-1828
[.children]
  name: < José Antonio // 1809-1878
  children: 9

  ...etc.
[]

...etc.

Right now the family numbering is table-based (column, row), but eventually I think I probably want to make it hierarchical (somehow) so it’s easier to know which cell to put things in.

Timeline charts

Another new chart of sorts: timelines. I’ve been sorting through my Cuban lines and realized I needed some way to map out everybody so I could see the bigger picture.

The input is an ArchieML file that just lists events with dates and optional places:

title: Cuba timeline

[timeline]

event: Antonio Sánchez Rodríguez Díaz marries Ana Josefa Muñoz y Martínez Machado, possibly in El Calvario
daterange: 1790s-1800s

event: Agustin Sánchez Muñoz marries Ana Josefa Montoro, who then dies before 7 Feb 1835
daterange: 1790s-1830s

event: Rafaela Crispina Sánchez Muñoz born to Antonio Sánchez Rodríguez Díaz and Ana Josefa Muñoz y Martínez Machado
date: 1805 Oct 25
place: Matanzas City

event: Domingo Sánchez Muñoz born to Antonio Sánchez Rodríguez Díaz and Ana Josefa Muñoz y Martínez Machado
date: 1807 May 12
place: Matanzas City

event: Antonia Crispina Vargas Hernández is born to José Vargas and Gertrudis Hernández
daterange: 1800s
place: Güira de Melena, Mayabeque

...etc.

If the date is a range, it’s italicized to show that it’s broader than a specific date.

(I originally was just going to use Google Docs for this, by the way, and made an initial prototype there. Having to do all the formatting manually got old, though, so I scripted it. Now I can just focus on the content.)

Family sheets update

I’ve got almost all the family sheet functionality ported to Node/JavaScript and cleaned up. (The sparklines code now uses tracks and markers in a way that is much more extensible and easier to work with.) In the process, I also revised the resolution (before, it just keyed off the year, but now it uses the month and day if present as well, so spacing is more accurate), added dotted-line support for date ranges (for birth and death), and added a marker for divorce (a skinny X):

Still have a number of bugs to fix, but it’s getting close.

Tabular pedigrees update

I ported the tabular pedigrees to Node/JavaScript and added support for seven-generation charts:

Comparison to the six-generation chart:

The shaded cells, by the way, indicate that I haven’t yet verified those people. Basically a TODO comment for myself.

Can’t wait till Chrome supports border stroke widths smaller than 1pt.

Quick links

Last and sort of least, I’m slowly putting together a page with quick links to the various Torre de’ Passeri civil registration scans on FamilySearch, to save myself some time. Planning to do this for the other localities I do research in as well.

Reply via email or office hours

I’ve been doing a lot of genealogy lately, and as part of that I’ve been refining the family sheets I mentioned last time:

Ancestor line chart

The main new thing is the ancestor line chart in the upper right, showing where the family is on my line in relation to me, with fathers on the left and mothers on the right. (So this family is my mother’s mother’s mother’s father’s father’s parents.) Each person’s initial is in the circle.

For collateral lines, it looks like this:

If the family sheet were for Agustin’s grandchildren or great-grandchildren, the collateral line would extend further downward (with each collateral line generation lining up with its parallel main line generation).

The syntax for both ancestor line charts:

line: -T -J -A A- E- LF

line: -T J- A- -I -M -J PA > A-

I went through a whole bunch of iterations on the syntax before landing on this, which I really like. It’s concise and reads easily to me, and it also happens to be very, very easy to parse.

Family sparklines

I’ve changed the family sparklines to show whether children are sons (hollow diamonds) or daughters (filled circles), and the marriages are now slightly thicker and longer vertical lines. (So in the second screenshot, you can see that Agustin married three times. And yes, he had a couple children when he was in his sixties!)

Though these don’t show it, I’ve also added support for twins and other multiple births.

Next up, I’m planning to add dotted lines for date ranges (“died between X and Y”) and markers for divorce and for the death of a spouse. Also working toward making this month-level granular instead of just year-level. (Right now, if someone is born in January of one year and their next sibling is born December of the next year, the sparklines make it look like they’re only one year apart even though in reality they’re almost two apart.)

Other changes

The layout has changed a bit, mostly to give more horizontal room for the sparklines, and to set the husband and wife side by side (which saves vertical space and also creates a spatial analogue to the ancestor line chart).

I’m no longer manually (and laboriously) loading these in the browser to export the PDFs. Instead, I call Chrome in headless mode as part of my script:

/Applications/Google Chrome.app/Contents/MacOS/Google Chrome \
  --headless \
  --disable-gpu \
  --print-to-pdf \
  --print-to-pdf-no-header \
  http://local.test/family-sheets/html/FILENAME.html

Last (and also least), I’ve switched the font from EB Garamond to Clifford Pro. Mmm.

The code

Right now the code is a bit of a mess. Now that the prototype has served its purpose, I’m about to rearchitect it all and port it to Node, possibly Bun, possibly with ArchieML. (It’s currently Python with Jinja2 and YAML. For years I’ve used Python for writing almost all my command-line tools, but lately I find that I’d rather write JavaScript. Time for an ecosystem shift.)

Reply via email or office hours

I’ve been thinking more about genealogy sparklines. Decided to pick up the recent work I did in that vein and make it work for families, for use in my new family sheets. This also riffs off my old family analysis project.

Introducing the first draft of family sparklines:

(At this point are they really still sparklines, you ask? Good question.)

These families are from my Spanish line, by the way, which is why there is an abundance of initials.

Basic idea: larger hollow circles are marriages, smaller filled circles are children. Vertical marks at beginning or end for birth and death. (If the vertical tick isn’t present, the birth or death date isn’t known.) Father at the top of the chart, mother at the bottom, children in the middle. Vertical line from father to mother for the parents’ marriage. In cases where the marriage isn’t known (like in the bottom right MA/CS family), the vertical line and circles are left out. People’s initials are at the right to help know who is who. The smaller vertical tick marks on each line mark ten years of age. If there isn’t a death date, it goes five years past the last known date.

It’s still a work in progress, but I like how it provides an at-a-glance overview of a family. With the JAFF/MGC family in the upper left, for example, I can easily see that:

• The parents were alive for all three marriages of their children and most of the grandkids’ births
• They had five children die young
• I don’t have a marriage or death for MFG
• I haven’t found any children for MLFG

You can also see a child born before the wedding, how old people were when they married, gaps where there might have been children, etc.

I’m sure I’ll refine it further in the future, but I wanted to post where it’s at right now.

Reply via email or office hours

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

Reply via email or office hours

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.

Reply via email or office hours

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…

Any thoughts?

Reply via email or office hours