スキル d3js-visualization
📦
d3js-visualization
コンテンツリビジョン r1 中リスク ⚙️ 外部コマンド🌐 ネットワークアクセス
D3.js データビジュアライゼーションを構築
カスタムのブラウザチャートでは、データが表示される前に多くの D3 に関する判断が必要になることがよくあります。このスキルは、Claude、Codex、Claude Code 向けに、チャートのガイダンス、テンプレート、ヘルパー、例を提供します。
対応: Claude Codex Code(CC)
自分のエージェントでインストール
このリクエストをエージェントにコピーしてください。正規の Skill ページとマニフェストが含まれています。
エージェントリクエスト
Review the Skillstore skill "d3js-visualization" from https://skillstore.io/skills/autumnsgrove-d3js-visualization.md and its manifest at https://skillstore.io/api/skills/autumnsgrove-d3js-visualization/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.エージェントは引き続き計画を提示し、セキュリティポリシーで必要な確認を求める必要があります。
エージェントが読めるリソース
AI エージェント、クローラー、スクリプトがページ全体ではなく整理されたコンテキストを必要とする場合は、これらのリンクを使ってください。
テストする
「d3js-visualization」を使用しています。 月次売上のレスポンシブな時系列チャートを作成してください。
期待される結果:
- 時間スケール、折れ線ジェネレーター、明確な軸、ホバー時の詳細を使用したチャート計画。
- コンテナ幅、viewBox サイズ調整、デバウンスされたリサイズ処理を使用したレスポンシブ対応計画。
- アクセシビリティラベル、コントラスト、キーボード対応のチェックリスト。
「d3js-visualization」を使用しています。 3 つの製品間の売上を比較し、グループ表示または積み上げ表示に対応してください。
期待される結果:
- バンドスケール、グループ表示と積み上げ表示モード、アニメーション付きトランジションを備えた棒グラフ設計。
- 製品の表示切り替え用の凡例インタラクションモデル。
- 信頼できないラベルに対して安全でない HTML を避けるツールチップ内容の計画。
「d3js-visualization」を使用しています。 チーム、プロジェクト、依存関係の関係を表示してください。
期待される結果:
- ノードサイズ、グループ色分け、ドラッグ動作、ホバー強調表示を備えた force-directed network 計画。
- シミュレーションパラメータと更新頻度を扱うパフォーマンス上の注意。
- ズーム、パン、ラベル、要約統計に関するユーザビリティ上の注意。
セキュリティ監査
中リスクv8 • 2026/7/5 バージョン別レポートを開く
Most static findings are false positives from JavaScript template literals, Markdown fences, identifiers named key, CSS grid text, and chart logic. The review confirms low-risk CDN script usage in examples and one medium browser XSS risk from raw tooltip HTML rendering. No prompt injection, credential access, shell execution, or malware intent was found.
15
スキャンされたファイル
5,811
解析済み行数
5
レビュー項目
0
誤検知を無視
確認済みのセキュリティ上の懸念 (1)
中
scripts/chart-templates.js:909-922SKILL.md:157SKILL.md:274examples/bar-chart.html:583-589examples/line-chart.html:461-468examples/network-graph.html:453-462
Unsanitized Tooltip HTML Rendering
Tooltip helpers and examples pass data-derived strings to D3 .html(). If reused with untrusted labels or values, this can inject HTML or scripts into browser visualizations.
The code directly calls .html() with caller-provided or data-derived content. The bundled sample data is controlled, so exploitability depends on reuse with untrusted data.
機能レビュー項目 (5)
これらは、このスキルに期待される可能性のある実際のローカル機能であるため、レビューが必要ですが、確認済みの悪意ある動作としてはカウントされません。
低
Hardcoded URL
<script src="https://d3js.org/d3.v7.min.js"></script>
This example or documentation uses a runtime D3 CDN script tag. It is a legitimate setup option, but copied browser examples execute third-party JavaScript from the network.
低
Hardcoded URL
<script src="https://d3js.org/d3.v7.min.js"></script>
This example or documentation uses a runtime D3 CDN script tag. It is a legitimate setup option, but copied browser examples execute third-party JavaScript from the network.
低
Hardcoded URL
<script src="https://d3js.org/d3.v7.min.js"></script>
This example or documentation uses a runtime D3 CDN script tag. It is a legitimate setup option, but copied browser examples execute third-party JavaScript from the network.
低
Hardcoded URL
<script src="https://d3js.org/d3.v7.min.js"></script>
This example or documentation uses a runtime D3 CDN script tag. It is a legitimate setup option, but copied browser examples execute third-party JavaScript from the network.
低
Hardcoded URL
<script src="https://d3js.org/d3.v7.min.js"></script>
This example or documentation uses a runtime D3 CDN script tag. It is a legitimate setup option, but copied browser examples execute third-party JavaScript from the network.
リスク要因
⚙️ 外部コマンド (88)
examples/bar-chart.html:292 examples/bar-chart.html:337 examples/bar-chart.html:353 examples/bar-chart.html:451 examples/bar-chart.html:586-589 examples/bar-chart.html:676 examples/line-chart.html:309 examples/line-chart.html:325 examples/line-chart.html:464-468 examples/network-graph.html:254 examples/network-graph.html:259 examples/network-graph.html:271 examples/network-graph.html:276 examples/network-graph.html:291 examples/network-graph.html:306 examples/network-graph.html:307 examples/network-graph.html:397 examples/network-graph.html:457-462 examples/network-graph.html:568-571 references/advanced-patterns.md:41-45 references/advanced-patterns.md:45-104 references/advanced-patterns.md:180-184 references/advanced-patterns.md:208-222 references/advanced-patterns.md:244-251 references/common-pitfalls.md:113-114 references/d3-fundamentals.md:53-54 references/d3-fundamentals.md:253-255 references/d3-fundamentals.md:301-308 references/integration-patterns.md:23-45 references/integration-patterns.md:45-57 references/scales-and-axes.md:151-159 references/scales-and-axes.md:159-165 scripts/chart-templates.js:70 scripts/chart-templates.js:79 scripts/chart-templates.js:355 scripts/chart-templates.js:361 scripts/chart-templates.js:621 scripts/chart-templates.js:630 scripts/chart-templates.js:872 scripts/chart-templates.js:965 scripts/chart-templates.js:972 scripts/chart-templates.js:986 scripts/chart-templates.js:990 scripts/chart-templates.js:1005 scripts/data-helpers.js:702 scripts/data-helpers.js:703 SKILL.md:46-65 SKILL.md:65-69 SKILL.md:69-71 SKILL.md:71-73 SKILL.md:73-80 SKILL.md:80-84 SKILL.md:84-96 SKILL.md:96-116 SKILL.md:116-136 SKILL.md:136-142 SKILL.md:142-157 SKILL.md:157-167 SKILL.md:167-171 SKILL.md:171-177 SKILL.md:177-181 SKILL.md:181-204 SKILL.md:204-211 SKILL.md:211-214 SKILL.md:214-219 SKILL.md:219-220 SKILL.md:220-226 SKILL.md:226-250 SKILL.md:250-258 SKILL.md:258-267 SKILL.md:267-271 SKILL.md:271-274 SKILL.md:274-280 SKILL.md:280-284 SKILL.md:284-286 SKILL.md:286-290 SKILL.md:290-332 SKILL.md:332-339 SKILL.md:339-343 SKILL.md:343-346 SKILL.md:346-349 SKILL.md:349-352 SKILL.md:352-355 SKILL.md:355-358 SKILL.md:358-361 SKILL.md:361-364 SKILL.md:364-378 SKILL.md:378-379
監査者: codex 監査履歴を表示 →
このレポートを共有・引用
バージョン付き評価レポート、中立的なバッジ、埋め込みカード、引用を共有できます。Skillstore は証拠を報告しますが、この Skill が安全かどうかは判断しません。
レポートリンクをコピー
https://skillstore.io/skills/autumnsgrove-d3js-visualization/audits/8?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdownバッジ
[](https://skillstore.io/skills/autumnsgrove-d3js-visualization?utm_source=security_passport_badge)HTMLバッジ
<a href="https://skillstore.io/skills/autumnsgrove-d3js-visualization?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/autumnsgrove-d3js-visualization/security.svg" alt="Skillstore security assessment" loading="lazy"></a>埋め込みカード
<iframe src="https://skillstore.io/embed/skills/autumnsgrove-d3js-visualization.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形式の引用
AutumnsGrove. (2026). d3js-visualization security audit report (audit version 8) [Author version unspecified]. Skillstore. https://skillstore.io/skills/autumnsgrove-d3js-visualization/audits/8BibTeX形式の引用
@techreport{autumnsgrove-autumnsgrove-d3js-visualization-2026,
author = {AutumnsGrove},
title = {d3js-visualization security audit report (audit version 8)},
institution = {Skillstore},
year = {2026},
number = {8},
url = {https://skillstore.io/skills/autumnsgrove-d3js-visualization/audits/8},
note = {Author version unspecified}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "d3js-visualization security audit report (audit version 8)"
version: "unspecified"
type: report
authors:
- name: "AutumnsGrove"
date-released: "2026-07-05"
url: "https://skillstore.io/skills/autumnsgrove-d3js-visualization/audits/8"
identifiers:
- type: other
value: "skillstore:autumnsgrove-d3js-visualization:audit:8"
description: "Skillstore immutable audit report identifier"
Skillstore スコア
このスコアの理由 証拠の信頼度: 高 82
アーキテクチャ
85
保守性
87
コンテンツ
75
コミュニティ
83
仕様準拠
作成できるもの
インタラクティブなダッシュボードチャートを作成
ダッシュボードビュー向けに、軸、レスポンシブなサイズ調整、トランジション、ツールチップ動作を備えたカスタムチャートを構築します。
視覚分析用のデータを準備
ビジュアライゼーションをレンダリングする前に、CSV 形式のデータをグループ化、集計、型付けされた構造に変換します。
ネットワークビジュアライゼーションをプロトタイプ
force-directed graph パターンを使用して、関係、ノードグループ、ホバー状態、インタラクティブなコントロールを探索します。
これらのプロンプトを試す
チャートタイプを選ぶ
このデータセットと目的に最適な D3.js チャートタイプを選ぶのを手伝ってください: [describe data and audience]。トレードオフを説明してください。
レスポンシブチャートを構築する
[data shape] 向けのレスポンシブな D3.js チャート計画を作成してください。スケール、軸、マージン規約、インタラクション、アクセシビリティの注意点を含めてください。
テンプレートを適応する
[line, bar, scatter, or pie] 用の再利用可能な D3 テンプレートを適応してください。必要な設定、データアクセサ、更新動作を含めてください。
高度なビジュアライゼーションを設計する
[complex dataset] 向けの高度な D3.js ビジュアライゼーションを設計してください。パフォーマンス戦略、インタラクションモデル、データ変換、本番運用上のリスクを含めてください。
ベストプラクティス
- D3 コードを書く前に、チャート選択ガイドから始めます。
- 予測可能な更新のために、安定したデータ結合とキー関数を使用します。
- 実際のデータサイズ、長いラベル、小さいビューポートでチャートをテストします。
回避
- より小さなチャートライブラリで対応できる単純なチャートに D3.js を使用する。
- サニタイズせずに、信頼できない値を HTML ツールチップ経由でレンダリングする。
- データ結合で変更された要素だけを更新できる場合に、インタラクションごとにすべての要素を再描画する。
よくある質問
このスキルは何の作成に役立ちますか？
カスタム D3.js チャート、再利用可能なテンプレート、データヘルパー、インタラクティブなブラウザビジュアライゼーションの作成を支援します。
動作する例は含まれていますか？
はい。ブラウザで実行できる折れ線グラフ、棒グラフ、ネットワークグラフの例が含まれています。
適切なチャートの選択に役立ちますか？
はい。時系列、比較、関係、分布、ネットワークデータに関するガイダンスが含まれています。
フロントエンドフレームワークに対応していますか？
はい。リファレンスでは React、Vue、Angular、Svelte の統合パターンについて説明しています。
デフォルトで本番対応ですか？
いいえ。本番利用では、データ検証、より安全なツールチップレンダリング、依存関係の固定、プロジェクトテストを追加する必要があります。
どの AI ツールで使用できますか？
レポートには Claude、Codex、Claude Code のサポートが記載されています。
開発者情報
作成者
AutumnsGroveライセンス
MIT
Skillstore リビジョン
r1
バージョンに関する注意
作者はバージョンを宣言していません。
参照
5ab1d37e83436c6eef84de88573e142b94f2a4ad
メンテナンスの新しさ
2026/7/18
利用状況
77 ダウンロード · 530 閲覧