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:

• Visualization dashboards, data visualization, data dashboards, business data dashboards, interactive dashboards
• Treemaps, treemap, tree diagrams, area charts, blocks by scale
• Report visualization, turning Excel into dashboards, turning spreadsheets into interactive web pages, turning this data into a page
• High-density visualization, data observation dashboard, data observation station, data wall
• Follow the treemap data observation dashboard methodology, refer to the treemap data observation dashboard, similar to a previous business report dashboard effect
• Automatically fetch data and visualize it, fetch data from web pages/public data/APIs to build a dashboard

Carry forward these learned defaults: preserve source units explicitly, especially 万元/亿元/percentage; 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 万元 (ten thousand yuan), 亿元 (one hundred million yuan), 元 (yuan), 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.