Skip to content
All projects

Plotit AI

Our two-week entry to Canva's AI and Integrations Hackathon: upload a large, messy spreadsheet in Canva and AI works out which charts are worth making.

Role
Canva AI and Integrations Hackathon, 2024
Built with
React, TypeScript, Canva Apps SDK, FastAPI, Modal, Plotly

The app's calls to the service, with sample data.

Plotit's request flow: the Canva app uploads a spreadsheet through a presigned URL, starts a chart job on the FastAPI service, and polls until the charts are ready.

monthly.csv

DateClicksImpr.
Jan5061922
Feb1167523
Mar5847698
Apr2171820
May3794201
Jun1001643
Jul8178749
Aug6247854
Sep8611754
Oct6423856
Nov3216628
Dec6598948

Canva app to FastAPI on Modal

  1. POST/get-upload-url{ url }
  2. PUTpresigned S3 URLthe file
  3. POST/generate-plots-request{ call_id }
  4. GET/get-plots/{call_id}202
  5. GET/get-plots/{call_id}202
  6. GET/get-plots/{call_id}200 { plots }

Polls every 2 s until the job is done.

Clicks by month

9006003000
JFMAMJJASOND
App
Canva Apps SDK
Service
FastAPI on Modal
Upload
Presigned S3 URL
Returns
Plotly figure JSON

Any spreadsheet tool will chart the columns you select. With a large, complicated file, the hard part is knowing which columns and which charts are worth looking at. Plotit hands that to a custom built model: upload the file in Canva, and a Python service analyses it and comes back with the charts worth keeping.

We were a team of two with two weeks in August 2024. My teammate built the service that does the analysis; I built the Canva app and the connection between them.

Built for big files

Analysing a large file takes longer than a browser request should wait, so it runs as a background job on Modal. The app uploads the spreadsheet straight to storage, starts the job and checks on it every 2 seconds until the charts are ready. They come back as Plotly data rather than images, so titles, labels and colours can still change in the app before the one you keep goes into your design.