What does this skill do, and when should you use it?
This is a knowledge-based Claude skill that instructs the model to write custom, interactive data visualizations using d3.js. It covers two integration patterns — direct DOM manipulation and declarative rendering — and provides working code for bar charts, line charts, scatter plots, chord diagrams, heatmaps, pie charts, and force-directed networks, plus tooltips, zoom/pan, transitions, a scales reference, and accessibility and performance best practices. Examples target vanilla JavaScript, React, Vue, and Svelte alike. The skill is prompt knowledge rather than an executable program: it produces code but runs nothing.
Reads the user's visualization requirements and data shape, and generates SVG visualization code built on d3.js (7.x). It supplies: a standard chart function structure (margins, scales, axes, data binding), two integration patterns (imperative DOM manipulation vs. declarative rendering inside frameworks), responsive sizing approaches (resize listeners and ResizeObserver), interactions (tooltips, zoom and pan, click handlers), transitions with custom easing, a full scales reference, and guidance on performance for large datasets and ARIA accessibility. It ships references/ docs and assets/ boilerplate templates (chart-template.js, interactive-template.js, sample-data.) to consult on demand.
- Frontend developers needing custom SVG visualizations in React/Vue/Svelte projects that standard chart libraries cannot express
- Data analysts building relationship views — force-directed graphs, trees, chord diagrams — between entities
- Developers creating geographic visualizations with custom projections
- Visualization engineers producing publication-quality charts with fine-grained styling and choreographed transitions
- Dashboard builders adding interactive exploration features such as zoom, pan, and brush behaviors
How do you install this skill?
- The tooltip example injects unescaped user data (d.label/d.value) via .html(); if data is untrusted this risks XSS — use .text() or escape values.
- The chord diagram's d3.ribbon() source/target usage is questionable against the d3 v7 API; verify against official docs before use.
- License and author identity are unverified; confirm repository license and maintenance status before enterprise adoption.
- This is a static review with no code executed; real usability requires independent reproduction.
- Loading d3 from d3js.org via CDN may be unreachable in restricted network environments; prefer locally bundled dependencies.
Repository: https://github.com/chrisvoncsefalvay/claude-d3js-skill, with SKILL.md as the skill entry file. The standard approach is to clone the repo as a skill folder (containing SKILL.md plus references/ and assets/) into your Claude Code skills directory. The README was not cached, and no install commands or official setup instructions are provided.
git clone --depth 1 https://github.com/chrisvoncsefalvay/claude-d3js-skill.git ~/.claude/skills/claude-d3js-skillGenerated from the source repository and skill path; it copies only this skill's folder. If the author's install steps above differ, follow those first. To scope it to one project, replace ~/.claude/skills with that project's .claude/skills.
How do you use this skill?
Once installed, send your agent any of these to trigger it:
- Use d3.js to draw a sales heatmap by quarter, with a colour legend and tooltips
Once installed, invoke it for visualization tasks, e.g. the prompt: "Use d3.js to draw a sales heatmap by quarter, with a colour legend and tooltips". Per the skill description, use it for custom charts, network diagrams, geographic visualizations, or any SVG work needing fine control over elements, transitions, and interactions; use Three.js for 3D instead.
What are this skill's strengths and limitations?
- Broad coverage: complete, runnable code templates from basic charts through chord diagrams and force-directed networks
- Framework-neutral: shows integration for vanilla JS, React, Vue, and Svelte
- Includes often-neglected engineering details: responsive sizing, performance optimization, ARIA accessibility, troubleshooting
- Ships a full scales reference and colour scheme docs, reducing the need to consult official documentation
- Purely a knowledge skill: it generates code but does not execute, preview, or verify rendering
- No license information on the repository (License: unknown) — verify terms before commercial use
- No repo topics and the README is not cached, so there is little community evidence and no test suite
- Explicitly does not support 3D visualization (directs users to Three.js)
- No install or usage instructions — relies on general Agent Skills conventions
How does this skill compare with similar options?
Side by side with related skills; every score comes from the same FSRS standard.
| Skill | FS score | Stars | Last updated | License |
|---|---|---|---|---|
| D3.js Visualization Skill this page | 60 · Recommended | ★ 243 | 1y ago | — |
| Lieflat Charts | 57 · Use with care | ★ 6.1k | 1mo ago | NOASSERTION |
| Blog Chart SVG Generator | 51 · Use with care | ★ 2.4k | 11d ago | MIT |
| OfficeCLI Data Dashboard Skill | 57 · Use with care | ★ 32k | 12d ago | Apache-2.0 |
| BigQuery BigFrames Development Standards ✓ Google · Official | 50 · Use with care | ★ 21k | 11d ago | Apache-2.0 |
The skill itself draws its boundary: for routine needs met by standard charting libraries, and for 3D visualizations, it recommends those alternatives (standard chart libraries and Three.js) over d3.js.
How did FollowSkills review this skill?
SKILL.md is pure knowledge guidance: no script execution, no external side effects, no permission requests, no exfiltration paths; data flow is transparent (user data → local rendering). Deducted for: missing source attribution and license metadata, unverified author identity, and a tooltip example using .html() with unescaped d.label/d.value, creating an unflagged XSS injection surface.
Examples are largely self-consistent with empty-data guards and a troubleshooting section. Deducted for: no static reproduction of key paths; the chord diagram's d3.ribbon() source/target configuration is questionable against d3 v7's expected parametric accessors; no tests, edge cases, or explicit failure-feedback behavior.
Trigger conditions are clearly described in the description (custom charts, network diagrams, geographic visualisations), with declared non-fit (3D → Three.js) and alternatives, plus cross-framework notes. Deducted for: no environment dependency disclosure (CDN reachability under restricted networks), no Chinese-language support note, and possibly over-broad triggering for simple charting tasks better served by standard libraries.
Well-layered documentation (overview → workflow → patterns → troubleshooting → resources) with progressive disclosure via references/ and assets/. Deducted for: no skill-level license statement, no version/changelog, no maintenance ownership or update path; license metadata unknown and attribution unverified.
Covers common chart types and interactions with directly usable code snippets, plus data-cleaning, performance, and accessibility practices; clear marginal value over manual documentation lookup. Deducted for: static review cannot verify outputs run as-is; some examples (chord diagram, heatmap legend) appear to need fixes, and comparative-benefit evidence is limited; static cap is 7.
The file provides auditable primary material: complete code examples and structured guidance. Deducted for: no test suite, no third-party execution evidence, no cross-source corroboration, and no explicit fact/inference separation; limited score under the static cap.
Open a dimension to read why it scored that way
Evidence confidence：Low — Mostly static review, author material or a limited demo; useful for discovery, not high-risk decisions.
See the full review method →