data-visualizer

Files (1)

• SKILL.md

SKILL.md (first lines)

## 輸入參數

| 參數 | 必填 | 說明 |
|------|------|------|
| `links` | 是 | 資料來源 URL 清單（List[str]），支援 CSV 與 JSON 格式 |

# Data Visualizer Skill

當使用者提供資料 URL 並想以圖表呈現時，由 **Claude 分析實際資料內容**、判斷最適合的圖表類型，再動態生成 Gradio 視覺化應用並驗證結果。

---

## 步驟 1 — 從使用者獲取有效的資料連結

向使用者詢問一或多個資料 URL（List[str]）。逐一驗證每個 URL 是否可存取：

```bash
cd plugins/data-visualizer/commands
UV_PROJECT_ENVIRONMENT=/tmp/.data-visualizer-venv uv sync --locked && source /tmp/.data-visualizer-venv/bin/activate
python - <<'EOF'
import httpx, json, csv, io

urls = [
    # 貼上使用者提供的 URLs
]

for url in urls:
    resp = httpx.get(url, timeout=20, follow_redirects=True, verify=False)
    print(f"{url[:60]} → {resp.status_code}, CT={resp.headers.get('content-type','')}")
EOF
```

若某個 URL 回傳非 200 或無法連線，告知使用者並請其提供替換連結。

---

## 步驟 2 — 讀取資料，由 Claude 分析欄位並決定圖表類型

對每個有效 URL，讀取實際資料（前 50 列）並由 Claude 觀察：

```bash
python - <<'EOF'
import httpx, json, csv, io

def fetch_sample(url, n=50):
    resp = httpx.get(url, timeout=30, follow_redirects=True, verify=False)
    ct = resp.headers.get("content-type", "")
    # JSON
    if "json" in ct or url.endswith(".json"):
        raw = resp.json()
        rows = raw if isinstance(raw, list) else raw.get("data", raw.get("records", [raw]))
        return rows[:n]
    # CSV（自動偵測 BIG-5 / UTF-8）
    for enc in (ct.split("charset=")[-1].strip() if "charset=" in ct else "utf-8", "big5", "utf-8-sig", "utf-8"):
        try:
            text = resp.content.decode(enc)
            return list(csv.DictReader(io.StringIO(text)))[:n]
        except Exception:
            continue
    return []

urls = [
    # 貼上使用者提供的 URLs
]

for url in urls:
    rows = fetch_sample(url)
    if rows:
        print(f"\nURL: {url[-50:]}")
        print(f"  欄位: {list(rows[0].keys())}")
        print(f"  範例第 1 列: {rows[0]}")
        print(f"  範例第 2 列: {rows[1] if len(rows) > 1 else 'N/A'}")
EOF
```

**Claude 根據以下觀察做出判斷：**

- 欄位名稱的語意（例如「年度」、「日期」→ 時間序列；「行政區」→ 類別）
- 欄位值的型態（數值、日期字串、類別字串）
- 資料的主題與分佈

**圖表選型參考：**

| 觀察到的特徵 | 推薦圖表 |
|---|---|
| 含日期/年度欄位 + 數值欄位 | 折線圖（Line） |
| 類別欄位（地區、名稱）+ 數值欄位 | 柱狀圖（Bar） |
| 兩個以上純數值欄位 | 散點圖（Scatter） |
| 數值矩陣 / 相關性 | 熱力圖（Heatmap） |
| 類別佔比 / 百分比 | 圓餅圖（Pie） |

> Claude 應根據實際資料語意做最終判斷，不限於上表規則。

---

## 步驟 3 — 使用 gr.HTML 建立視覺化：說明

Gradio 的 `gr.HTML` 接受一個 **HTML 字串**作為內容，可在其中嵌入完整的 Plotly JavaScript 圖表，不需要任何額外 Python 圖表套件。

基本結構：

```python
import gradio as gr

chart_inner = """
<div id="chart" style="width:100%;height:500px;"></div>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script>
Plotly.newPlot('chart', [{ /* trace 資料 */ }], {
  title: '...',
  font: {family: "'Noto Sans TC', sans-serif"}
});
</script>
"""

# ⚠️ 重要：gr.HTML 用 innerHTML 設定內容，瀏覽器不執行動態插入的 <script>。
# 解法：用 base64 iframe 包裝，確保腳本正常執行且 CJK 字型正確顯示。
import base64

From 0yukali0/Share-skills, Apache-2.0.

More from 0yukali0/Share-skills