D3js Visualization
aiskillstore/marketplace
Professional data visualization creation using D3.js with support for interactive charts, custom visualizations, animations, and responsive design.
Advanced chart types, D3.js/Vaadin Charts patterns, political data visualization, time series analysis
$ npx skills add Hack23/cia --skill advanced-data-visualization -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install Hack23/cia advanced-data-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/Hack23/cia.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.github/skills/advanced-data-visualization .claude/skills/advanced-data-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 "advanced-data-visualization" agent skill from https://github.com/Hack23/cia/tree/master/.github/skills/advanced-data-visualization into .claude/skills/advanced-data-visualization/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "advanced-data-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/Hack23/cia/tree/master/.github/skills/advanced-data-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 Hack23/cia --skill advanced-data-visualization -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install Hack23/cia advanced-data-visualization --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Hack23/cia.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.github/skills/advanced-data-visualization .agents/skills/advanced-data-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 "advanced-data-visualization" agent skill from https://github.com/Hack23/cia/tree/master/.github/skills/advanced-data-visualization into .agents/skills/advanced-data-visualization/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "advanced-data-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 Hack23/cia --skill advanced-data-visualization -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install Hack23/cia advanced-data-visualization --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Hack23/cia.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.github/skills/advanced-data-visualization .cursor/skills/advanced-data-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 "advanced-data-visualization" agent skill from https://github.com/Hack23/cia/tree/master/.github/skills/advanced-data-visualization into .cursor/skills/advanced-data-visualization/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "advanced-data-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/Hack23/cia.git --path .github/skills/advanced-data-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 Hack23/cia --skill advanced-data-visualization -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install Hack23/cia advanced-data-visualization --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Hack23/cia.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.github/skills/advanced-data-visualization .gemini/skills/advanced-data-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 "advanced-data-visualization" agent skill from https://github.com/Hack23/cia/tree/master/.github/skills/advanced-data-visualization into .gemini/skills/advanced-data-visualization/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "advanced-data-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 Hack23/cia advanced-data-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 Hack23/cia --skill advanced-data-visualization -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/Hack23/cia.git skills-src && mkdir -p .github/skills && cp -r skills-src/.github/skills/advanced-data-visualization .github/skills/advanced-data-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 "advanced-data-visualization" agent skill from https://github.com/Hack23/cia/tree/master/.github/skills/advanced-data-visualization into .github/skills/advanced-data-visualization/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "advanced-data-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 Hack23/cia --skill advanced-data-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 Hack23/cia advanced-data-visualization --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Hack23/cia.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.github/skills/advanced-data-visualization .opencode/skills/advanced-data-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 "advanced-data-visualization" agent skill from https://github.com/Hack23/cia/tree/master/.github/skills/advanced-data-visualization into .opencode/skills/advanced-data-visualization/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "advanced-data-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.
advanced-data-visualizationAdvanced chart types, D3.js/Vaadin Charts patterns, political data visualization, time series analysis
Advanced Data Visualization is an agent skill from Hack23/cia. Advanced chart types, D3.js/Vaadin Charts patterns, political data visualization, time series analysis
Its SKILL.md is about 1.5k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Data & Analytics, covering Data visualization and Forecasting and time series. It works with D3.js. The repository describes itself as: Citizen Intelligence Agency. Open-source intelligence platform analyzing Swedish political activities using AI and data visualization. Tracks politicians, government… The licence is Apache-2.0.
5 steps, taken from the first numbered list in SKILL.md.
Read from SKILL.md and the folder at commit 6a9797b. It shows what the files ask for, not the result of running them.
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.
No scripts in the folder and no shell commands in SKILL.md (its code samples are java).
From the folder's file list and the shell code blocks in SKILL.md.
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Advanced Data Visualization loads about 1.5k tokens when it runs. Until then it costs about 33 tokens; SKILL.md has 318 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.
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); files beside SKILL.md are not scanned.
The full file from Hack23/cia at commit 6a9797b, republished under its Apache-2.0 licence (© Hack23). 318 words, ~1,497 tokens.
.claude/skills/advanced-data-visualization/SKILL.md (or your agent's skills folder).Guide the design and implementation of effective data visualizations for the CIA political intelligence platform, covering chart selection, color theory, accessibility, and domain-specific patterns for Swedish political data.
Do NOT use for:
| Data Type | Recommended Chart | CIA Use Case |
|---|---|---|
| Party vote distribution | Stacked bar / Donut | Riksdag vote breakdown |
| Voting trends over time | Line / Area chart | Politician attendance trends |
| Committee composition | Treemap / Sunburst | Committee member distribution |
| Politician comparison | Radar / Parallel coords | Multi-metric comparison |
| Geographic data | Choropleth map | Regional election results |
| Relationships | Force-directed graph | Political network analysis |
| Financial flows | Sankey diagram | Government budget allocation |
| Risk assessment | Heatmap / Gauge | Politician risk scoring |
@Route("politician-dashboard")
public class PoliticianDashboardView extends VerticalLayout {
private Chart createVotingTrendChart(List<VotingRecord> records) {
Chart chart = new Chart(ChartType.LINE);
Configuration conf = chart.getConfiguration();
conf.setTitle("Voting Participation Over Time");
XAxis xAxis = new XAxis();
xAxis.setType(AxisType.DATETIME);
conf.addxAxis(xAxis);
YAxis yAxis = new YAxis();
yAxis.setTitle("Participation %");
yAxis.setMin(0);
yAxis.setMax(100);
conf.addyAxis(yAxis);
DataSeries series = new DataSeries("Attendance");
for (VotingRecord record : records) {
series.add(new DataSeriesItem(
record.getDate().toInstant(),
record.getParticipationRate()
));
}
conf.addSeries(series);
return chart;
}
}public final class SwedishPartyColors {
// Official Swedish party colors for consistent visualization
public static final String SOCIALDEMOKRATERNA = "#ED1B34"; // S - Red
public static final String MODERATERNA = "#52BDEC"; // M - Blue
public static final String SVERIGEDEMOKRATERNA = "#DDDD00"; // SD - Yellow
public static final String CENTERPARTIET = "#009933"; // C - Green
public static final String VANSTERPARTIET = "#DA291C"; // V - Dark Red
public static final String KRISTDEMOKRATERNA = "#000077"; // KD - Dark Blue
public static final String LIBERALERNA = "#006AB3"; // L - Light Blue
public static final String MILJOPARTIET = "#83CF39"; // MP - Light Green
private SwedishPartyColors() {}
}// Annotate significant events on time series
private void addAnnotations(Configuration conf, List<PoliticalEvent> events) {
PlotBand[] bands = events.stream()
.filter(e -> e.getSignificance() > 0.7)
.map(e -> {
PlotBand band = new PlotBand();
band.setFrom(e.getStartDate().toEpochMilli());
band.setTo(e.getEndDate().toEpochMilli());
band.setColor(new SolidColor(255, 200, 200, 0.3));
band.setLabel(new Label(e.getDescription()));
return band;
})
.toArray(PlotBand[]::new);
conf.getxAxis().setPlotBands(bands);
}private DataSeries calculateMovingAverage(List<DataPoint> data, int window) {
DataSeries maSeries = new DataSeries("Moving Avg (" + window + "d)");
maSeries.setPlotOptions(new PlotOptionsLine());
for (int i = window - 1; i < data.size(); i++) {
double sum = 0;
for (int j = i - window + 1; j <= i; j++) {
sum += data.get(j).getValue();
}
maSeries.add(new DataSeriesItem(
data.get(i).getTimestamp(), sum / window
));
}
return maSeries;
}chart.getElement().setAttribute("aria-label",
"Line chart showing voting participation trend for " + politicianName);
chart.getElement().setAttribute("role", "img");© Hack23, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Just SKILL.md in .github/skills/advanced-data-visualization of Hack23/cia.
Open the folder on GitHubat commit 6a9797b
Advanced Data 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 |
|---|---|---|---|---|---|---|
| Advanced Data Visualization this skillHack23/cia | 239 | — | ~1.5k | Automated safety check: Pass | Apache-2.0 | |
| D3js Visualizationaiskillstore/marketplace | 430 | — | ~2.9k | Automated safety check: Pass | None | |
| 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 |
aiskillstore/marketplace
Professional data visualization creation using D3.js with support for interactive charts, custom visualizations, animations, and responsive design.
calesthio/OpenMontage
Creating interactive data visualisations using d3.js. An agent skill from calesthio/OpenMontage.
zebbern/claude-code-guide
Generate publication-quality PNG chart images from data, supporting line, bar, area, candlestick, pie, and heatmap charts.
aref-vc/tufte-claude-skill
Apply Edward Tufte's principles to any data visualization, chart, dashboard, or infographic.
caylent/tufte-data-viz
A skill your agent uses when creating, reviewing, or styling charts, graphs, dashboards, sparklines, or any data visualization.
adithya-s-k/FineEnvs
Create self-contained D3 HTML embed charts for the research article template.
Hack23/cia
WCAG 2.1 AA compliance, ARIA attributes, keyboard navigation, screen reader optimization for accessible political data platforms
Hack23/cia
AI governance, EU AI Act compliance, OWASP LLM security, responsible AI practices for GitHub Copilot agents
Hack23/cia
External API integration patterns, retry logic, circuit breakers, caching, rate limiting for government data APIs
Hack23/cia
AWS CloudWatch metrics, alarms, dashboards, log insights, and application monitoring for the CIA platform
Hack23/cia
AWS security best practices, VPC security, IAM, KMS, CloudTrail, GuardDuty for CIA platform deployment
Hack23/cia
Business continuity and disaster recovery: 30-day retention, quarterly restore tests, RTO/RPO targets per ISO 27001 A.17
Works with
Categories
Advanced chart types, D3.js/Vaadin Charts patterns, political data visualization, time series analysis. Advanced Data Visualization is an agent skill from Hack23/cia.
Advanced Data Visualization fits situations like: tasks that involve Data visualization; tasks that involve Forecasting and time series.
Run `npx skills add Hack23/cia --skill advanced-data-visualization -a claude-code`. Or copy the skill folder (.github/skills/advanced-data-visualization in Hack23/cia) into .claude/skills/advanced-data-visualization in your project. Claude Code loads it when a task matches its description.
Run `npx skills add Hack23/cia --skill advanced-data-visualization -a codex`. Or copy the skill folder (.github/skills/advanced-data-visualization in Hack23/cia) into .agents/skills/advanced-data-visualization in your project. Codex loads it when a task matches its description.
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add Hack23/cia --skill advanced-data-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/advanced-data-visualization, .gemini/skills/advanced-data-visualization, .github/skills/advanced-data-visualization and .opencode/skills/advanced-data-visualization in your project.
SKILL.md names no scripts, command-line tools or credentials: Advanced Data Visualization is instructions for the agent only.
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
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. Review the folder before installing.
Advanced Data Visualization is published under the Apache-2.0 licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.
About 1.5k tokens (SKILL.md is roughly 6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
Skills that share tags, products or a category with Advanced Data Visualization: D3js Visualization (aiskillstore/marketplace, 430 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.
Hack23 (a GitHub organization) maintains it in Hack23/cia, which has 239 GitHub stars. The repository holds 78 skills in this directory. The repository was last updated on October 6, 2026.
Source: Hack23/cia on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.