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

@Phil_Hamilton-Schmidt 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?

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:

Just found one interesting place where SVG works but multiple Rectangle()s won’t — in detail layouts:

Here’s how the same progress bar looked when built with rectangles:

2 Likes

@Paul_Danyliuk good find, this looks so good! What does the code look like for a progress bar like this? Sorry, definitely not an expert in SVG :laughing:
Edit: This also opens the door to gradients and better looking progress bars :open_mouth:

Is there a site where you can generate SVG code? Thanks a lot :pray:

Edit 2: Found a few ones but would still love to know how you did it ahah

Gradients — totally possible. This exact layout is actually possible.

Online editors — not sure. But there’s a range of standalone vector drawing applications, from free (e.g. Inkscape) to paid (e.g. Affinity Designer, Adobe Illustrator) that export SVG. One downside is that they usually export a lot of extra metadata within the files. E.g. see the “organization chart” example in the doc in my original post — I simply copied the first copyright-free chart from Wikipedia I found, and perhaps 90% of its SVG code is redundant garbage that could easily not be there.

It is actually very simple to compose SVG by hand and include only the essentials. There are lots of tutorials. One of the knowledge sources on web technologies that I personally trust is MDN:

Here’s how I did that particular one. I already fed urlencoded SVG (prepared through my doc) to avoid unnecessary calculations, since it was simply about filling in one width value:

It’s just two <rect />s in an <svg />, no groups even.

3 Likes

I struggled with this in the Meeting Agenda template. The detail view wants to crop and size images to fit for some of the layout options and forces rectangles to squares. That’s why all the timer stuff is outside the detail view layout and in the canvas.

I might have to dig in and give this strategy a try.

1 Like

Quick question - got a good example for doing a word cloud like this?

What do you mean exactly?

Looking for something like https://www.wordclouds.com/

Uhh… well, the complexity here is to come up with the algorithm to lay out the words (calculate x/y/size/rotation), then it’s as trivial as just concatenating all the <g transform=...><text>...</text></g>'s together.

No idea how to lay out automatically t the moment.

Hi @Paul_Danyliuk

Was inspired by your SVG post (thank you!)

I’ve been trying to find a quick way (for years) to create a simple product milestone view (I always made these in Google Presos).

Using your naive SVG method, I’ve created this: https://coda.io/d/Formula-SVG_dL1cBD5Vsag. It actually works really well (though there are lots of formatting improvements that could be made.

Now I have a problem though - The regex formula to convert to “naive SVG” format is really expensive and slow on a performance basis. Of the total compute time of 250ms, 210ms of that is coming from the regex formula (copied below for viz).

Any ideas for how to streamline the conversion step to SVG?

Here’s that REGEX SVG conversion formula:
Concatenate(
“data:image/svg+xml,”,SVG_output_combined_markup.RegexReplace("\n|\t", “”).Split("").FormulaMap(
CurrentValue.Switch(
" ", “%20”,
“<”, “%3C”,
“>”, “%3E”,
“#”, “%23”,
CurrentValue
)
)
)

Hey @Brandon_Trew,

Instead of converting the whole SVG every time, maybe “pre-convert” building pieces beforehand like I did in the tree map impl?

Take a look at Helpers: Chart settings section, HLP Templates table.

You can actually pre-convert them not in Coda but using some external tool and just save like that.

Love this. Really smart interplay between the tables and the formulamap. let me work on incorporating this. thank you!