How do I build an Instagram analytics dashboard without coding?

You paste one prompt into Claude Code. It reads the JSON files you pulled from your own reels (data/mine/*.json) and generates a single self-contained HTML file with Plotly.js from a CDN — headline cards, a bar chart ranked by outlier multiplier, a watch-time scatter, and a top-5/bottom-3 table. You open the file in a browser. No code written by hand.

What does the dashboard actually show?

Four things: headline cards (median views, best reel, average watch time, average saves/reach), a bar chart of your reels ranked by outlier multiplier, a scatter of average watch time versus reach, and a table of your top 5 and bottom 3 reels by engagement rate with caption and hook. It marks saves/reach and shares/reach as primary signal and treats likes as vanity.

Why generate a self-contained HTML file instead of a web app?

A single HTML file with the charting library loaded from a CDN has no server, no build step, and no dependencies to install. You double-click it and it opens in any browser. It's the fastest path from your data to a chart you can actually read, and it's trivial to regenerate every week.

Build the Dashboard

In Chapter 3 you pulled your last reels into data/mine/*.json through the Meta API. Right now that's just files — reach, saves, shares, watch time sitting on disk. This lesson turns them into something you can read at a glance.

The output is one HTML file. No server, no build step, no app to deploy. Claude Code writes a Python generator that reads your JSON, does the math, and bakes a self-contained dashboards/mine.html with real charts loaded from a CDN. You double-click it and it opens in any browser.

The prompt

Paste this into Claude Code, in the project folder where data/mine/ lives:

Build a self-contained `dashboards/mine.html` generator in Python.
1. Read data/mine/*.json (my reels, pulled in Step 1 via the Meta MCP).
2. Per reel compute: saves/reach, shares/reach, avg_watch_time_sec,
   engagement_rate = (likes+comments+shares+saves)/views*100, and outlier_multiplier vs the median of views.
3. Generate ONE self-contained HTML file with Plotly.js (CDN):
   - Cards: median views, best reel, avg watch time, avg saves/reach.
   - Bars: reels ranked by outlier_multiplier.
   - Scatter: avg_watch_time vs reach (the watch-time winners).
   - Table: top 5 and bottom 3 by engagement_rate with caption + hook.
Flag saves/reach and shares/reach as the primary signal; treat likes as vanity.

That's the whole thing. One prompt, one file. If Claude Code hits a missing field or a path issue, paste the error back with fix — it patches and re-runs.

What it reads

The generator's only input is the folder from Chapter 3: data/mine/*.json, one file per reel. Each file carries the owner-only fields the Meta API returned — reach, saved, shares, ig_reels_avg_watch_time, views, likes, comments. Nothing here is scraped or guessed. It's your account, straight from Meta.

Before it charts anything, the generator computes a few things per reel:

saves/reach — how many of the people who saw it saved it (intent).
shares/reach — how many shared it (viral velocity).
avg_watch_time_sec — average seconds watched, converted from the API's milliseconds.
engagement_rate — (likes + comments + shares + saves) / views × 100.
outlier_multiplier — the reel's views ÷ the median views of all your reels. Same math as the competitor tracker, pointed at yourself: a 3x means that reel did three times your usual.

What it draws

The file lays out four blocks, top to bottom:

Headline cards. Four numbers that summarize the account: your median views (your true baseline, not the average — one breakout doesn't distort it), your best reel, your average watch time, and your average saves/reach. This is the "how am I doing overall" row.

The outlier bar chart. Every reel as a bar, ranked by outlier multiplier. The tall bars are the ones that broke past your baseline. This is where you spot the reel that actually worked — and it's rarely the one with the most likes.

The watch-time scatter. Each reel plotted as average watch time (y) vs reach (x). The reels up and to the right are your watch-time winners: held people and got distributed. Watch time is the signal the algorithm rewards, so this chart is where the real lessons hide.

The top-5 / bottom-3 table. Your five best and three worst reels by engagement rate, each row showing the caption and hook. This is the qualitative read — you look at the top 5, see what they have in common, and the bottom 3 tell you what to stop doing.

Tip:

Notice the dashboard never ranks by likes. The bar chart uses outlier multiplier, the table uses engagement rate, and the cards lead with watch time and saves/reach. Likes don't get their own chart on purpose — you'll see why in the next lesson.

Regenerate it weekly

Because it's one Python script writing one HTML file, refreshing the dashboard is a single command. Pull your new reels into data/mine/, re-run the generator, open the file. Later, in Chapter 7, this becomes part of the weekly loop that ties all three apps together — but even standalone, it's the first time most creators actually see their own watch time instead of guessing from likes.

Knowledge check

What does the dashboard's main bar chart rank your reels by?

Key takeaway

One prompt turns data/mine/*.json into a self-contained mine.html: headline cards (median views, best reel, avg watch time, avg saves/reach), an outlier bar chart, a watch-time-vs-reach scatter, and a top-5/bottom-3 table with captions and hooks. It reads your real Meta data, never likes-first, and regenerates in one command.