# Data Observatory Dashboard

> Use when transforming arbitrary structured or semi-structured data into a high-density, source-aware, interactive data visualization dashboard. Fits CSV, Excel, JSON, webpage tables, public datasets, research/policy/legal/financial/industry data, and requests that mention "可视化仪表盘", "数据可视化", "矩形树图", "treemap", "数据看板", "报表可视化", "Excel 做成看板", "业务数据大屏", "交互式数据大屏", "数据观察仪表盘", "高密度可视化", "沿用矩形树图数据观察仪表盘方法论", "自动获取数据并可视化", or "把这些数据做成交互网页".

- Skill: `cslawyer1985/data-observatory-dashboard` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add cslawyer1985/data-observatory-dashboard`
- Raw SKILL.md: https://api.skillmd.com/api/skills/cslawyer1985/data-observatory-dashboard/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Data & Analytics
- Author: cslawyer1985 (https://skillmd.com/u/cslawyer1985)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/cslawyer1985/data-observatory-dashboard

---


# Data Observatory Dashboard

Build a restrained, high-density data observatory: a left control/stat sidebar plus a dominant right-side visual field, with clear visual encoding, source tracking, and interaction.

## Trigger Phrases

Use this skill when the user says or implies:

- 可视化仪表盘、数据可视化、数据看板、业务数据看板、交互式看板
- 矩形树图、treemap、树图、面积图、按规模分块
- 报表可视化、Excel 做成看板、把表格做成交互网页、把这些数据做成页面
- 高密度可视化、数据观察仪表盘、数据观察站、数据大屏
- 沿用矩形树图数据观察仪表盘方法论、参考矩形树图数据观察仪表盘、类似之前某个业务报表看板效果
- 自动获取数据并可视化、从网页/公开数据/接口获取数据做看板

Carry forward these learned defaults: preserve source units explicitly, especially 万元/亿元/百分比; include color legend, distribution, tier overview, group overview, breakdown overview, tooltip, and source notes; keep sidebar narrow but expanded by default, non-overlapping with the main visual, with a subtle manual collapse/expand control; place a quiet centered signature at the sidebar bottom only when the user requests or provides one.

## Core Workflow

1. **Acquire or load data**
   - Local files first: CSV, JSON, XLSX, Markdown tables.
   - For URLs, prefer official APIs, raw CSV/JSON, downloadable public files, or explicitly provided pages. If the user asks for current/latest data, verify online and record retrieval dates.
   - For Chinese public/news/social/search sources, consider OpenCLI or available app connectors when appropriate.

2. **Profile the dataset**
   - Run `scripts/profile_data.py <input> --out <output-dir>/data-profile.json` when the input is CSV/JSON/XLSX. Raw sample values are excluded by default; add `--include-samples` only when the user accepts that sample values may be written to disk.
   - Identify object label, grouping fields, numeric magnitude fields, color/risk/intensity fields, time fields, text explanation fields, and source fields.
   - Identify source units before charting: especially 万元/亿元/元, percentages already stored as 0-100, counts, people, cases, clients, and times.
   - If profiling is ambiguous, choose conservative defaults and document the mapping.

3. **Choose visual grammar**
   - Read `references/visual-grammar.md` when selecting chart type or encoding.
   - Default for object collections: treemap observatory.
   - Do not force treemap onto time-series, geospatial, or relationship-heavy data.

4. **Define a data contract**
   - Read `references/data-contract.md` when normalizing fields.
   - Create a normalized `data.json` and, when sources matter, `data_sources.json`.
   - Do not write local absolute paths, names, credentials, or private identifiers into reusable skill files or public-facing source records.
   - Attach unit metadata to dashboard fields with `--unit field:unit`; never let generic number formatting reinterpret source units.
   - Preserve original raw data unless the user only wants a quick prototype.

5. **Build the dashboard**
   - Prefer a static HTML/CSS/JS artifact for portability.
   - Use `assets/templates/observatory-treemap.html` as the starting point when the data is an object collection with magnitude + grouping + intensity.
   - Keep the first screen as the usable visualization, not a landing page.

6. **Validate**
   - Start a local static server when `fetch()` is used.
   - Use browser/Playwright screenshots for desktop and mobile.
   - Check nonblank canvas/SVG, tooltip behavior, mode switches, text overflow, and source/date display.

## Signature Design Pattern

- Fixed or persistent left sidebar: title, source note, mode controls, total metrics, weighted score, distribution, group overview, top/bottom lists, legend.
- Main visual field: canvas/SVG/grid/map occupying the remaining viewport.
- Visual encodings:
  - size/area = importance, scale, exposure, amount, or count
  - color = risk, intensity, score, sentiment, growth, or uncertainty
  - grouping/position = category, region, domain, stage, or owner
  - opacity/stroke = confidence, selection, or warning
- Tooltip explains one object: label, core metrics, source, rationale, notes.
- Mode switches recompute both visual layout and sidebar statistics.

## Output Files

For nontrivial work, create:

- `index.html` or app files
- `data.json`
- `data-profile.json`
- `data_sources.json` when data is fetched, estimated, merged, or model-scored
- `screenshots/` after visual validation
- short implementation notes only when useful for the user

## Reference Loading

- `references/visual-grammar.md`: chart and encoding selection.
- `references/data-contract.md`: normalized schema patterns and calculations.
- `references/source-strategy.md`: automatic data acquisition and source records.
- `references/implementation-patterns.md`: frontend details for dense static dashboards.