スキル d3-viz
📦

d3-viz

v1.0 コンテンツリビジョン r1 中リスク ⚙️ 外部コマンド🌐 ネットワークアクセス

カスタム D3.js ビジュアライゼーションの構築

カスタムチャートでは、シンプルなチャートライブラリでは表現できないインタラクションが必要になることがよくあります。このスキルは、D3.js の SVG セットアップ、データバインディング、スケール、軸、ツールチップ、ズーム、トランジション、配色の選択をガイドします。

対応: Claude Codex Code(CC)
📊 70 十分

自分のエージェントでインストール

このリクエストをエージェントにコピーしてください。正規の Skill ページとマニフェストが含まれています。

エージェントリクエスト
Review the Skillstore skill "d3-viz" from https://skillstore.io/skills/doyajin174-d3-viz.md and its manifest at https://skillstore.io/api/skills/doyajin174-d3-viz/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

エージェントは引き続き計画を提示し、セキュリティポリシーで必要な確認を求める必要があります。

エージェントが読めるリソース

AI エージェント、クローラー、スクリプトがページ全体ではなく整理されたコンテキストを必要とする場合は、これらのリンクを使ってください。

Markdown詳細 GET /skills/doyajin174-d3-viz.md 署名済み manifest GET /api/skills/doyajin174-d3-viz/manifest 署名済み lockfile GET /api/skills/doyajin174-d3-viz/lockfile

テストする

「d3-viz」を使用しています。 チームがカテゴリ別の月次サインアップ数を比較する棒グラフを必要としている。

期待される結果:

band と linear スケール、マージン、軸、長方形のマーク、ラベル、レスポンシブなサイズ調整の注意点を含む D3 実装計画。

「d3-viz」を使用しています。 ダッシュボードの折れ線グラフにホバー詳細と滑らかな更新が必要。

期待される結果:

line generator、time scale、ツールチップの動作、トランジション、クリーンアップ手順、より安全なテキストレンダリングに関するガイダンス。

「d3-viz」を使用しています。 データセットに多数のポイントがあり、SVG チャートが遅い。

期待される結果:

DOM ノードを削減し、大量の要素数では Canvas を検討し、リサイズを debounce し、軸とラベルには SVG を維持するという推奨。

セキュリティ監査

中リスク
v8 • 2026/7/6 バージョン別レポートを開く

The external command findings are false positives caused by Markdown code fences, inline code spans, and JavaScript template literals in D3 examples. The hardcoded URL is an HTTPS D3.js CDN example, not exfiltration. One semantic issue remains: the tooltip sample uses .html with data-derived content, which can teach unsafe DOM rendering.

1
スキャンされたファイル
217
解析済み行数
0
レビュー項目
0
誤検知を無視

確認済みのセキュリティ上の懸念 (1)

中
SKILL.md:146
Unsafe HTML Tooltip Rendering Example
The tooltip example writes a data-derived value with .html(...). If users adapt this pattern with untrusted data, HTML payloads could render in the page.
Line 146 uses .html with an interpolated data value in a reusable D3 tooltip pattern. The example appears numeric, so exploitability depends on user data, but the pattern can teach unsafe rendering.

リスク要因

⚙️ 外部コマンド (26)
SKILL.md:31-37 SKILL.md:37-41 SKILL.md:41-57 SKILL.md:57-70 SKILL.md:70-85 SKILL.md:85-90 SKILL.md:90-104 SKILL.md:104-107 SKILL.md:107-119 SKILL.md:119-122 SKILL.md:122-133 SKILL.md:133-138 SKILL.md:138-146 SKILL.md:146-156 SKILL.md:156-159 SKILL.md:159-167 SKILL.md:167-171 SKILL.md:171-182 SKILL.md:182-188 SKILL.md:188-189 SKILL.md:189-190 SKILL.md:190-191 SKILL.md:191-192 SKILL.md:192-193 SKILL.md:193-197 SKILL.md:197-208
🌐 ネットワークアクセス (1)
SKILL.md:36
監査者: codex 監査履歴を表示 →
このレポートを共有・引用

バージョン付き評価レポート、中立的なバッジ、埋め込みカード、引用を共有できます。Skillstore は証拠を報告しますが、この Skill が安全かどうかは判断しません。

バージョン別レポートを開く
セキュリティ評価

レポートリンクをコピー

https://skillstore.io/skills/doyajin174-d3-viz/audits/8?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdownバッジ

