Building 10q10k.net: A Financial Visualization Platform Running Entirely on Cloudflare's Edge

Source: Dev.to

[![TSLA ScreenShot](https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwnkksn1qgsr5nm01sv5q.png)](https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwnkksn1qgsr5nm01sv5q.png)

---

## TL;DR

[10q10k.net](https://10q10k.net/) is a financial‑data platform covering all S&P 500 companies.  
It visualizes quarterly earnings as interactive Sankey flow charts—showing how revenue flows through costs, profits, and expenses.  
The entire stack runs on Cloudflare’s edge with **zero traditional servers**.

---

## What It Looks Like

Every company page shows:

- **A Sankey flow chart** mapping revenue segments → gross profit → operating profit → net profit  
- **Financial metrics** with YoY growth, margins, and EPS beat/miss indicators  
- **Income Statement, Balance Sheet, and Cash Flow** breakdowns with bar charts  
- **Earnings calendar** with upcoming report dates  

The charts are **downloadable and copyable**—hover to see action buttons.  
The exported PNG includes company branding and a watermark, composited via the Canvas API.

**Try it:**  
[NVDA](https://10q10k.net/NVDA) · [AAPL](https://10q10k.net/AAPL) · [GOOG](https://10q10k.net/GOOG) · [MSFT](https://10q10k.net/MSFT)

---

## Architecture

pnpm monorepo ├── web/ # Next.js 16 (App Router) — frontend ├── worker/ # Cloudflare Worker — data pipeline └── share/ # Shared TypeScript types & constants

**Everything runs on Cloudflare:**

- **Workers** for server‑side compute  
- **D1** (edge SQLite) for storage  
- **Pages** for static assets  

No EC2, no RDS, no Docker. Monthly cost is near‑zero on the free tier.

---

## Technical Challenges

### 1. Financial Data Is Messier Than You Think

The same metric—**Revenue**—can be reported under 15+ different names depending on the industry:

```json
// Standard companies
"RevenueFromContractWithCustomerExcludingAssessedTax"
// Banks
"InterestAndNoninterestRevenue"
// Utilities
"ElectricUtilityRevenue"
// REITs
"RealEstateRevenueNet"
// Oil & Gas
"OilAndGasRevenue"

Some companies don’t report an explicit revenue figure at all. For those we fall back to a computed value:

OperatingIncome + CostsAndExpenses

This single decision unlocked ~40 more companies.

Lesson: When working with financial data at scale, budget ~80 % of your time for edge cases and normalization.

---

2. The Fiscal Year Mapping Problem

Not every company’s fiscal year matches the calendar. Apple’s Q1 ends in December, Microsoft’s ends in September, Walmart’s fiscal year starts in February.

I built a quarter‑mapping system that normalizes all companies to calendar quarters, handling:

• Non‑standard fiscal year starts
• 52‑week fiscal years (period ending Dec 28 vs Jan 1)
• A 7‑day grace period at quarter boundaries

---

3. Quarterly Cash Flow from Cumulative Data

Most companies report year‑to‑date cumulative cash flows, not quarterly values. A Q3 filing shows 9 months of data, not 3.

To derive a single quarter:

Q1 = Q1 YTD (as reported)
Q2 = H1 YTD − Q1 YTD
Q3 = 9M YTD − H1 YTD
Q4 = Annual − 9M YTD

The challenge is identifying the correct prior period to subtract. The algorithm matches entries by fiscal‑year start date and selects the longest preceding period—critical for Q3 where you need the 6‑month entry, not the 3‑month one.

---

4. Revenue Segment Extraction

Breaking down revenue by business segment (e.g., Google Services vs Google Cloud) requires parsing structured tags embedded in financial filings. The pipeline:

1. Parse context elements (period dates, dimensional axes)
2. Match financial values to their contexts
3. Score axes by revenue coverage – prefer axes where named segments cover ≥ 40 % of total revenue
4. Handle Q4 specially: derive from annual minus Q1 + Q2 + Q3

---

5. The “Octopus” Sankey Layout

Standard Sankey charts become chaotic with 10+ nodes. I implemented a custom “octopus” layout:

• Center: Revenue node as the body
• Left tentacles: Revenue segments, spread proportionally by value
• Right flows: Cost of Revenue → Gross Profit → Operating Expenses → Net Profit

Key layout decisions:

• Value‑weighted Y positioning – larger segments get proportionally more space
• Flow conservation – outflows never exceed inflows
• Loss handling – companies with negative profits render red flows correctly
• Coverage threshold – only show segments if they cover ≥ 40 % of revenue

Implemented with Plotly.js using arrangement: "fixed" and manually computed node coordinates. The default "snap" mode creates visual chaos at this scale.

---

6. Chart Export Without html2canvas

I initially used html2canvas for PNG export, but it crashed with:

Error: Attempting to parse an unsupported color function "lab"

Modern CSS uses lab(), oklch(), etc., which html2canvas can’t handle.

The fix: Use Plotly’s native toImage() to export just the chart, then composite branding via the Canvas API:

// 1. Export chart as PNG from Plotly
const dataUrl = await Plotly.toImage(chartEl, { format: "png", scale: 2 });

// 2. Create a larger canvas with header/footer space
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");

// 3. Draw background → header (logo, symbol, quarter) → chart → watermark
ctx.drawImage(chartImg, 0, headerHeight);

// 4. Export final composite
canvas.toBlob(resolve, "image/png");

This gives full control over the exported image—branding, background, and watermark—without relying on html2canvas.

## Frontend Stack  

**Next.js 16 on Cloudflare Workers**  
- Server components fetch from D1 at the edge – no API round‑trips, minimal latency worldwide.  
- Deployed via `@opennextjs/cloudflare` – the OpenNext adapter that makes the Next.js App Router work natively on Cloudflare.

### Three‑Language i18n  
Full **English, Chinese, and Japanese** support via `next-intl`.  
- English URLs omit the locale prefix (`/AAPL`).  
- Chinese and Japanese URLs are prefixed (`/zh/AAPL`, `/ja/AAPL`).

### SEO‑First Design  
Every company page generates:  

- Dynamic `` and `` targeting analyst search queries.  
- **JSON‑LD** structured data (Corporation + Dataset schemas).  
- **Open Graph** and **Twitter Card** meta tags.  
- A comprehensive **sitemap** covering all companies × locales.  
- Canonical URLs with `hreflang` alternates.

### Mobile Optimizations  

- **Bar charts** – `staticPlot: true` on mobile to prevent accidental zoom while scrolling.  
- **Sankey charts** – horizontal‑scroll wrapper for small screens.  
- **Responsive layouts** – two‑column grid on desktop, stacked on mobile.

## What I Learned  

- **Financial data normalization is the real challenge.**  
  Fetching data is easy; making it consistent across 500 + companies with different reporting standards is where you spend all your time.  

- **Cloudflare's edge stack is production‑ready.**  
  D1 + Workers + Pages can power a real data platform. Zero DevOps, near‑zero cost.  

- **Plotly.js Sankey charts need manual layout.**  
  The automatic positioning creates chaos with many nodes. Fixed coordinates with value‑weighted positioning is the way to go.  

- **Don’t use `html2canvas` in 2026.**  
  Modern CSS color functions (`lab`, `oklch`) break it. Use native chart‑library export + Canvas API compositing instead.  

- **YTD cumulative reporting is an underappreciated complexity.**  
  If you’re building anything with quarterly financial data, you *will* need subtraction logic for cash flows.

## Try It  

[10q10k.net](https://10q10k.net/) – explore any S&P 500 company’s financial flow. The Sankey charts are interactive, downloadable, and available in three languages.  

*Built with Next.js, Cloudflare Workers, D1, Plotly.js, and TypeScript.*