カスタムチャート、グラフ、ネットワーク可視化を精密なコントロールで構築できます。このスキルは、あらゆるJavaScriptフレームワークでD3.jsを使用して、出版品質のインタラクティブグラフィックを作成するのに役立ちます。
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 "d3-viz". 売上データを示す棒グラフを作成: 製品A (150)、製品B (230)、製品C (180)
Résultat attendu:
以下を含むD3.js棒グラフ付きReactコンポーネントを生成: SVGセットアップ、scaleBand x軸、scaleLinear y軸、axisBottomおよびaxisLeft、スチールブルー塗りつぶしのスタイル付きバー、製品と値の軸ラベル
Utilisation de "d3-viz". ツールチップ付きインタラクティブな散布図を構築
Résultat attendu:
以下を含むD3.js散布図を作成: データにバインドされたcircle要素、ツールチップdivを表示するホバーイベントリスナー、マウスオーバー時のトランジションエフェクト、パディング付き計算x/yスケール、軸ジェネレーターとラベル
Utilisation de "d3-viz". ネットワークデータのフォース指向グラフを作成
Résultat attendu:
以下を含むD3.js forceSimulationを実装: ノード反発用のforceManyBody、エッジ接続用のforceLink、位置決め用のforceCenter、ドラッグイベントハンドラー付きドラッグ可能ノード、動的リンク距離と強度計算
Audit de sécurité
SûrAll static analysis findings are false positives from documentation files containing code examples. The 'Ruby/shell backtick execution' detections are markdown code blocks with JavaScript examples for D3.js. The 'MD5 hash' and 'C2 keyword' detections are legitimate terms in documentation context (hash properties in JSON, command in D3.js API). No actual security risks present - this is a legitimate visualization skill with safe template code and reference materials.
Score de qualité
Ce que vous pouvez construire
ダッシュボードビルダー
ビジネスメトリクス、分析、または監視システム向けのリアルタイムデータ可視化を備えたインタラクティブなダッシュボードを作成
研究可視化ツール
学術論文やプレゼンテーション向けの出版品質のチャートやグラフに研究データを変換
カスタムチャートデザイナー
マーケティングやストーリーテリングのために、標準的なチャートライブラリを超えるユニークでブランド化された可視化を構築
Essayez ces prompts
月次売上データを表示するD3.jsを使用した棒グラフを作成します。軸ラベル、タイトルを含め、バーにはスチールブルー色を使用します。グラフの幅は800px、高さは400pxにします。
時間経過に伴う温度トレンドを表示するD3.jsを使用したインタラクティブな折れ線グラフを構築します。データポイント上にマウスが移動したときに値を表示するホバーツールチップを追加します。特定の時間範囲を調べるためのズーム機能を含めます。
エンティティ間の関係を示すD3.jsを使用したフォース指向ネットワークダイアグラムを作成します。ノードは重要度に応じてサイズ変更し、カテゴリに応じて色分けします。ユーザーがノードを再配置できるようにドラッグ機能を追加します。
時間経過に伴う複数のデータ系列を比較するD3.jsを使用した積み上げエリアチャートをデザインします。データ更新時にスムーズなトランジションを実装します。凡例を含め、色覚 accessible カラーパレットを確保します。
Bonnes pratiques
- コンポーネントの再レンダー時にメモリリークと重複可視化を防ぐため、レンダリング前に常にSVG要素を選択してクリア
- 手動計算の代わりにすべての次元マッピングにD3.jsスケールを使用 - これにより一貫したサイジングとレスポンシブデザインが容易になります
- SVG要素にARIAラベル、タイトル、説明を追加し、色覚多様性ユーザー向けにカラースキームをテストして、適切なアクセシビリティを実装
Éviter
- 初期レンダリング後にReact管理のDOMをD3.jsで直接操作しないでください - これによりReactの仮想再調和が破損し、パフォーマンスの問題が発生します
- チャートの寸法をハードコードしないでください - 常にコンテナクエリまたはリサイズオブザーバーを使用して、可視化をビューポートの変更にレスポンシブにしてください
- D3セレクションにバインドする前にデータ検証を省略しないでください - 検証されていないデータはサイレント障害や不明瞭なレンダリングエラーを引き起こす可能性があります