[![Skillstore security assessment](https://skillstore.io/badges/skills/doyajin174-d3-viz/security.svg)](https://skillstore.io/skills/doyajin174-d3-viz?utm_source=security_passport_badge)

HTMLバッジ

<a href="https://skillstore.io/skills/doyajin174-d3-viz?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/doyajin174-d3-viz/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

埋め込みカード

<iframe src="https://skillstore.io/embed/skills/doyajin174-d3-viz.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>
学術引用 (APA · BibTeX · CFF)

APA形式の引用

Doyajin174. (2026). d3-viz security audit report (audit version 8) [Author version 1.0]. Skillstore. https://skillstore.io/skills/doyajin174-d3-viz/audits/8

BibTeX形式の引用

@techreport{doyajin174-doyajin174-d3-viz-2026, author = {Doyajin174}, title = {d3-viz security audit report (audit version 8)}, institution = {Skillstore}, year = {2026}, number = {8}, url = {https://skillstore.io/skills/doyajin174-d3-viz/audits/8}, note = {Author version 1.0} }

CITATION.cff

cff-version: 1.2.0 message: "If you use this Skill, cite its author and this versioned security audit report." title: "d3-viz security audit report (audit version 8)" version: "1.0" type: report authors: - name: "Doyajin174" date-released: "2026-07-06" url: "https://skillstore.io/skills/doyajin174-d3-viz/audits/8" identifiers: - type: other value: "skillstore:doyajin174-d3-viz:audit:8" description: "Skillstore immutable audit report identifier"

バリアントを比較

インストール可能なバリアント 2 件

各作者のスキルは個別のインストール項目として維持されます。推奨バリアントは Skillstore の証拠で順位付けされます。

このバリアントが首位の理由

Skillstore スコアが最高
Doyajin174 推奨 現在

doyajin174-d3-viz

Skillstore スコア 70
証拠の信頼度 高
Skillstore 利用状況 9
更新済み

2026-09-09

sickn33

sickn33-d3-viz

Skillstore スコア 69
証拠の信頼度 高
Skillstore 利用状況 14
更新済み

2026-09-09

Skillstore スコア

このスコアの理由 証拠の信頼度: 高
55
アーキテクチャ
85
保守性
87
コンテンツ
70
コミュニティ
83
仕様準拠

作成できるもの

カスタムチャートのプロトタイプ作成

標準的ではないデータビュー向けに、スケール、軸、データ結合、視覚的なマークを備えた SVG チャート構造を作成します。

分析用グラフィックの準備

表形式データを、明確なスケールと配色を備えた棒グラフ、折れ線グラフ、円グラフのコンセプトに変換します。

ダッシュボードへのインタラクション追加

既存のチャートにホバー詳細、ズーム、パン、トランジション、再描画時のクリーンアップを追加します。

これらのプロンプトを試す

基本的なチャートを作成する 
d3-viz を使用して、category と value フィールドを持つデータセット向けのレスポンシブな棒グラフを作成してください。軸、マージン、ラベル、クリーンアップ手順を含めてください。
チャートにインタラクションを追加する 
d3-viz を使用して、既存の SVG チャートにツールチップとホバー状態を追加してください。ユーザーデータは raw HTML ではなくテキストとしてレンダリングしてください。
D3 実装をレビューする 
d3-viz を使用して、データバインディング、スケール、クリーンアップ、レスポンシブ対応、アクセシビリティの観点から私の D3 チャート構造をレビューしてください。編集前に簡潔な変更案を提案してください。
複雑なビジュアライゼーションを計画する 
d3-viz を使用して、カスタムネットワークまたは地理ビジュアライゼーションを計画してください。データ形状、SVG 構造、インタラクション、トランジション、パフォーマンス制約、アクセシビリティを定義してください。

ベストプラクティス

  • レンダリング前に null、NaN、空データを検証します。
  • レスポンシブなチャートには ResizeObserver またはコンテナの測定値を使用します。
  • 可能な場合は ARIA ラベル、キーボード代替手段、明確なテキストラベルを追加します。

回避

  • 信頼できないデータをツールチップ内で .html を使ってレンダリングすること。
  • 古い SVG 要素をクリアせずに再描画すること。
  • より小さなチャートライブラリで十分なシンプルなチャートに D3 を使うこと。

よくある質問

このスキルは何の構築に役立ちますか？
カスタム D3.js チャート、SVG ビジュアライゼーション、インタラクション、トランジション、スケール、配色の構築を支援します。
Claude、Codex、Claude Code で使用できますか？
はい。レポートには Claude、Codex、Claude Code のサポートが記載されています。
完全なアプリケーションを生成しますか？
いいえ。完全なプロジェクトのスキャフォールディングやデプロイ設定ではなく、D3 ビジュアライゼーションのパターンに焦点を当てています。
いつ D3.js を選ぶべきですか？
カスタム SVG チャート、高度なインタラクション、または標準的なチャートライブラリを超えるビジュアライゼーションが必要な場合は D3.js を選びます。
アクセシビリティを扱っていますか？
ARIA ラベルと明確なラベルを追加するようユーザーに促しますが、最終的なアクセシビリティレビューは引き続き必要です。
CDN の例は本番環境に対応していますか？
いいえ。本番ページでは package imports を優先するか、integrity controls を備えた固定バージョンの CDN scripts を使用するべきです。

開発者情報

作成者

Doyajin174

ライセンス

MIT

作者バージョン

v1.0

Skillstore リビジョン

r1

バージョンに関する注意

作者が宣言したバージョンは有効な SemVer ではありません。

リポジトリ

https://github.com/Doyajin174/myskills/tree/main/.public/skills/d3-viz

参照

72d5025b022c77f7a51bdf5c1637c689c80e89d1

メンテナンスの新しさ

2026/7/21

利用状況

7 ダウンロード · 218 閲覧

ファイル構成

📄 SKILL.md

Doyajin174 のその他のスキル

すべて表示

関連スキル

すべて表示