Creating an interactive calculator

Maria Marquis

Al Chen

Here at Coda, we’re always on the lookout for spreadsheets or docs that could translate into awesome Coda docs. In our most recent session, Al and I rebuilt a car cost comparison Google Sheet into a Coda doc.

⁠

See the crowdcast!⁠

⁠

One thing we love about

this sheet⁠

is that it’s using data to drive a point home — in this case that an electric car, while more expensive in the short term, generally saves more money in the future. Great calculators can be great evidence for your point. Let’s explore the steps we took to recreate this sheet in Coda.

Step 1 — Get your dataset

As with any data analysis, the first step is to figure gather and clean up your data set. In the original sheet, each car’s statistics were on a different tab.

In the Coda world though, we want to combine this data so we can compare more quickly. When you’re gathering your data, ask yourself “what does all this data have in common?”. In this case, all of the data describes cars. Voila! We’ll make one table a row for each car, and a column for all the attributes (e.g. price, cost for fuel, resale value, etc.).

Step 2 — Add formulas for standardization

Just like in a spreadsheet, there might be certain values that you want to consistently calculate (like the cost of fuel per year or difference in resale value). With Coda, you don’t need to worry about dragging formulas to apply across cells. Add the formula once to a column, and it will automatically apply to every new car you add.

Step 3 — Build controls for comparison

Now that we have our data, it’s time to build the calculator view. We’ll do this in three steps:

Create a view of the Car Table

Add select list controls to the section

Apply a filter based on the controls

We’ve also added some formulas to the text editor so we can quickly see the cost benefits.

And that’s it!

We’ve now got a calculator we can use to help evaluate decisions. You can use this same model any time you want to compare and contrast different items in your dataset. The best part, it all works on mobile too!

See the finished example here -

Compare Electric vs Gas Cars⁠

⁠

Step 1 — Get your dataset

Step 2 — Add formulas for standardization

Step 3 — Build controls for comparison

And that’s it!

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.