NPL·PORTRAIT ← Back to the two

One dataset, two languages — the method.

Everything here was designed and coded end-to-end by Claude Fable 5, working autonomously inside Claude Code from a single prompt: real research in, deployed sites out. This page is the master recipe; each site's own /guide covers its specific tricks.

The two

SiteLanguageSignature technique
CITYcinematic night cityInstancedMesh + GLSL window shader; red windows = NPL rate
GROUNDSwiss print reportorthographic spike map on real geography; variable-width type

The recipe

  1. Start from real work. Two research reports — SME NPL, Small+Medium Only and Consumer Credit NPL 2026 — built from OJK's Statistik Perbankan Indonesia and a direct pull of the regulator's portal cube, validated against published aggregates to the rounding digit. Every site reuses those exact figures; nothing is smoothed or invented.
  2. One metaphor per site, taken literally. Pick an image the data already contains (households = a city at night; a regulator's numbers = a printed report) and make the data drive the metaphor's physics — window color, spike height, bar weight. Decoration is banned; if a pixel moves, a number moved it.
  3. No assets. Zero images, zero chart libraries, zero templates, zero build steps. WebGL (Three.js or raw), canvas, SVG and CSS generate everything. Single HTML file per site plus a ~15-line Express server exposing / and /guide.
  4. Honesty features. Data gaps drawn as dashed lines; zoomed axes declared; presentation devices (alert thresholds, bleed mapping) stated on the page; validation arithmetic reprinted; provincial totals reconciled to national.
  5. Iterate with real eyes. Serve locally, screenshot in a real browser, run at least three critique passes per site — hunting contrast failures, label collisions, dead states, broken metaphors — and fix after each.
  6. Ship. One Railway project, one service per site, generated domains, cross-links patched at deploy time.

The findings, in one breath

Credits

Analysis: Raka, Indonesia lending-market specialist, PKA desk. Data: OJK (SPI + data.ojk.go.id/SJKPublic). Design, code, iteration and deployment: Claude Fable 5, autonomous, 2026.