Advanced Data Visualization
Hack23/cia
Advanced chart types, D3.js/Vaadin Charts patterns, political data visualization, time series analysis
Professional data visualization creation using D3.js with support for interactive charts, custom visualizations, animations, and responsive design.
Install D3js Visualization
$ npx skills add aiskillstore/marketplace --skill d3js-visualization -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install aiskillstore/marketplace d3js-visualization --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/aiskillstore/marketplace.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/autumnsgrove/d3js-visualization .claude/skills/d3js-visualization && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "d3js-visualization" agent skill from https://github.com/aiskillstore/marketplace/tree/main/skills/autumnsgrove/d3js-visualization into .claude/skills/d3js-visualization/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "d3js-visualization", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/aiskillstore/marketplace/tree/main/skills/autumnsgrove/d3js-visualizationType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add aiskillstore/marketplace --skill d3js-visualization -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install aiskillstore/marketplace d3js-visualization --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/aiskillstore/marketplace.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/autumnsgrove/d3js-visualization .agents/skills/d3js-visualization && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "d3js-visualization" agent skill from https://github.com/aiskillstore/marketplace/tree/main/skills/autumnsgrove/d3js-visualization into .agents/skills/d3js-visualization/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "d3js-visualization", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add aiskillstore/marketplace --skill d3js-visualization -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install aiskillstore/marketplace d3js-visualization --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/aiskillstore/marketplace.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/autumnsgrove/d3js-visualization .cursor/skills/d3js-visualization && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "d3js-visualization" agent skill from https://github.com/aiskillstore/marketplace/tree/main/skills/autumnsgrove/d3js-visualization into .cursor/skills/d3js-visualization/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "d3js-visualization", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/aiskillstore/marketplace.git --path skills/autumnsgrove/d3js-visualization--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add aiskillstore/marketplace --skill d3js-visualization -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install aiskillstore/marketplace d3js-visualization --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/aiskillstore/marketplace.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/autumnsgrove/d3js-visualization .gemini/skills/d3js-visualization && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "d3js-visualization" agent skill from https://github.com/aiskillstore/marketplace/tree/main/skills/autumnsgrove/d3js-visualization into .gemini/skills/d3js-visualization/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "d3js-visualization", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install aiskillstore/marketplace d3js-visualizationInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add aiskillstore/marketplace --skill d3js-visualization -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/aiskillstore/marketplace.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/autumnsgrove/d3js-visualization .github/skills/d3js-visualization && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "d3js-visualization" agent skill from https://github.com/aiskillstore/marketplace/tree/main/skills/autumnsgrove/d3js-visualization into .github/skills/d3js-visualization/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "d3js-visualization", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add aiskillstore/marketplace --skill d3js-visualization -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install aiskillstore/marketplace d3js-visualization --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/aiskillstore/marketplace.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/autumnsgrove/d3js-visualization .opencode/skills/d3js-visualization && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "d3js-visualization" agent skill from https://github.com/aiskillstore/marketplace/tree/main/skills/autumnsgrove/d3js-visualization into .opencode/skills/d3js-visualization/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "d3js-visualization", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
d3js-visualization- GitHub stars
- 430
- Token cost
- ~2.9k tokens
- SKILL.md length
- 767 words
- Files
- 16 (incl. scripts, references)
- Skills in repo
- 1,085
- Repo updated
- First seen
- Licence
- None found
At a glance
Professional data visualization creation using D3.js with support for interactive charts, custom visualizations, animations, and responsive design.
- Works in 4 steps: Project Setup → Create Basic Chart → Add Interactivity → …
- Creating custom interactive charts
- SKILL.md covers What is D3.js, Core Workflow, Key Principles and Chart Selection Guide, plus 5 more sections
- Runs JavaScript scripts from its folder; calls npm; reaches d3js.org
What it does
D3js Visualization is an agent skill from aiskillstore/marketplace. Professional data visualization creation using D3.js with support for interactive charts, custom visualizations, animations, and responsive design. Use for: (1) Creating custom interactive charts, (2) Building dashboards, (3) Network/graph visualizations, (4) Geographic data mapping, (5) Time series analysis, (6) Real-time data visualization, (7) Complex multi-dimensional data displays
Its SKILL.md is about 2.9k tokens, which your agent loads only when the skill is triggered. The skill folder holds 18 other files, including scripts and reference files (for example `README.md`, `references/advanced-patterns.md` and `references/chart-types.md`).
It sits in Data & Analytics, covering Data visualization, Responsive design and Forecasting and time series. It works with D3.js. The repository describes itself as: Security-audited skills for Claude, Codex & Claude Code. One-click install, quality verified.
When your agent uses it
- Creating custom interactive charts
- Building dashboards
- Network/graph visualizations
- Geographic data mapping
Example prompts
- “/d3js-visualization”
Requirements
- Node.js
Workflow steps
4 steps, taken from the step headings in SKILL.md.
- Project Setup
- Create Basic Chart
- Add Interactivity
- Implement Responsive Design
What it can do on your machine
Read from SKILL.md and the folder at commit 4ac52da. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Ships 2 files in scripts/ (JavaScript), which the agent can run.
Shell commands in SKILL.md call:
npm
From the folder's file list and the shell code blocks in SKILL.md.
Network
Hosts in commands or code, which the agent is likely to contact:
d3js.org
Also links to:
observablehq.comd3-graph-gallery.comwattenberger.comcolorbrewer2.orgreddit.com
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
D3js Visualization loads about 2.9k tokens when it runs, and up to ~11k if it reads all its reference files. Until then it costs about 102 tokens; SKILL.md has 767 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.
SKILL.md
Without a licence we can't republish the file, so here is its outline and opening line. It has 767 words (~2,895 tokens).
“D3.js (Data-Driven Documents) is a JavaScript library for producing dynamic, interactive data visualizations in web browsers. It uses HTML, SVG, and CSS standards to bind data to the DOM and apply data-driven transformations.”
- name
- d3js-visualization
Files
SKILL.md and 15 other files (scripts, references) in skills/autumnsgrove/d3js-visualization of aiskillstore/marketplace.
- SKILL.md
- README.md
- examples/bar-chart.html
- examples/line-chart.html
- examples/network-graph.html
- references/advanced-patterns.md
- references/chart-types.md
- references/common-pitfalls.md
- references/d3-fundamentals.md
- references/data-transformation.md
- references/integration-patterns.md
- references/paths-and-shapes.md
- references/scales-and-axes.md
- scripts/chart-templates.js
- scripts/data-helpers.js
- skill-report.json
Open the folder on GitHubat commit 4ac52da
Compare with similar skills
D3js Visualization next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| D3js Visualization this skillaiskillstore/marketplace | 430 | — | ~2.9k | Automated safety check: Pass | None | |
| Advanced Data VisualizationHack23/cia | 239 | — | ~1.5k | Automated safety check: Pass | Apache-2.0 | |
| D3 Vizcalesthio/OpenMontage | 65k | 3 repos | ~5.4k | Automated safety check: Pass | AGPL-3.0 | |
| Chart Imagezebbern/claude-code-guide | 4.6k | — | ~2.7k | Automated safety check: Pass | MIT | |
| Tuftearef-vc/tufte-claude-skill | 306 | — | ~1.3k | Automated safety check: Pass | MIT | |
| Tufte Data Vizcaylent/tufte-data-viz | 222 | — | ~3.5k | Automated safety check: Pass | MIT |
Similar skills
D3 Viz
calesthio/OpenMontage
Creating interactive data visualisations using d3.js. An agent skill from calesthio/OpenMontage.
Chart Image
zebbern/claude-code-guide
Generate publication-quality PNG chart images from data, supporting line, bar, area, candlestick, pie, and heatmap charts.
Tufte
aref-vc/tufte-claude-skill
Apply Edward Tufte's principles to any data visualization, chart, dashboard, or infographic.
Tufte Data Viz
caylent/tufte-data-viz
A skill your agent uses when creating, reviewing, or styling charts, graphs, dashboards, sparklines, or any data visualization.
Create HTML Embed
adithya-s-k/FineEnvs
Create self-contained D3 HTML embed charts for the research article template.
More from aiskillstore/marketplace
All 1,085 skills in this repoCode Stats
aiskillstore/marketplace
Analyze codebase with tokei (fast line counts by language) and difft (semantic AST-aware diffs).
Data Processing
aiskillstore/marketplace
Process JSON with jq and YAML/TOML with yq. An agent skill from aiskillstore/marketplace.
Doc Scanner
aiskillstore/marketplace
Scans for project documentation files (AGENTS.md, CLAUDE.md, GEMINI.md, COPILOT.md, CURSOR.md, WARP.md, and 15+ other formats) and synthesizes guidance.
File Search
aiskillstore/marketplace
Modern file and content search using fd, ripgrep (rg), and fzf.
Find Replace
aiskillstore/marketplace
Modern find-and-replace using sd (simpler than sed) and batch replacement patterns.
Investigating Codebases
aiskillstore/marketplace
Automatically activated when user asks how something works, wants to understand unfamiliar code, needs to explore a new codebase, or asks questions like "where is X implemented?", "how does Y…
Related
Works with
Categories
Questions about D3js Visualization
What does D3js Visualization do?
Professional data visualization creation using D3.js with support for interactive charts, custom visualizations, animations, and responsive design. D3js Visualization is an agent skill from aiskillstore/marketplace.js with support for interactive charts, custom visualizations, animations, and responsive design.
When should I use D3js Visualization?
D3js Visualization fits situations like: creating custom interactive charts; building dashboards; network/graph visualizations; geographic data mapping.
How do I install D3js Visualization in Claude Code?
Run `npx skills add aiskillstore/marketplace --skill d3js-visualization -a claude-code`. Or copy the skill folder (skills/autumnsgrove/d3js-visualization in aiskillstore/marketplace) into .claude/skills/d3js-visualization in your project. Claude Code loads it when a task matches its description.
How do I install D3js Visualization in Codex?
Run `npx skills add aiskillstore/marketplace --skill d3js-visualization -a codex`. Or copy the skill folder (skills/autumnsgrove/d3js-visualization in aiskillstore/marketplace) into .agents/skills/d3js-visualization in your project. Codex loads it when a task matches its description.
Can I use D3js Visualization in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add aiskillstore/marketplace --skill d3js-visualization -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/d3js-visualization, .gemini/skills/d3js-visualization, .github/skills/d3js-visualization and .opencode/skills/d3js-visualization in your project.
What does D3js Visualization need to run?
Going by SKILL.md and its folder, D3js Visualization needs JavaScript for the scripts in its folder and the command-line tools its instructions call (npm). Our summary lists: Node.js.
Does D3js Visualization access the network?
SKILL.md names 6 domains. In commands or code: d3js.org; the agent is likely to contact it when it follows the instructions. As links in the text: observablehq.com, d3-graph-gallery.com, wattenberger.com, colorbrewer2.org and reddit.com. This is read from the text; nothing was executed.
Is D3js Visualization safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.
What licence does D3js Visualization use?
No licence was found for D3js Visualization or its repository. Without one, default copyright applies: ask the author before reusing or redistributing it.
How many tokens does D3js Visualization use?
About 2.9k tokens (SKILL.md is roughly 12k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 8.3k tokens, read only when the agent opens those files.
What are the alternatives to D3js Visualization?
Skills that share tags, products or a category with D3js Visualization: Advanced Data Visualization (Hack23/cia, 239 stars), D3 Viz (calesthio/OpenMontage, 65k stars), Chart Image (zebbern/claude-code-guide, 4.6k stars) and Tufte (aref-vc/tufte-claude-skill, 306 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains D3js Visualization?
aiskillstore (a GitHub organization) maintains it in aiskillstore/marketplace, which has 430 GitHub stars. The repository holds 1,085 skills in this directory. The repository was last updated on October 7, 2026.
Source: aiskillstore/marketplace on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.