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).

Example

 

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.

 

William Ashbee was born c1803 in Hillsley, Gloucestershire, England, and died 14 Jan 1870 at 2 York Cottages, Grosvenor Terrace, Cheltenham, of 'Disease of the heart'. William was originally a baker and grocer but tried to get into publishing. In 1868, he fell foul of a copyright case that proved to be important for later digital data and databases. This case bankrupted him and he died shortly after.

Articles and mentions:
A Copyright Casualty — Part I
A Copyright Casualty — Part II
A Copyright Casualty — Part III

Ann, or "Annie", was born c1801 in Westonbirt, Gloucestershire, England, and died 29 Nov 1869 at 30 Smith Terrace, Chelsea, of 'Asthma, disease of the heart, many years'.

Thomas Ashbee was born c1826 in Tetbury, Gloucestershire, and died 1891 in the same county. He was a tin worker and this contributed to a dementia causing him to be described as an 'imbecile' in the 1891 census. He was married twice during his life.

John Ashbee was born c1831 in Westonbirt, Tetbury, and died 22 Apr 1912 at 67 Ringford Road, Wansworth, London.

Emma Jane Ashbee (later Stanton) was born c1834 in Tetbury, Gloucestershire, and died 22 Apr 1924 (same date as her father) at 59 Norland Road, Nottingham.

William Stanton was born c1833 in Bishops Cleeve, Gloucestershire. Death uncertain. Possibly in Bicester, Oxfordshire, in 1924.

Mary Sandford was born c1834 in Berkeley, Gloucestershire, and died 1871 in Cheltenham, Gloucestershire.

William Ashbee was born 29 Nov 1836 in Tetbury, Gloucestershire, and died 24 Jan 1907 at 48 Cannon Street, Glasshoughton, West Yorkshire.

Articles and mentions:
A Copyright Casualty — Part III

Mary Ann Hale was born c1844 in Middlesex, and died c1890 in Islington, London.

Annie Emma Isabel Stanton was born in 1873 in Cheltenham, Gloucestershire, and died 1956 in Nottingham.

William Henry Proctor was born 21 Apr 1870 in Nottingham, and died 12 Dec 1950 in Nottingham.

Helenor Gertrude Norton was born c1868 in Leeds, and died 7 Dec 1902 at 55 Pemberton Street, Shelford, Barton-upon-Irwell, Lancashire, aged 35, of 'pulmonary tuberculosis 10 months, exhaustion'.

Articles and mentions:
More of a Life Revealed

William Henry Ashbee was born 1866 in St. Pancras, Middlesex, and died 1922 at St. David's Care Home, Ealing.

Articles and mentions:
More of a Life Revealed

Evelyn A. Graham, or "Eveline", was born c1884 in Leeds, and died 1918 in Wigan, Lancashire, aged 34.

Articles and mentions:
More of a Life Revealed

Mary Phyllis Ashbee was born 28 May 1905 in Bradford, Yorkshire, and died 13 Jun 1984 while on holiday in Switzerland. She never married.

Articles and mentions:
A Life Revealed
More of a Life Revealed

Evelyn Ashbee was 14 Mar 1909 in Chorlton, Lancashire, and died 1997 in Tower Hamlets, London.

Articles and mentions:
More of a Life Revealed

Patricia Ann Ashbee was born 26 Dec 1910 in Chorlton, Lancashire, and died 1973 in St Andrews, Fife, aged 63.

Articles and mentions:
More of a Life Revealed

Following the reading of the banns on 18 Jun 1825, William Ashbee married Ann Hayward in the parish of Westonbirt, Gloucestershire, England.

William Stanton married Mary Sandford in c1856 in Cheltenham. They had three children.

After the death of his first wife, William Stanton married Emma Jane Ashbee on 21 Nov 1872 at Gloucester St. Catharine. They had three children.

William Ashbee married Mary Ann Hale in Holborn, London, in c1866. They had eight children.

William Henry Proctor married Annie Emma Isabel Stanton at Nottingham Emmanuel on 29 Nov 1891. They had eleven children.

William Henry Ashbee married Helenor Gertrude Norton in Chorlton, Lancashire, in 1893. There were no children.

After the death of his first wife, William Henry Ashbee married Evelyn A. Graham at Sale St. Anne, Chester, on 1 Aug 1904.