Mind map (tree chart) implementation (!)

Showcase Doc Show and Tell
1

Okay, here it is. I made a mind map (actually a tree chart, sorry for the clickbait) implementation using the SVG capability I discovered last decade (ba-dum-tss)

Best viewed in new tab.

And yeah, it’s dynamic. Play around: turn off nodes, change parents, reorder rows, add new ones.

ezgif.com-optimize (62)
ezgif.com-optimize (62)600×516 575 KB

There are definitely bugs with the implementation, e.g. the chart may act funny when you reorder rows. Bug fixed, feel free to reorder now.

And subscribe to codatricks.com if you haven’t already. Yeah yeah, still not launched. But it will be.

64 Likes
2

Wow @Paul_Danyliuk! This is incredible!

You’re setting the bar pretty high for the start of the New Year!

5 Likes
3

Thanks @BenLee. I’d be surprised if you don’t have the “What Paul came up with this time” section in your weekly meetings agenda yet :laughing:

Just kidding. Happy New Year!

3 Likes
4

HOLY SH*T. Glad you were sober enough to do this ahah. This is insane. Thank you :pray:

3 Likes
5

WOW @Paul_Danyliuk!
Just wow.
wow.

:fire:

1 Like
6

@Paul_Danyliuk you are aware of this right? :wink: https://coda.io/jobs

10 Likes
7

Really glad guys like you are about, Paul. I’ve slept out and watched TV for the start of the New Year and got this gift for all my efforts.

2 Likes
8

Haha @Krunal_Sheth yeah, but I’m done with coding and with full-time employment too (at least for now). Burned out as a coder long ago. Besides, tinkering with Coda is much more fun, and I still get to apply my skills like in this very trick :wink:

What I’d really love though is to eventually come to the Bay Area for a week or two. Maybe speak at some no code conf about my Coda witchcraft. And also buy the laptop I want (the Surface) but cannot buy here — I didn’t win one in the Makers Fest, but I still need one :slightly_smiling_face:

6 Likes
9

This is seriously amazing :clap::clap::clap:

Looking forward to following codatricks.com in the new year.

3 Likes
10

awesome! thanks much @Paul_Danyliuk

1 Like
11

hey @Paul_Danyliuk, great stuff here as always. Sorry if I am overly self-promoting here, but would love to get this native in Coda, and I just added some commentary to that effect over on the other MindMap thread:

Unfortunately I don’t think my Coda abilities would allow me to use your solution without slipping up, but really amazing to see you can actually already do this in Coda. It is a huge item on my wish list!

Cheers!

12

I have created this Pack request: ObservableHQ. With a good integration between Coda and Observable, we could extend Coda to include all kind of user generated visualisations, including Mind Map and without resorting to low level SVG trickery. Please vote for it!

1 Like
13

Looked at Observable — isn’t the idea is just that you can feed it HTML/JS (low level as well) to render inline? The D3 chart in example is itself an iframe.

Wouldn’t it be better at this point to just ask Coda to support providing arbitrary HTML content within Embed() and not just URLs? Because embedding an Observable with embedded chart made out of arbitrary HTML content sounds like the same, only with extra steps

image
image800×450 134 KB

That said, the tool looks awesome. But it doesn’t seem friendly towards non-devs: a certain level of JS knowledge is required to actually make something useful there.

P.S. I wish it was around / I knew about it when I was teaching CS basics at a local university. Much better to get students excited about coding with something visual like that rather than a boring console.

14

Observable is 2 things: a javascript library that provides a notebook functionality & a collection of user-generated notebooks. If you look at example #4, the integration can be really easy with a function. In Coda, it would look like:

= Observable(
  notebook:"https://beta.observablehq.com/@mathisonian/d3-change-line-chart",
  showCells:['chart', 'height']
  variables: @VariablesTable)

That’s quite friendly towards non-devs, as long as they can find the notebook they need, and Coda templates are a good fit for packaging all this configuration and more.

But in general, yes I would like also support for embedding arbitrary HTML with Embed(), that would ease some integrations.

3 Likes
15

I would like to petition that Coda bring this in on its own, and not go for an integration, in particular after seeing what you already pulled off @Paul_Danyliuk above in this thread!

I think the proper tools in this context are not things with any strings whatsoever of formulas, code snippets, etc. for “non devs,” but stuff like draw.io, Lucidchart, Miro. As a non-dev myself, those are the tools I am going to consider for mindmapping initially outside Coda. Some task management apps that Coda can replace such as MindMeister and Zenkit also have mind mapping modules that literally do not require any capability with any formulas, functions, etc. In other words, true nocode!

So I would in fact no longer support this pack suggestion:

And rather see Coda devote time to its own solution here.

And let’s not forget that integrations, or packs, always have some overhead with the potential to break, and require a developer to get involved to figure out what happened!

Thanks guys!

3 Likes
16

Hi @Paul_Danyliuk! This is really amazing!
Any ideas on how to make a horizontal map (left to right)?

Thanks

17

Thanks. I believe pretty much the same, just swap around x/y and width/height in a few places.

18

Thanks Paul! I have looked but it’s too complex for me! Would you or anyone here be able to help with these?
I would love to have this amazing mind map in a horizontal view.

Help anyone?
Thanks in advance!

19

I can help you with this tomorrow or someday this week (off the clock if it’s for personal matters). I believe we talked already (Value cases) :slight_smile:

20

Hi Paul! Yes, we spoke before :slight_smile:
This would be for personal docs, and I think really useful for everyone in the community!
Thanks for looking into this