MEGA TRICK: SVG in Coda (one step away from generated charts and mind maps!)

I discovered the way to render SVG (vector graphics) in Coda.

This capability (if put enough effort) lets you dynamically create virtually any images out of your data, such as:

  • non-standard charts
  • mind maps
  • any other visualizations, including animated ones (but only with vanilla SVG; see row 2 of demo)

That is because you declare image elements (e.g. each rectangle or text label) as plain text, which you can then concatenate into a finished image.

Limitations:

  • Don’t capture mouse events, so cannot be interactive
  • With large SVG files, easy to run into cell size limits, which is ~87000 chars

Demo (best open in separate tab):

Now need someone as persistent as @Lloyd_Montgomery and @Phil_Hamilton to put this to work :slight_smile:

Happy New Year!

UPD: The actual mind map implementation:

33 Likes

Wow @Paul_Danyliuk! :flushed:
a MEGA TRICK indeed! Congratulations (and thank you!)

4 Likes

That’s so cool! Great work @Paul_Danyliuk :slight_smile: Any way to make that mind map editable? This would make a killer project management doc if it could take in consideration task dependency like in this project: A somewhat of a documentation of hidden formulas [Added mechanics of nested buttons] made by @Filmos the great :crown: Just pushing the boundaries here :man_shrugging:

2 Likes

Thanks @Jay_Lefebvre. The demo is just a proof of concept showing that a valid SVG can be rendered in Coda — but the SVGs themselves are copied from wherever I found those samples (Wikipedia etc).

Now, the way you compose that SVG is up to you.

You can make a <g><rect ... /><text ...>...</text></g> for a bubble for each task, for example, and calculate X/Y positions of each bubble with some algorithm to position those on the mind map. Then append all groups together inside the <svg> tag and feed to the URL encoder and to Image().

If I’m sober enough tomorrow after the New Year, maybe I’ll compose some rudimentary mind map impl myself.

What’s important here is that virtually any report output is now available in Coda. Not just images, but custom styled tables too (as a vector image).

1 Like

This is exciting. Very exciting. For the sake of this community, please be sober enough tomorrow :joy: Happy new year to you, your help has been very precious and lots of our projects were inspired by your templates & ideas. Thank you :pray:

3 Likes

Haha thanks for the reference @Paul_Danyliuk. Maybe one day.

Lloyd

2 Likes

I remember you were quitting Coda because of pricing — didn’t the update change your mind?

The way you hacked stuff together in those gradient generators and music players — if you put that kind of creativity and dedication to the SVG capability, it would be da bomb :bomb:

3 Likes

I didn’t so much “quit” Coda as I decided on a different tool for now to accommodate different priorities. I like Coda, and will come back to it.

As for the “gradient generators and music players,” I must admit that you are thinking of someone else. Time to update the post with the real hero!

Lloyd

1 Like

O shi~ you’re right! I remembered you from Omnicodoro (thought of all the task nesting you did) and assumed that was you too.

Of course I meant @Phil_Hamilton!

Best of luck though!

1 Like

OK @Jay_Lefebvre and the others, here you go:

2 Likes

@Paul_Danyliuk , this is amazing! Above and beyond. Congrats! This is gonna take a while to process. But can’t wait to work with these capabilities.

The pricing announcement was an emotional time for everyone. Who was I kidding! I could never leave coda. I just think about my docs a little differently now to keep em at the free tier.

3 Likes

@Phil_Hamilton I messaged you on facebook :slight_smile:

1 Like

@Paul_Danyliuk wow, that is a stunning idea! but not only that, the mindmap is already a full working super useful proof. genius!

1 Like

Sorry I’m new to coda, I click on Open in coda but I can just see code, no actual image.

Hey! It’s on the last column, you’ll see it if you scroll to the right.

This is more of a pro trick though. You’ll benefit more if you get comfortable with the “out of the box” stuff first I think :slight_smile: Welcome to Coda, and we’re here to help.

1 Like

Thanks, I watch a few tut it’s all about spreadsheet like features, so I was not very interested, until I see this svg. But what kind of doc or template to use then to be able to create SVG in coda ?

Well, here’s one working example / proof of concept:

Here I’m using the table of tasks to calculate the X/Y coordinates of each node, then generating SVG for individual nodes and connector lines to parents (as simple as center X/Y of one node to center X/Y of another), and finally combining that all together into something that can be fed to Image(). I had to figure out the algorithm to calculate node position myself (and it’s a pretty naive one, although it gives good-enough results). You can do something similar for your needs. This said, you either need to know how to compose SVG code, or use an editor and then strip out all the bloat that editors usually put inside exported SVG.

1 Like

I know SVG, Javascript, what I don’t understand is how coda.io works documentation seems non existant for that kind of stuffs. You talk about table and formulas, that I understand but I can’t see how you’d use them to generate SVG: in excel you cannot use formulas to generate images so how coda.io allows it?

1 Like

To put shortly, I’m simply leveraging standard browser functionality.

  • Coda translates function Image(url) directly into <img src="url" … />. Well, it removes whitespaces, but nothing beyond that.

  • Browsers support Data URI — i.e. capability where instead of resource link (URL) you’re providing the data encoded right there. You may have encountered this with Base64 mostly.

  • So the task was ultimately to compose data URI to feed to the Image tag that would be rendered as a valid image. SVG is a text format (i.e. easy to compose by simply concatenating strings and filling in parameters with Format(), so it was an obvious first choice.

  • Since Coda strips out spaces from the data URI and SVG needs them, I went with URI encoded format. Since Coda’s own EncodeForUrl() was far too eager and encoded more than it should have (and the output wasn’t rendering at all), I kinda implemented my own.

  • In the very end, I’m composing SVG elements out of data rows, concatenating them together, URI encoding, prepending with data:image/svg+xml;, and feeding to Image()

1 Like

Thanks a lot for all these detailed explanations, I have to learn coda.io more thorougly to understand them I guess :wink: