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

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!

1 Like

@Paul_Danyliuk Finally putting your SVG revelations to good use!

2 Likes

One more SVG chart implementation. This time using paths and some basic trigonometry (polar → cartesian)

Time to revive this topic, lol.

Another freshly discovered capability: HTML & CSS in SVG, which gives us HTML & CSS in Coda!

1 Like

Hi folks !

As requested by @Paul_Danyliuk in twitter, and after a few hours playing with Paul’s Trick, I share here a few use cases to generate cool and fully automatized CODA svg.
Given the possibilities, I keep on investating in the several possibilities and use case possible. Please reach me out if you have any ideas/wish for me to work on !

I’ve planned to prepare a full tutorial article in the coda community forum, and also in my blog, to present in detail how you can generate colored map (or whatever svg you want) and also gantt chart

Obviously all those svg’s are dynamically interfaced with coda data, so that this is all automatic, and linked with your information.

Till I finish to write those detailed articles, please find a few view screenshot of the achievement :wink:

Polar coordinates dataviz

  • Use case : Any dataviz you want, with gradient-colored design (with a beating hearth, what a poet !)

Custom Colored SVG Map

  • Use case : show gradient data through a country map, or industrial process with you process svg/dwg map

Time-Animated Map to show data evolution

  • Use case : same than above, with time evolution

ezgif-1-e2540cef10

Bubble over Map

  • Use case : target cities or locations, and show values with bubbles and moving size according to values

Gantt Chart Project Management

  • Use case : track your planning project, with visual progress bar fully linked to your task

ezgif-1-7a9b846b4a

** Milestone tracker**

  • Same than above, but easier

Weekly team planner

  • Use Case : Team management, room/car management, classroom and schedule

16 Likes

Wow ! Awesome trop bien Quentin !
I love Coda for stimulating our brains into finding all sorts of clever way to innovate with it :slight_smile:

1 Like

Yes, the possibilities are just amazing ! My work now is to

  • find another use cases
  • be able to create easier possible way to generate and manipulate svg data

Lots of work still, but I can already use it professionaly !

2 Likes

Hey @Quentin_Morel

In case you missed, you can also utilize some HTML+CSS in your SVG and take advantage of a higher level layout engine than tweaking coordinates yourself:

There’s also a pack that allows you to make and embed actual HTML+CSS+JS in Coda:
update: it’s broken now but the approach is still pretty valid if you can host the HTML file yourself.

1 Like

And therein lay the challenge.

HOST …

There are so few words in web technology that are so short, but come with such a long list of tasks and requirements. It’s a burden that stops many great ideas and solutions from coming to fruition; that was the promise of Itsy().

Ideally, a Pack would provide the capacity to host. I realize this is complex and rife with security issues, but there are some key advantages for Codans to consider this more deeply including, but not limited to hosting micro services for Coda formulas. Imagine a Pack that had an endpoint URL capable of serving Coda-bound content to external apps. This is no different than outbound webhooks, and I cannot imagine a better framework than to extend Packs to provide this capability. Just sayin’ …

That is exactly how the Mermaid Pack works, it is a Google Cloud function that generates the image on the fly and returns a url where to access it. The concept of Itsy can be applied the same way and with heavy caching :slight_smile:

Yep, familiar with the approach and while functionally equivalent, it requires an external service. This is also possible and quite efficient with Firebase Cloud Functions (the free tier is generous).

However…

Ya’ know how Coda supports inbound webhooks? It’s a near-real-time event model that is able to receive arbitrary data and apply those messages/data payloads in near real-time to Coda documents, tables, etc. Well, imagine I need to do the opposite without moving my data through another service that invariably introduces additional latency, complexity, security issues, and most of all, configuration effort, maintenance, etc. This approach is also complexified by laws and regulations concerning multi-tenant data spaces (the compliance paperwork for security alone is significant for enterprises).

Coda-as-a-Service

I think the tech stack to accomplish things from simply hosting an SVG for internal Coda use to exposing Coda-as-a-Service (CaaS), must be integral to Coda itself, otherwise, the proxy (i.e., FCF or GAS) will need to make call-backs into Coda using its API, and that creates a whole “host” of additional friction and costs not the least of which is added latency.

We live in a real-time world; humans are discontent when we fail to achieve responsiveness above the Doherty Threshold. As such, outbound webhooks or localized transformations need to avoid latency even for the simplest ideas like Mermaid and Itsy(). But, I think the question of CaaS is a much bigger idea capable of transforming how micro services are built and maintained.

Coda-as-a-Realtime-Service

I’ve had some success building a Pack that exposes Coda data over a sockets-service, thus making it possible to publish a real-time data feed of changes in Coda. Packs may include Node libraries and SDKs designed to interface with services like PubNub. At Stream It, this has allowed us to create a proxy API into a Coda document - you just listen for events on the channel in any external application (even Firebase Cloud Functions) and you will see all the activity exposed by the Pack in less than 250ms globally.

This approach negates the need for REST APIs and many of the security and latency issues associated with a traditional API and/or proxy hosting capabilities. Ideally - perhaps on the distant horizon - Coda will integrate an accessible sockets-layer for Pack developers.

2 Likes

Hi Quentin. Awesome work. Can you share the doc with the use cases ? It will help those like me who don’t know how to code. :sweat_smile:

2 Likes

Hi everybody,

I just found the doc and the tutorial in another topic:


Jannis

1 Like