Mind map (tree chart) implementation (!)

Not regular paper and pens though :slightly_smiling_face: 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 :slight_smile: 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 :slight_smile: 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? :slight_smile:

Thanks so much!
Ben

Ben, hello!

I actually stumbled into this thread with the exact same implementation in mind: a family tree! If you haven’t gone through the whole thread of replies yet, you might want to see some of the back and forth Paul and I had a few months ago (linking to the start of that conversation):

Just discovered some multi-line capability using text on path. It’s not ideal (apparently it cannot break lines automatically or by any forced means) but could be a passable solution in some cases:

3 Likes

Aaaand to everyone in this thread — here’s another capability that my friend @Artem_F discovered while learning SVG: a way to embed HTML within SVG! Along with <style> for CSS, this effectively allows to render not only multi-line text in <div>s but also any arbitrary HTML & CSS!

(no Javascript though, and these elements won’t be editable if you try to export the image and open it in any vector editor app. But you can still open those in a separate tab and print or print-to-PDF).

1 Like

Is there a way to switch the orientation of the chart so it’s horizontal instead of vertical?

This is incredible, thank you!

Did that somewhere above in this thread :slightly_smiling_face:

1 Like

Hi @Paul_Danyliuk, this work you share is perfect for my need and my lack of skills, thanks :wink: How can I integrate it to my doc in order to modify it to my needs? I requested acces for edition… not sure that’s how it should be done :slight_smile:
Best,
Sarah

You should just be able to copy it. Open the doc in the new tab and locate the menu here (it shows up when you move your mouse there)

image

Thanks Paul, I made it! Awesome :grin: (from Portugal)

Hi there mindmap fans !

Currently working on my own interpretation of Paul’s Legacy :slight_smile: After some play around graphs, maps and gantt chart, I started from scratch to work on some mindmap, satellite oriented (Obsidian beeing maybe the very last tools I did not 100% quit to coda :wink: )

Anyway I’m quite prood of this, but of course for now :

  • it’s slow given all the existing connections
  • it requires button actions to avoid even slower
  • I still have to make automatic some text placement

But damn it’s so good to be able to reach that kind of result with CODA, for small chart with a few level 1, level 2 and level 3 that’s cool :slight_smile: Let’s consider for now it’s more about fun rather than really use it on a professionnal way :innocent:

Cheerss !

Quentin

EDIT : Probably difficult to make something generic, but on my way to perform a classical template with level 1 in center, and 1-level child, connection between every item, and colored bullet according to status, due date, number of connections … could be totally feasable !

9 Likes

Typo, but I totally understand. :wink: Letting go is hard.

Is this 100% SVG? Or, did you use another rendering approach?

Hi @Bill_French , actually this is 100% SVG indeed. That works quite great, even if i’ve got some frustration not beeing able to interact with (does not manage mouse event apparently). This would offer a new possibilities, I still have in mind somehow to click and the bubble and open the linked row directly :heart:

1 Like

There is a spec for interactive SVGs (I think) and QuickChart.io seems to implement it in the GraphViz API.

I plan to use it in a search engine where each node leads viewers to the document/page it references.

2 Likes

Does your version still have to be a tree or can it be any graph type?

Hi, Are you able to share a version of this to see how you created the formulas to link the parents to each other & linking the parents to the child entries?

1 Like

Super cool, thank you! :slight_smile: