Skills claude-d3js-skill

📦

claude-d3js-skill

Name: claude-d3js-skill
Author: sickn33

Content revision r1 High Risk ⚙️ External commands📁 Filesystem access🌐 Network access

Create Interactive D3.js Visualisations

Custom D3.js visualisation work requires many chart patterns and integration choices. This skill provides reusable guidance, templates, and references for building interactive SVG charts.

Supports: Claude Codex Code(CC)

⚠️ 38 Poor

Stop for confirmation before installing.

Review the plan and obtain explicit user consent before changing files.

Install with my Agent

Copy this request to your Agent. It includes the canonical Skill page and manifest.

Agent request

Review the Skillstore skill "claude-d3js-skill" from https://skillstore.io/skills/sickn33-claude-d3js-skill.md and its manifest at https://skillstore.io/api/skills/sickn33-claude-d3js-skill/manifest. Verify the artifact. Stop and obtain explicit user consent before installing or changing files.

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.

Markdown detail GET /skills/sickn33-claude-d3js-skill.md Signed manifest GET /api/skills/sickn33-claude-d3js-skill/manifest Signed lockfile GET /api/skills/sickn33-claude-d3js-skill/lockfile

Test it

Using "claude-d3js-skill". A request for a responsive stacked bar chart comparing monthly product metrics.

Expected outcome:

A D3 implementation plan with grouped data handling, stacked series, band scales, axes, legend, and responsive sizing notes.

Using "claude-d3js-skill". A request for an interactive scatter plot inside a React app.

Expected outcome:

A component-oriented response covering refs, D3 rendering lifecycle, zoom behaviour, tooltip state, and accessible labels.

Using "claude-d3js-skill". A request to improve an unreadable colour palette.

Expected outcome:

A revised palette recommendation using D3 colour schemes, contrast guidance, and colour-blind safe alternatives.

Security Audit

High Risk

v4 • 7/5/2026 Open versioned report

Most static findings are false positives caused by Markdown code fences, JavaScript template literals, D3 data keys, or chart styling text. One low network dependency is confirmed because the documentation shows a remote D3 CDN script, and one semantic finding notes unsafe tooltip HTML interpolation for untrusted data.

Files scanned

3,216

Lines analyzed

Review items

False positives ignored

Confirmed security concerns (1)

High

assets/interactive-template.jsx:112-118 SKILL.md:572

Unsanitized Tooltip HTML Rendering

The skill shows tooltips built with .html() and unescaped data fields such as d.label and d.category. If generated charts render untrusted data, this can allow script or markup injection in the page.

The code directly passes interpolated data fields into D3 .html() tooltip content. The risk depends on data trust, but the unsafe sink is explicit.

Capability review items (1)

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

SKILL.md:41

Hardcoded URL

The skill documents loading D3 from https://d3js.org/d3.v7.min.js, which creates an external script dependency if copied into output. This is not exfiltration, but it has supply-chain and network availability implications.

Risk Factors

⚙️ External commands (102)

📁 Filesystem access (1)

references/d3-patterns.md:366

🌐 Network access (1)

SKILL.md:41

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.

Open versioned report

Copy report link

https://skillstore.io/skills/sickn33-claude-d3js-skill/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown badge

[![Skillstore security assessment](https://skillstore.io/badges/skills/sickn33-claude-d3js-skill/security.svg)](https://skillstore.io/skills/sickn33-claude-d3js-skill?utm_source=security_passport_badge)

HTML badge

<a href="https://skillstore.io/skills/sickn33-claude-d3js-skill?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/sickn33-claude-d3js-skill/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

Embed card

<iframe src="https://skillstore.io/embed/skills/sickn33-claude-d3js-skill.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

sickn33. (2026). claude-d3js-skill security audit report (audit version 4) [Author version unspecified]. Skillstore. https://skillstore.io/skills/sickn33-claude-d3js-skill/audits/4

BibTeX citation

@techreport{sickn33-sickn33-claude-d3js-skill-2026,
  author = {sickn33},
  title = {claude-d3js-skill security audit report (audit version 4)},
  institution = {Skillstore},
  year = {2026},
  number = {4},
  url = {https://skillstore.io/skills/sickn33-claude-d3js-skill/audits/4},
  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: "claude-d3js-skill security audit report (audit version 4)"
version: "unspecified"
type: report
authors:
  - name: "sickn33"
date-released: "2026-07-05"
url: "https://skillstore.io/skills/sickn33-claude-d3js-skill/audits/4"
identifiers:
  - type: other
    value: "skillstore:sickn33-claude-d3js-skill:audit:4"
    description: "Skillstore immutable audit report identifier"

Skillstore Score

Why this score Evidence Confidence: Medium

Architecture

Maintainability

Content

Community

Spec Compliance

What You Can Build

Build custom dashboard charts

Create tailored charts when standard chart libraries cannot express the needed layout or interaction.

Prototype product analytics views

Design React-based chart components with D3 scales, axes, tooltips, and zoom behaviour.

Create explanatory data graphics

Prepare polished SVG visualisations for reports, research summaries, and public data stories.

Try These Prompts

Basic Chart Starter

Create a D3.js bar chart for this dataset. Include margins, scales, axes, labels, and a clear colour choice.

Interactive Chart Component

Build a React component that renders an interactive D3 scatter plot with tooltips, zoom, and selected point state.

Choose Visual Encodings

Recommend a D3 visualisation approach for this data and goal. Explain the scales, colour scheme, interactions, and tradeoffs.

Advanced Network Visualisation

Create a force-directed network diagram with drag behaviour, labels, grouped colours, legends, and performance considerations.

Best Practices

Define dimensions, margins, scales, and axes before drawing marks.
Use D3 for data calculations and SVG updates where it gives clear control.
Escape or sanitize user-provided values before placing them into HTML tooltips.

Avoid

Do not use D3 when a simple static chart library meets the requirement.
Do not redraw complex charts on every render without checking dependencies.
Do not interpolate untrusted data into tooltip HTML.

Frequently Asked Questions

What does this skill help build?

It helps build custom D3.js charts, SVG visualisations, interactive diagrams, and React chart components.

Does it include ready-to-use templates?

Yes. It includes basic and interactive React templates plus reference patterns for common D3 chart types.

Can it help choose the right D3 scale?

Yes. The references explain linear, band, ordinal, time, logarithmic, and other scale choices.

Does it support interactive behaviour?

Yes. It covers tooltips, zoom, pan, brushing, transitions, and drag interactions.

Is it safe for untrusted data?

Use care. Tooltip examples that render HTML should sanitize or escape untrusted values first.

Is this intended for 3D visualisation?

No. The skill recommends Three.js for 3D visualisations.

Developer Details

Author

sickn33

License

MIT

Skillstore revision

Version notice

The author did not declare a version.

Repository

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/claude-d3js-skill

Ref

6425ec35f4ac137735cff58cd7877843bba23e3b

Maintenance freshness

7/18/2026

Usage

11 downloads · 172 views

File structure

📁 assets/

📄 chart-template.jsx

📄 interactive-template.jsx

📄 sample-data.json

📁 references/

📄 colour-schemes.md

📄 d3-patterns.md

📄 scale-reference.md

📄 SKILL.md