Tuesday 9 May 2017

Interactive Trees in Blogs Using SVG

OK, something here for you all to play around with. This post demonstrates a proof-of-concept (POC) development showing how interactive family trees can be embedded within blog-posts, or within arbitrary Web pages. But you’ll have to wait until the bottom of this post before you can play with these toys.



Firstly, why would anyone want to do this? Well, the writers of genealogical blogs are generally given scant tools to do their job well; there should be no reason at all why a blog-post could not be as well-presented as an article in a journal, including the use of tables and endnotes, but the available tools are overly simplistic.


This POC is looking at the other end of the spectrum: highly specialised tools for genealogical writers. Including segments of family trees into a blog-post is wonderful to help show the relationships between the people it mentions. But more than this, if the segments are interactive (with clickable actions on the nodes) then they can be used for navigation and a host of other functions.


Until now, I have resorted to drawing my own tree segments in something like Word (using their ‘Shapes’ canvas) and then copying the results to my blogs as static images. Apart from being laborious, the end results were never as clear as I would like, and would go all fuzzy if I tried to expand them. The problem is that normal raster graphics involve fixed grids of pixels (with just one ideal resolution) and employ ”lossy” compression techniques to keep the size down. The technology that I’ve used for this POC is known as Scalable Vector Graphics (SVG) and gives crystal-clear images at all resolutions.


SVG can be embedded within HTML, but I know what you’re thinking: I’m not a programmer and I don’t want to learn how to use this technology or HTML. That’s fair enough, and it would be difficult to generate this stuff by hand anyway. What I’ve done is devise a simple notation that describes the people, relationships, and associated notes. I run this through a piece of code-generating software and out pops the relevant combination of SVG, HTML, CSS, and JavaScript.


So why don’t I generate this directly from a GEDCOM file? Well, this is primarily a POC, although I will be using it for serious purposes myself. The POC is not far removed from an installable product, but I don’t use GEDCOM and so I’ll leave that step to someone else, and similarly with taking the data from an online family tree using an API. Alternatively, trying to directly embed parts of a live online tree within a blog-post, or other Web page, using an HTML <iframe> element, would have a couple of big disadvantages: (1) search engines, such as Google, would not find the associated data in your blog-post, and (2) you would have no control over which parts to trim off.


The notation I have devised does have several configuration settings allowing selected branches to be trimmed (but still indicated), horizontal or vertical tree orientations to be selected, and actionable events for when clicking. It has built-in support for multiple spouses and dubious parentage of children (connecting to parents with a different line style).


When compared with wiki approaches to narrative, such as WeRelate, then blogs are less applicable to collaboration, and they generally have much less real-estate (available screen area) to play with. Although the SVG output from my code generator could be used in both blogs and wikis, it may rely on scroll bars in cases of limited space, such as blogs and mobile devices. In the blog case, though, it is easy to jump from the embedded SVG to a full-width copy in a page of its own — all it needs is a separate site to host the file (see below).



OK, now for the example. The following tree represents part of my Ashbee line, and involves several people I’ve mentioned in previous blog-posts. The green circles represent families (in this context: marriage and/or children), and both the person nodes and the family circles can be clicked to present associated details in separate panels (Ctrl+Click or Shift+Click the nodes/circles will close those details, if necessary). These details can include anything you like, and I’ve used them here to include links to my relevant blog posts (i.e. using the tree as a navigational tool). For instance, check the details on the male line from the topmost William Ashbee to Mary Phyllis Ashbee. The dashed lines represent trimmed parts of the tree where further children or siblings have not been shown.


There’s a button to switch between the horizontal and vertical orientations — either of which may be using scroll bars — and another button to expand the current orientation into a browser page all of its own. I’ve used neocities to host the HTML files for these full-width versions, mainly because it’s free and it was staggering simple to use it for this purpose.


The tool to generate these trees is now freely shared with the genealogy blogging community. Since the time of writing, it has undergone many improvements, including thumbnail images and searchable photos. See SVG-FTG Summary.


Generated by Parallax View's SVG Family-Tree Generator V4.6.0. See http://parallax-viewpoint.blogspot.com/2017/05/interactive-trees-in-blogs- using-svg.html William Ashbee (1803–1870) Ann Hayward (1801–1869) Thomas Ashbee (1826–1891) John Ashbee (1831–1912) Emma Jane Ashbee (1834–1924) William Stanton (1833–?) Mary Sandford (1834–1871) William Ashbee (1836–1907) Mary Ann Hale (1844–1890) Annie Emma Isabel Stanton (1873–1956) William Henry Proctor (1870–1950) Helenor Gertrude Norton (1868–1902) William Henry Ashbee (1866–1922) Evelyn A. Graham (1884–1918) Mary Phyllis Ashbee (1905–1984) Evelyn Ashbee (1909–1997) Patricia Ann Ashbee (1910–1973)


  1. Hi looks great. Would love to try myself. Can you give me access to your folder?
    Thank you

    1. Please see my later blog-post at https://parallax-viewpoint.blogspot.com/2018/09/svg-family-tree-generator-v50.html