Didn’t have time today, sorry. Will look into this tomorrow.
Here you go @Marta_Oliveira
Just swapped a few formulas around (for _X center, _Y center, and canvas width/height), mostly by intuition, and it worked:
9 Likes
Hi Paul,
Thanks a lot, this looks amazing!
It will be super useful
Hi again Paul, this is really amazing!
I have been using it and was wondering if there’s a way to increase the character length of the boxes in the tree chart?
Just wondering if you think this is possible
What do you mean? You mean change box width? It’s here:
Or do you mean text size? Then add ; font-size: 16px or whatever text size value here:
Hey @Paul_Danyliuk,
Hope you are doing well.
Further to Marta’s question, could you please help me figure out how to items change height if text becomes longer? Ideally it increase in height vertically and text is on 2/3 lines.
Unfortunately you cannot 
or it’s very non-trivial with Coda.
SVG (as of the current standard) does not support multi-line text. When a vector editor app exports multiline text into SVG, what it does is generate separate <text> or <tspan> tags per each line, with coordinates set separately on them.
The only way I see it would be generating <tspan> with FormulaMap from each line of text in the cell that’s explicitly broken into lines (i.e. no auto-wrapping), with some constant offset. But I’m not sure you’ll be able to center those lines, since IIRC tspans are all aligned to the left of the parent text element, and to have them appear centered you’d have to manually calculate each line’s dX offset.
Thank you for your swift and detailed response, Paul!
Would’ve been a great dynamic workflow visualisation tool. It still could be used as static workflow visualisation tool as there is nothing better available in Coda at the moment.
Thanks again and have a productive day.
Paul, this is incredible! Thanks for sharing and making this resource available!
I’ve been re-creating your mind-map into a family tree, and got nearly all the way done setting up the formulas until I hit a snag on my “DB Items” table (mine is named “People”) on the “Draw line to parent” column. Was wondering if you’d mind taking a look at what’s going wrong? The situation is that in this formula for the “Draw line to parent” column, I’m unable to make a connection to the HLP Chart table to target the URL Encoded column:
If(thisRow.[Parent item].IsBlank(), "", Format([Connector line].URLEncoded,
thisRow.[_X center], thisRow.[_Y center], thisRow.[Parent item].[_X center], thisRow.[Parent item].[_Y center]))
Here is a gif of what I’m experiencing as I write the formula:
Unsure of what I’m doing wrong here 
happy to provide you editing access to the doc I’m working in if you’re up for the assist (which I’d greatly greatly appreciate)! I’ve got my fingers crossed that the fix is small and obvious. Writing formulas like the one’s you’re using in these tables is well beyond my skill level, but thankfully I’ve been able to re-create everything successfully (as far as I can tell) up until this point.
If I can get past this, the only other ask I have kicking around is how to go about drawing horizontal connector lines between two items where only one has a parent. In my family tree use case, this would be used for partnerships/marriages.
Hey, and thanks!
FYI you could just copy my doc and change it instead of recreating it — but I guess you wanted to learn how it’s done in the process?
Anyway. First, there’s no URLEncoded column on HLP Chart table. The templates are in HLP Templates table. Secondly, when you’re typing [Table name].[Column name], you’re getting a List of all values for that column, for every row. Whereas in my formula I’m referencing a specific value from a specific row: I’m typing an @-reference like @Chart item, then it becomes a row reference, then I add .URLEncoded to reference a specific column of that row.
Regarding horizontal connector lines, the easiest way would be to:
- Still specify the same parent as the node you want to horizontally link to. If you don’t specify a parent, the positioning algorithm will make it a new root and not allocate space for it. So it’s just easier to still specify it rather than redo the algorithm.
- Add a new column — partner node.
- Add conditional logic to the line drawing column (
SwitchIf):
If partner node is not blank, draw line to partner node’s center X/Y. Otherwise if parent node is not blank, draw the line to parent node’s center X/Y. Otherwise blank value"".
This node should have the same “parent” as partner node and two rows must be positioned one right before/after the other for the drawing algorithm to work properly. If you want to avoid specifying a fake parent in your table, you can work around this with a separate column and some formulas adding/removing it if there’s a partner node selected. I.e. you’ll have one Parent item column for setting up the tree (fake), and one Parent item column for display (with real parents).
P.S. Actually… I got confused. With family trees, normally there are two parents and there can be more children. So my auto-fitting algorithm isn’t particularly useful to draw that 
Are you developing your own algorithm, or just manually setting up center X/Y coordinates of each node?
1 Like
FYI here’s a detailed explanation how the table calculates node positions (13 minutes, not so short). Hopefully it is clear enough and helps anyone looking to modify the chart for their needs.
15 Likes
Much appreciated Paul, you are a great tutor 
This video is fantastic!
I love this walk through of the math you used while having the visualization to go with it. Really great stuff!
Great walkthrough! Seeing this explained with regular paper and pens reminds me of classes during my younger years where everything was done on a blackboard with chalk. Very nostalgic 
1 Like
Not regular paper and pens though a whiteboard notebook (Infinitebook, good stuff) and non-permanent sharpies.
Thanks all!
2 Likes
Wow, this is super cool - thank you for walking through it with the helpful video as well!
Paul, many thanks for the video explanation and the walkthrough/suggestion of how to create those horizontal connections!
Ah, given that I hadn’t reached a point to see everything render for my family tree use case I hadn’t considered the issue of children having at least 2 parents. I don’t think I’m at a skill level with the formulas to embark on figuring that out for myself BUT I will keep this in my back pocket as something to continue tinkering with and learning as I get more familiar with writing table formulas. In the mean time I might use a third party family tree building and iframe it into my Coda doc. Again, thanks so much for the thoughtful and detailed reply!
3 Likes
Happy to help 
I wanted to record this explanation for a while now; your interest in taking this chart further finally pushed me to it.
I’m actually curious myself how to turn this into a family tree. But I also have lots of other work, so I’d rather keep this exercise for you, if you’re curious enough A great place to start would be to grab yourself a pen and paper and figure out the principles how node positions should calculate when the tree is basically upside down, and multiple child nodes can share multiple parent nodes (and also nodes linked only horizontally).
I imagine it would take some tweaking with how you calculate the subtree widths. In my case it’s unidirectional: just sum of children’s widths, or 1 if no children. In yours it will be something like Max(sum of children’s widths, sum of partner widths), and Coda will go back and forth a bit recalculating this across all rows until the tree is stable.
That’s the hardest part, coming up with a fitting algorithm. When you have that, taking it into Coda is much easier. That’s one of the reasons I didn’t do the proper mind map with nodes going in all directions, but stopped with an easy to implement and explain the “tree” one.
1 Like
Hi Paul!
This is amazing, thank you for all the work you’ve done on this - I’ve just discovered it now!
I’m currently going through a process of video interviewing all of my family members and am looking for a way to convert this into a family tree which ideally is clickable - so you can click the family member and then you get directed to the page related to the person!
So, just wondering if you or anyone else ever managed to convert this at all?
Thanks so much!
Ben