We’ve got two wow-graphs on the Sqale app so far: the distribution graph and the thanks graph. I had envisaged three originally, and the third has been the hardest to nail down. The previous two I saw years ago; yes, we only coded the thanks graph a couple of months ago, but the library for it has been online for years. I have not seen anything which fits nicely what the projects graph needs to do.

So… after so many years of approaching the problem from different angles (my catching fish method), and facing the end of current funding, I’m opening the task out to others, first with Matt and sharing through Sqale itself.

Here’s a short video intro. I’ll follow it with an assimilation of thinking. It hones in on the minimal parameters of design. I’ll tag on another video which does another intro and then goes over the text material. As always, share through Sqale 🙂

Design Objective

A simple graph which is visible on a phone, understandable by a child, fits into current UI, ie list of projects. Shows individual timeline and collective timelines.

Uses d3.js library without much modification, so that total coding done between 2-4 weeks. Preferably no added features or modules.

preparatory content

Following might be useful to map out the territory.

Check this book (or pod version here) I produced a few years ago. p59 (in pdf) to p69 is the highest level version I’ve come up with. But it is completely impractical. p89 to p93 is the project dependency we were talking about. And useful dependency diagram to think about (p91) — but not that useful for our UI, I don’t think:

Potential Library from d3.js 

  • sankey?
    • perhaps Sankey – https://observablehq.com/@jarrettmeyer/sankey-with-animated-gradients
    • sankey with different ways to arrange:https://observablehq.com/@d3/sankey-diagram
    • vertical sankey – https://observablehq.com/@mayagans/ownership-diagram-simplyfied-case
    • Someone trying to use sankey for people, but failing – https://observablehq.com/@maryselt/mbgna-people-timeline
  • traditional
    • elegant gantt chart – https://observablehq.com/@nikita-sharov/lifetime-timeline 
    • wow, basic timeline, zoomable etc, and 2d space — https://observablehq.com/@notanaccent/timeline


Design Elements

Summary of below Blaab:

  • credits support of project; intention towards project (current)
  • project author to other projects, creating parent-child or directory (current)
  • individual ligaments associating projects; v project-decision-basis
  • do-now module
  • soft-dependency of before/after/during ligature (by individual, by governance per project); hard dependency by absolute time
  • governance module (for project-decision-basis)
  • conditional support logic (for delayed support)


More Videos




Share through Sqale




Share through Sqale