Mind map (tree chart) implementation (!)

[Alice_Packard]

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

Mind map (tree chart) implementation (!)

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 t…

[Paul_Danyliuk]

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:

[Paul_Danyliuk]

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

MEGA TRICK: HTML & CSS in Coda! (think custom invoices and reports)

Remember SVG in Coda? Well, @Artem_F (who is my partner for CodaTricks and consulting/building docs for hire, by the way) was studying SVG and discovered a property <foreignObject> that allowed rendering some HTML within SVG. The capabilities are of course limited. While displayed in an image (like an SVG would), no scripts can run, no mouse events captured (so no hover effects, no interactivity whatsoever), no external resources (fonts, images etc) loaded. You also have to use XML syntax, e.g…

[David_Knell]

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

This is incredible, thank you!

[Paul_Danyliuk]

Did that somewhere above in this thread

Mind map (tree chart) implementation (!)

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:

[Sarah_Gaillard]

Hi @Paul_Danyliuk, this work you share is perfect for my need and my lack of skills, thanks 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
Best,
Sarah

[Paul_Danyliuk]

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)

[Sarah_Gaillard]

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

[Quentin_Morel]

Hi there mindmap fans !

Currently working on my own interpretation of Paul’s Legacy 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 )

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 Let’s consider for now it’s more about fun rather than really use it on a professionnal way

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 !

[Bill_French]

@Quentin_Morel

I did not 100% quite to coda

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

@Quentin_Morel

mindmap, satellite

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

[Quentin_Morel]

@Bill_French

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

[Bill_French]

@Quentin_Morel

frustration not beeing able to interact with

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.

[Nikil_Ragav]

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

[Sean_Hudson1]

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?

[Daria_Kriuchkova]

Super cool, thank you!

[Panos_Dareios]

@Paul_Danyliuk How can I copy it in my coda document?

[Paul_Danyliuk]

You can open it in Coda

and then from the menu make a copy for yourself

Then, the fastest way to copy it into your existing doc is to move everything under one page and then through the context menu of that page copy it to your doc

[Alex_Blunk]

Hey @Paul_Danyliuk – Rookie question here, but I’ve been trying to figure out how to modify the underlying DB Items for some time (child / parent)… What am I missing? Seems simple enough.

Or if anyone else can help out, I’d be much appreciative. Thanks!

(Nevermind! Somehow my column type was changed to some sort of circular ref link… disregard )

[Alberto_Delgado]

Hi @Paul_Danyliuk this is brilliant! Can you think of any way to export the resulting image from Coda as a PNG, PDF or some other format that is friendly for sharing?

[Paul_Hubble]

Upon changing elements/relationships one needs to resize/change the image aspect ratio, which was annoying …

Then I noticed that if you click the image’s pencil icon and in another unlabeled drop-down change “Display as” to “Canvas” and turn “Display preview” to “on”, it seems to display nicely no matter what the image size is set to.

Hope that helps someone.