Create a prototype visualisation tool for BODS data

[timgdavies]

We have parallel tracks of work to improve our visualisation of BODS data:

• (a) developing a consistent visual language - see spec
• (b) developing tools to generate data-driven SVG components using that visual language; and
• (c) developing an updated component which will layout example and real-world ownership structures;

In this prototype stage, we are looking to carry out prototype work for (b) and (c) (noting that the fully visual language is not yet fully developed).

Functional requirements

• (1) Accept BODS data as input
• (2) Generate key components of an ownership graph in SVG
• (3) Run in the browser without a requirement for hosting
• (4) Layout the components to show the relationship between them
• (5) Allow the user to easily edit the resulting diagram and layout in a commonly available user-friendly application (e.g. draw.io / an SVG editor / inkscape etc.)

Example user stories

As an analyst I want to provide a blob of BODS data and get a set of visual elements so that I can produce a slide explaining a particular ownership structure

As a country manager I want to select a BODS example and get a laid out ownership diagram so that I can talk through different ownership structures

As a developer I want a re-useable javascript component that I can feed with BODS data and get back SVG components of an ownership diagram so that I can use these components in my own layout algorithm

[stevenday]

A few thoughts:

Run in the browser without a requirement for hosting

Just in the interests of clarity - static file hosting somewhere (e.g. Netlify) is fine.

(4) Layout the components to show the relationship between them

I see this as less important, precisely because we have plans for another component which will do this. Figuring out how those two should/could interact is probably more important than actually developing this.

That said, the register currently uses https://github.com/dagrejs/dagre via https://github.com/cytoscape/cytoscape.js-dagre to layout its cytoscape based graphs. After a lot of trial and error this was the most robust layout algorithm for a large variety of real-world topologies, so it's what I'd suggest as a starting point. Their wiki has some examples using D3, which is where I think we would most likely take the register's graph viz next, because it makes the graphs more customisable and accessible than cytoscape's canvas-based rendering.

(5) Allow the user to easily edit the resulting diagram and layout in a commonly available user-friendly application

Browsing dagre.js' wiki also linked me to https://www.jointjs.com/opensource which looks very interesting for this, though we probably don't want to go down the route of developing a custom application unless it's somehow easier and cheaper than the alternatives.

[timgdavies]

@Lathrisk Just assigned to you to carry out first exploration, and identify any questions for Kadie, me or others ahead of next week. I've also made the spec for part (a) visual language public. Internal tracking of this task is here and attached are some of the current graphics Kadie and Jack have been using.

BODS diagram components-20200218T103925Z-001.zip

[Lathrisk]

Initial doc: https://docs.google.com/document/d/1oMR9iGD_shHWqoP1G1GzbXld8-ExMGseLx1plT9hYic/edit#heading=h.q2ll3ia9xo4

Very basic Dagre example

This misses a lot of the visual language of BODS but demos the potential output of Dagre/D3.

[Lathrisk]

Living document for the prototype: https://docs.google.com/document/d/1hFaEV0rMMVJ_V9Dp8EUgCxy3Ef0EXAcGNw47dfat46k/edit?usp=sharing

This will continue to be refined and added to throughout the week.