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". 月別の気温トレンドを示す折れ線グラフを作成
Résultat attendu:
x軸（月）、y軸（気温）、スムーズな曲線補間、線の下方のグラデーション填充エリアを含む完全なD3.js Reactコンポーネントと、ホバー時に正確な値を表示するツールチップ。
Utilisation de "claude-d3js-skill". 市場シェア比較用の円グラフを構築
Résultat attendu:
アニメーション]~!b[遷移、ホバー時にスライスを分離、パーセンテージラベル、カラーコーディングを持つ外部の凡例、クリックで選択したスライスをアニメーションで展開るインタラクティブな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
四半期の売上データを表示するD3.jsを使用したレスポンシブな棒グラフを作成します。適切な軸ラベル、ホバー時のツールチップ含め、視覚障碍者に配慮したパレットを使用してください。完全なReactコンポーネントコードを提供してください。
各ポイントが商品を表すD3.jsのインタラクティブな散布図を構築します。ズームとパン機能、個々のポイントをクリックでハイライト、データのフィルター変更時に動的に更新される凡例を追加します。
エンティティ間の関係を示すフォース指向ネットワークダイアグラムを作成します。ノードのドラッグ、衝突検出、関係タイプに基づくカスタムリンクスタイル、ノードが追加または削除された時のアニメーション遷移を実装します。
D3.jsの地理投影を使用して地理的なコロプレスマップを構築します。カラーエンコーディングで地域データを表示、国と州のレベル間のズーム遷移を追加し、ホバー時に詳細統計を含むツールチップを表示します。
Bonnes pratiques
- 再レンダリング時に重複要素を防ぐため、selectAll('*').remove()で以前のSVGコンテンツを必ずクリアしてください
- 適切な軸間隔のためにマージン Conventionを使用し、チャート寸法のラベルオーバーフローに対応してください
- レスポンシブなサイズ変更にはResizeObserverまたはウィンドウリサイズリスナーを使用し、アダプティブレイアウトを実現してください
Éviter
- ハードコードされた寸法を使用しないでください - 常に親要素のサイズに適応するレスポンシブコンテナを使用してください
- ループや遷移内でスケールを作成しないでください - パフォーマンスのために一度定義して再使用してください
- シンプルな静的なチャートにD3を使用しないでください - 基本的な可視化にはCSSまたは軽量ライブラリを優先してください