Skills d3js-visualization
📦
d3js-visualization
Content revision r1 Medium Risk ⚙️ External commands🌐 Network access
Build D3.js Data Visualizations
Custom browser charts often require many D3 decisions before any data appears. This skill supplies chart guidance, templates, helpers, and examples for Claude, Codex, and Claude Code.
Supports: Claude Codex Code(CC)
Install with my Agent
Copy this request to your Agent. It includes the canonical Skill page and manifest.
Agent request
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.Your Agent should still show its plan and request any confirmation required by the security policy.
Agent-readable resources
Use these links when an AI agent, crawler, or script needs clean context instead of reading the full page.
Test it
Using "d3js-visualization". Create a responsive time-series chart for monthly revenue.
Expected outcome:
- A chart plan using time scales, a line generator, clear axes, and hover details.
- A responsiveness plan using container width, viewBox sizing, and debounced resize handling.
- A checklist for accessibility labels, contrast, and keyboard support.
Using "d3js-visualization". Compare sales across three products and support grouped or stacked views.
Expected outcome:
- A bar chart design with band scales, grouped and stacked modes, and animated transitions.
- A legend interaction model for toggling product visibility.
- A tooltip content plan that avoids unsafe HTML for untrusted labels.
Using "d3js-visualization". Show relationships between teams, projects, and dependencies.
Expected outcome:
- A force-directed network plan with node sizing, group coloring, drag behavior, and hover highlighting.
- A performance note covering simulation parameters and update frequency.
- A usability note for zoom, pan, labels, and summary statistics.
Security Audit
Medium Riskv8 • 7/5/2026 Open versioned report
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
Files scanned
5,811
Lines analyzed
5
Review items
0
False positives ignored
Confirmed security concerns (1)
Medium
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.
Capability review items (5)
These are real local capabilities that may be expected for this skill, so they require review but are not counted as confirmed malicious behavior.
Low
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.
Low
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.
Low
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.
Low
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.
Low
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.
Risk Factors
⚙️ External commands (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
Audited by: codex View Audit History →
Share & cite this report
Share the versioned assessment report, neutral badge, embed card, and citations. Skillstore reports evidence without deciding whether this Skill is safe.
Copy report link
https://skillstore.io/skills/autumnsgrove-d3js-visualization/audits/8?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown badge
[](https://skillstore.io/skills/autumnsgrove-d3js-visualization?utm_source=security_passport_badge)HTML badge
<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>Embed card
<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>Academic citations (APA · BibTeX · CFF)
APA citation
AutumnsGrove. (2026). d3js-visualization security audit report (audit version 8) [Author version unspecified]. Skillstore. https://skillstore.io/skills/autumnsgrove-d3js-visualization/audits/8BibTeX citation
@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 Score
Why this score Evidence Confidence: High 82
Architecture
85
Maintainability
87
Content
75
Community
83
Spec Compliance
What You Can Build
Create an Interactive Dashboard Chart
Build a custom chart with axes, responsive sizing, transitions, and tooltip behavior for a dashboard view.
Prepare Data for Visual Analysis
Transform CSV-style data into grouped, aggregated, and typed structures before rendering a visualization.
Prototype a Network Visualization
Use force-directed graph patterns to explore relationships, node groups, hover states, and interactive controls.
Try These Prompts
Choose a Chart Type
Help me choose the best D3.js chart type for this dataset and goal: [describe data and audience]. Explain the tradeoffs.
Build a Responsive Chart
Create a responsive D3.js chart plan for [data shape]. Include scales, axes, margin convention, interactions, and accessibility notes.
Adapt a Template
Adapt the reusable D3 template for [line, bar, scatter, or pie]. Include needed configuration, data accessors, and update behavior.
Design an Advanced Visualization
Design an advanced D3.js visualization for [complex dataset]. Include performance strategy, interaction model, data transformation, and production risks.
Best Practices
- Start with the chart selection guide before writing D3 code.
- Use stable data joins and key functions for predictable updates.
- Test charts with real data sizes, long labels, and small viewports.
Avoid
- Using D3.js for simple charts that a smaller chart library can handle.
- Rendering untrusted values through HTML tooltips without sanitization.
- Redrawing every element on each interaction when data joins can update only changed elements.
Frequently Asked Questions
What does this skill help create?
It helps create custom D3.js charts, reusable templates, data helpers, and interactive browser visualizations.
Does it include working examples?
Yes. It includes line chart, bar chart, and network graph examples that run in a browser.
Can it help choose the right chart?
Yes. It includes guidance for time series, comparisons, relationships, distributions, and network data.
Does it support frontend frameworks?
Yes. The references discuss integration patterns for React, Vue, Angular, and Svelte.
Is it production ready by default?
No. Production use should add data validation, safer tooltip rendering, dependency pinning, and project tests.
Which AI tools can use it?
The report lists support for Claude, Codex, and Claude Code.
Developer Details
Author
AutumnsGroveLicense
MIT
Skillstore revision
r1
Version notice
The author did not declare a version.
Ref
5ab1d37e83436c6eef84de88573e142b94f2a4ad
Maintenance freshness
7/20/2026
Usage
77 downloads · 530 views