[template] Map application - Visualize geo clustering & heatmaps

Explore

How to... in Coda
How to... in Coda

Difficuty

Tool

Image

Description

1. Beginner

Definitions tables

Create a new "Def::Tables section" for all key definitions. Useful for lookup values in your tables such as categories.

1. Beginner

Definitions folder: to group and hide all app mechanics

Create a to house all key document definitions tables. In my case I have two additional definition tables for colors, and for gradient patterns.

1. Beginner

Cell "Bubble formatting": with colors

In the

tbl_Geo_Data

⁠

table, the maps and geo columns are each formatted different colors, helping to easily see that green geos are part of the world map.

I love this awesome new bubble formatting feature:

Create a conditional formatting color scheme in the definition table (image 2).

When you create "lookup" column format in a separate table, it will style the object "bubbles" with the same color scheme as your conditional format

1. Beginner

Code Block text formatting

Really useful for showing code snippets within your text fields.

I used it to style the SVG code formats in my

SVG_Templates

⁠

table

1. Beginner

Clearly delineate all formula columns with naming convention plus conditional formatting

When your users interact with your app, or when you're using columns in your tables for formula etc, it's helpful to be able to spot at a glance which columns are formula-driven, and which ones take manual input.

Column naming convention:

For easier formula reference, I use the convention of adding underscore "_" to the start of the name.

For user visibility: I also add "(ƒ)" to the end of the title

Conditional formatting (see image 2):

Create a new custom format using the "display" column

Leave "contains" field blank

Select the drowdown for which columns to format, and select all the formula ones (conveniently, they all have _underscore)

1. Beginner

Create interactive dropdown and checkbox controls

Make your docs interactive with these easy steps:

Easily add a range of controls by hitting "/" anywhere in a doc section → then add a "SELECT" or "MULTIPLE SELECT" dropdown or a checkbox (or date range, etc)

Right click on the new control, and change the name to something logical, ideally witha prefix so you can easily search for it (e.g. chk_show_labels or slt_gradient)

No reference the new name you created in any formula, be it in the doc itself, in a table column, or in a table column filter formula

1. Beginner

Simple interactive table filters

Easily create interactive filters (dropdown selections, checkboxes, etc) by:

Right click the column you want to filter → "+ interactive fitler" (see image 2)

I like to add a text header: "Filter:", then I like to format the filter row using "Block quote" so that it clearly stands out visually

2. Intermediate

■ ■ ■ Colored square → in dropdown lists

Start with a color definition table:

Def::Colors

⁠

Use the following formula to create a colored rectangle:

Concatenate(

_Color(thisRow.[Hex value], "■")," ",

thisRow.Category, " ",

thisRow.[Color text])

To use it in a select list, change the column formatting to "Select list" → add a custom list → and add the formula:

= [def:Colors].[Display column]

2. Intermediate

Visual Gradient dropdown selection with colors

To create a visual dropdown selector with the image (in this case the color gradient), you:

Create an image column (in my case gradient) in the lookup table that you refer to later

Create a Selector Component → Give it a usable name: "slt_gradient"

Now in the body of your section, simply hit "=", then add the formula: slt_Gradient.Display_GRADIENT to refer to the image column

2. Intermediate

Create and use formula variables in a table row, with separate named columns.

Create model assumptions in a table.

Create a new table - e.g.

HLP: MapConfig

⁠

Add a row with a logic name, and give it a title (in the table display column) - e.g. World_config

Add new columns with the variable names you need for your application

Whenever you need them in your formula / app, you simply type "@", then the row name (world_config), which should autocomplete. Then type "." and find the column name that you want as a variable

2. Intermediate

FORMAT formula - to create programmatic formatted text.

Fantastic formula to create programmatic text output using variables. This is how I create programmatic text content, that gets turned into images via Coda's SVG rendering.

Start with a text "template" (the first formula input). Here's what I used to great the SVG image text.

The subsequent variables in the format formula get substituted into the text template, replacing the values "{X}" in numerical order

2. Intermediate

CONCATENATE formula - Used to join multiple fields together in a single output

Concatenate lets you take multiple inputs (for instance, a number of filtered rows from a table) and combine them into a single text field.

I use Concatenate to combine the SVG markup text from multiple rows, into a single compiled SVG blob:

[TableName].filter([some condition]).[Column name].Concatenate()

2. Intermediate

Create a programmatic contrast text color - for text overlaid on a colored object

This nifty formula takes a hex color, and creates an appropriate contrast text color, so that if you're programmatically changing the color of any object, the text will always be legible.

if(

(([HexColor].middle(2,2).ToNumber(16) * 299)

+ ([HexColor].middle(4,2).ToNumber(16) * 587)

+ ([HexColor].middle(6,2).ToNumber(16) * 114))

/ 1000 > [Contrast_Threshold_Variable], "[Dark_Color_Hex]","[Light_Color_hex]")

3. Advanced

Create programmatic custom color gradients

Create custom programmatic color gradients.

You can find the logic and formulas in the

Def::Gradients

⁠

table.

ALL CREDIT TO CREDIT:

Phil_Hamilton-Schmidt

⁠

who created this approach at

Community page

⁠

3. Advanced

Measure & Debug inefficient formula

While building this sheet, I had some trouble with formula that were written poorly, resulting in a very slow app.

Luckily the Coda team thought of that - you can find the somewhat hidden "Debug calculations" feature::

"Gear" settings menu → Document Map → "3 dot" menu at the top right of the slide-out screen → "Debug calculations". See image 1

Then hit "Start measuring", and change things in your doc. It will show you how long each formula takes in the doc, letting you find inefficiency. See image 2

3. Advanced

Disable calculations, so you can restore a previous. version

If you create a doc that freezes and becomes non-functional - because your formula or very bad, or very circular - You can "disable calculations", which will let you then go to "Version history" (image 2) and pick an earlier version of your doc that worked.

Two ways you can disable calculations:

Add "?nocalc=true&disableAsync=true#_lumdR" to the doc URL, and reload in a new tab

Hacky: Open the Debug Calculation side bar. Now copy the URL, close the old tab, and open the copied URL in a new tab. The second coda renders, and the "Start measuring" button becomes available, click it QUICKLY. If you caught it before the doc fully loads and start calculating, it will start measuring the time of your formula. And after about 30 seconds, a "disable calculations" red link will appear (Image 1).

3. Advanced

Render SVG image (from programmatically created text)

Coda can render SVG-formatted text as an image, allowing you to add any kind of visualization to your app.

Image( Concatenate("data:image/svg+xml,", [Composed SVG]))

To create the Composed SVG, you create SVG formatted markup code (

learn it here

⁠

You can create it using the technique laid out here:

@FORMAT formula - to create programmatic formatted text.

⁠

viewBox="0, 0, {2}, {3}"

xmlns="http://www.w3.org/2000/svg">

{1}

</svg>

Now you can render the image you've created anywhere in your doc you want (including in a column in a table), using formula above

There are no rows in this table

Count

⁠

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.

How to... in CodaHow to... in Coda

How to... in Coda
How to... in Coda