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

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, the tool now includes the use of images within
the tree nodes. I would welcome feedback, including further uses, improvements, problems,
and suggestions of where it might go from here. Just drop me a line if you want access to the
Dropbox folder holding the installation kit and documentation. Come and join the Facebook group: “SVG Family-Tree Generator”.

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.

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.

Entered genealogy in about 2004. Still heavily researching the history of all branches of my family (i.e. many different surnames). Working independently on a research project for a universal data model and source format for micro-history data (STEMMA, www.parallaxview.co/familyhistorydata). Former organising member of FHISO (http://fhiso.org/); currently Vice Chair.

Contact Form

Name

Email
*

Message
*

Affiliations

Although the views expressed here may draw strongly from the STEMMA private R&D project, they do not represent the views of FHISO of which I am associated. This is a personal blog by a genealogist who strives to record micro-history rather than either family history or a mere family tree.