General disclaimer for pre-2010 posts: I've changed a lot over the years, and posts this old may not represent my views anymore.

Pedigree chart using HTML5

Here’s a quick demo of a pedigree chart drawn using HTML5 Canvas:

HTML5 Pedigree Chart

The code was pretty much just thrown together; if I were to use this in an actual app, it’d be much cleaner. :) And for some reason it doesn’t quite work in Safari 4, so you’ll need to use Firefox 3.5.

As for next steps, I’m going to try to rewrite the demo using Processing.js. I’m also planning to extend it to allow panning (so you can have a huge pedigree chart onscreen — some of the Flash-based pedigrees out there do the same thing), and I’m itching to do some kind of genealogy demo ala Snow Stack (Safari only).

Comments

Brad Neuberg

This kind of thing would be much easier to do with SVG, as well as the zooming and panning.

Ben

Hmm, good point. I wonder how browser support for SVG compares to browser support for Canvas…

Incidentally, I’m not entirely convinced that zooming is actually such a good idea. It seems that most of the time when something like this is zoomed out, the text quickly becomes so illegible that it’s almost pointless — except for seeing the contour of the tree. But in that case, it almost makes more sense to just provide a thumbnail view of the tree, rendered differently, and leave the main tree at ground level, so to speak.

On second thought, there’s probably a decent range of zoom you could use that wouldn’t leave the text unusable. I may be revising my opinion. :)

Michael Deardeuff

Instead of Processing, how about the library at Raphaeljs.com ?

Also, in terms of web genealogy, have you looked at geni.com? It obviously doesn’t use the familysearch api as it’s datastore, and it doesn’t look at all as nice as your Beyond mockups, but it is a Web2.0 app all the same.

Ben

Raphael looks cool — I’ll look into it. :) Thanks!

And I’ve looked at Geni, and it is better than most of the other genealogy web apps out there, definitely. I started using it a while ago but I think I’m allergic to Flash. :) It’s probably the best solution right now, though.

Ramon Carlos

I never liked the side-ways tree that’s predominant in a bunch of genealogy programs (Family Tree Maker, root web, etc). Furthermore, at least from the Filipino perspective, descendant charts (called Family group in some software) are of more value than Pedigree charts - nonwithstanding their propensity for loops and such.

SO: I used slickmap.css (still need to buy astuteo.com a beer perhaps when I have a few more $$ to spare), I modified it and came up with a “navigable” descendant chart as in http://lichaucoclan.com . This code was cobbled together over Christmas and still needs a bit of work. But the navigation is close to how I’d like it.

I grok that others (myself included) might think a “google maps” type interface implemented in SVG or Flash might be superior. And I haven’t totally given up on either, allergy non-withstanding. But I wanna see how this slickmap based descendant chart fares after a year or so of use.

Good job. I bookmarked your site and might help contribute to your project (code-wise)

Ben

Very cool, and I agree, descendant charts are very useful, especially when researching auxiliary lines. Slickmap.css looks nice, too. Great work.

American Yak

Following up on Michael Deardueff’s comment, I’ve been following on Twitter the guy responsible for the Raphaël Javascript library, and I can sort of vouch for it. John Resig built the processing.js library some time ago but then he seemed to sort of abandon it or something like that, and the main problem with processing.js is that it needs an additional library (which I have yet to see actually work) for cross-browser (read IE) compatibility. While Raphaël can be slow in IE (especially in IE6, long live the King), it does appear to be a much better library, and it definitely has better cross-browser compatibility. It does this by using Canvas for HTML5 enabled browsers, and SVG for IE. I’m not certain what it does, however, for older browsers that don’t support Canvas, like FF 2.whatever. I don’t remember if FF supports SVG, for example.

Some links:

http://twitter.com/RaphaelJS http://twitter.com/DmitryBaranovsk (the man responsible for the library) http://raphaeljs.com/

UPDATE: I just found this thread which claims a fix to processing.js and IE, but I can’t seem to get it to work, so I’m skeptical.

http://groups.google.com/group/processingjs/browse_thread/thread/f1c09dd47049ef2a

Ben

Cool. I’m liking Raphael from what I’ve seen so far.

American Yak

Update on all this. Raphael doesn’t use the canvas tag @ all. My mistake. processingjs does, do it’s probably the superior library. However, for simpler, less-processor-intensive stuff, Raphael is still pretty sweet.

Emin Saglamer

Looks great. I found this page while looking for some sort of code to get me started in making a completely accessible kinship / family tree chart from say something like a UL structure so however fancy the display image, the screen readers will also pick up the hierarchy and correctly read them. I wish your version did that but like I said, wow pretty! the best I have seen so far during my search.

Matias Gamarra

Do you have the code for this PoC? May be I can extend the features looking at the code you use… as I’m quite good at GDI+ graphics and Canvas seems similar.

Ben Crowder

Yep, just view source and all the code is there. :)

Craig Gingell

I have a website I started myself over 15 years ago to record the research into my Gingell family history. I struggled to find anything that worked the way I wanted it to work, so I took an XML/XSLT approach to get it rendering content how I wanted. 10 or so years later, married with two children and little free time to keep the site up to date, it’s looking a little long in the tooth. I now want to develop an HTML5 solution to render the pedigree chart on desktop and mobile devices in a simple and easy to navigate design, while still looking clean and not clunky.

This is what I currently have and hope to improve upon : http://www.gingell.com/familytree/?tree=00001

Leave a comment

Your comment was submitted and will show up as soon as I approve it. Thanks.
Something went wrong with submitting your comment. Try again, and if it still doesn't work, email me (). Sorry!