claude-d3js-skill
建立互動式 D3.js 資料視覺化
建立自訂的發布品質資料視覺化，無需複雜操作。此技能提供專業的 D3.js 指導，包含可直接使用的圖表、圖形和互動式圖形範本，可相容於任何 JavaScript 框架。
Télécharger le ZIP du skill
Importer dans Claude
Allez dans Paramètres → Capacités → Skills → Importer un skill
Activez et commencez à utiliser
Tester
Utilisation de "claude-d3js-skill". Create a line chart showing monthly temperature trends
Résultat attendu:
完整的 D3.js React 元件，包含 SVG 折線圖，包括 x 軸（月分）、y 軸（溫度）、平滑曲線插值、線條下方區域的漸層填充，以及懸停時顯示精確數值的工具提示。
Utilisation de "claude-d3js-skill". Build a pie chart for market share comparison
Résultat attendu:
互動式 D3.js 圓餅圖，包含動畫進場效果、懸停時分離切片、百分比標籤、外部圖例（含色彩編碼），以及點擊時爆炸選取切片的動畫。
Audit de sécurité
SûrAll 392 static analyzer findings were evaluated and dismissed as false positives. The pattern detections for 'external_commands', 'weak cryptographic algorithm', 'C2 keywords', 'network', and 'filesystem' operations were triggered by markdown documentation code blocks, D3.js API method names (schemeCategory10, nodes, desc), hex color codes in colour scheme documentation, and standard CDN import examples. This is a legitimate D3.js data visualization skill containing only documentation and code templates with no executable security risks.
Score de qualité
Ce que vous pouvez construire
商業儀表板開發人員
建立包含 KPI 圖表、趨勢視覺化和互動式篩選器的執行儀表板，用於商業分析平台。
資料新聞記者
使用自訂圖表和地圖建立吸引人的互動式故事，幫助讀者探索資料驅動的敘事。
研究分析師
產生發布品質的科學視覺化，可精確控制比例尺、座標軸和統計表示方式。
Essayez ces prompts
Create a responsive bar chart using D3.js that displays quarterly revenue data. Include proper axis labels, tooltips on hover, and use a colour-blind accessible palette. Provide the complete React component code.
Build an interactive scatter plot with D3.js where each point represents a product. Add zoom and pan functionality, click-to-highlight individual points, and a legend that updates dynamically when data filters change.
Create a force-directed network diagram showing relationships between entities. Implement node dragging, collision detection, custom link styling based on relationship type, and animated transitions when nodes are added or removed.
Build a geographic choropleth map using D3.js geo projections. Display regional data with colour encoding, add zoom transitions between country and state levels, and show tooltips with detailed statistics on hover.
Bonnes pratiques
- 重新渲染前務必使用 selectAll('*').remove() 清除先前的 SVG 內容，以防止重複元素
- 使用邊界 convention 進行適當的座標軸間距，並在圖表尺寸中容納標籤溢位
- 使用 ResizeObserver 或視窗大小調整監聽器實作回應式尺寸，以實現自適應佈局
Éviter
- 不要硬編碼尺寸 - 始終使用回應式容器來適應父元素大小
- 避免在迴圈或轉換中建立比例尺 - 定義一次後重複使用以提高效能
- 切勿將 D3 用於簡單的靜態圖表 - 對於基本視覺化，請偏好 CSS 或輕量級函式庫