Agent skill

Advanced Data Visualization

by Hack23 in Hack23/cia

Advanced chart types, D3.js/Vaadin Charts patterns, political data visualization, time series analysis

Apache-2.0Auto-check passedData & Analytics

Install Advanced Data Visualization

skills CLI
$ npx skills add Hack23/cia --skill advanced-data-visualization -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install Hack23/cia advanced-data-visualization --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ 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-src

Use ~/.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/

Facts

Skill name
advanced-data-visualization
GitHub stars
239
Token cost
~1.5k tokens
SKILL.md length
318 words
Files
1
Skills in repo
78
Repo updated
First seen
Licence
Apache-2.0

At a glance

Advanced chart types, D3.js/Vaadin Charts patterns, political data visualization, time series analysis

  • Works in 5 steps: Color independence — never rely solely… → Text alternatives — provide data tables… → Sufficient contrast — minimum 4.5:1… → …
  • Tasks that involve Data visualization
  • SKILL.md covers Purpose, When to Use, Chart Selection Guide and Vaadin Charts Integration, plus 4 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

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.

When your agent uses it

  • Tasks that involve Data visualization
  • Tasks that involve Forecasting and time series

Example prompts

  • “/advanced-data-visualization”

Workflow steps

5 steps, taken from the first numbered list in SKILL.md.

  1. Color independence — never rely solely on color to convey meaning
  2. Text alternatives — provide data tables alongside charts
  3. Sufficient contrast — minimum 4.5:1 ratio for text, 3:1 for graphical elements
  4. Keyboard navigation — ensure chart interactions are keyboard-accessible
  5. Screen reader support — include ARIA labels and descriptions

What it can do on your machine

Read from SKILL.md and the folder at commit 6a9797b. 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

    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.

  • Network

    No URLs in SKILL.md.

    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

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.

Always · name and description, kept in context so the agent knows when to use it
~33
When it runs · the whole SKILL.md, loaded when a task matches
~1.5k

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); files beside SKILL.md are not scanned.

SKILL.md

The full file from Hack23/cia at commit 6a9797b, republished under its Apache-2.0 licence (© Hack23). 318 words, ~1,497 tokens.

Download SKILL.mdSave it as .claude/skills/advanced-data-visualization/SKILL.md (or your agent's skills folder).
name
advanced-data-visualization
description
Advanced chart types, D3.js/Vaadin Charts patterns, political data visualization, time series analysis
license
Apache-2.0

Advanced Data Visualization Skill

Purpose

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.

When to Use

  • ✅ Designing dashboards for politician performance metrics
  • ✅ Visualizing voting patterns and party alignment trends
  • ✅ Creating time series charts for legislative activity
  • ✅ Building network graphs for political relationships
  • ✅ Displaying financial data and risk assessments

Do NOT use for:

  • ❌ Basic form layouts (use vaadin-component-design skill)
  • ❌ Static report generation (use data-science-for-intelligence skill)

Chart Selection Guide

Political Data Chart Matrix
Data TypeRecommended ChartCIA Use Case
Party vote distributionStacked bar / DonutRiksdag vote breakdown
Voting trends over timeLine / Area chartPolitician attendance trends
Committee compositionTreemap / SunburstCommittee member distribution
Politician comparisonRadar / Parallel coordsMulti-metric comparison
Geographic dataChoropleth mapRegional election results
RelationshipsForce-directed graphPolitical network analysis
Financial flowsSankey diagramGovernment budget allocation
Risk assessmentHeatmap / GaugePolitician risk scoring

Vaadin Charts Integration

Basic Chart Component
java
@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;
    }
}
Party Color Scheme
java
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() {}
}

Time Series Analysis Visualization

Trend Detection Patterns
java
// 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);
}
Moving Average Overlay
java
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;
}

Accessibility Requirements

WCAG 2.1 AA Compliance for Charts
  1. Color independence — never rely solely on color to convey meaning
  2. Text alternatives — provide data tables alongside charts
  3. Sufficient contrast — minimum 4.5:1 ratio for text, 3:1 for graphical elements
  4. Keyboard navigation — ensure chart interactions are keyboard-accessible
  5. Screen reader support — include ARIA labels and descriptions
java
chart.getElement().setAttribute("aria-label",
    "Line chart showing voting participation trend for " + politicianName);
chart.getElement().setAttribute("role", "img");

Dashboard Layout Principles

  1. Most important data first — place key metrics at top-left
  2. Progressive disclosure — summary → detail on interaction
  3. Consistent time ranges — align all time series to the same period
  4. Responsive design — charts should resize for mobile viewing
  5. Performance — lazy-load charts below the fold, limit data points to 1000

Security Considerations

  • Sanitize labels — escape HTML in chart labels from user/API data
  • Data aggregation — anonymize individual-level data where required by GDPR
  • Rate limit exports — prevent bulk data extraction via chart export features

© 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

Files

Just SKILL.md in .github/skills/advanced-data-visualization of Hack23/cia.

Open the folder on GitHubat commit 6a9797b

Compare with similar skills

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.

Advanced Data Visualization compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Advanced Data Visualization this skillHack23/cia239—~1.5kAutomated safety check: PassApache-2.0
D3js Visualizationaiskillstore/marketplace430—~2.9kAutomated safety check: PassNone
D3 Vizcalesthio/OpenMontage65k3 repos~5.4kAutomated safety check: PassAGPL-3.0
Chart Imagezebbern/claude-code-guide4.6k—~2.7kAutomated safety check: PassMIT
Tuftearef-vc/tufte-claude-skill306—~1.3kAutomated safety check: PassMIT
Tufte Data Vizcaylent/tufte-data-viz222—~3.5kAutomated safety check: PassMIT

Similar skills

  • D3js Visualization

    aiskillstore/marketplace

    Professional data visualization creation using D3.js with support for interactive charts, custom visualizations, animations, and responsive design.

    430 GitHub stars~2.9k tokensUpdated today
    Data & AnalyticsAuto-check passed
  • D3 Viz

    calesthio/OpenMontage

    Creating interactive data visualisations using d3.js. An agent skill from calesthio/OpenMontage.

    65k GitHub starsUsed in 3 repos~5.4k tokens
    Data & AnalyticsAuto-check passed
  • Chart Image

    zebbern/claude-code-guide

    Generate publication-quality PNG chart images from data, supporting line, bar, area, candlestick, pie, and heatmap charts.

    4.6k GitHub stars~2.7k tokensUpdated today
    Data & AnalyticsAuto-check passed
  • Tufte

    aref-vc/tufte-claude-skill

    Apply Edward Tufte's principles to any data visualization, chart, dashboard, or infographic.

    306 GitHub stars~1.3k tokensUpdated 3 mo ago
    Data & AnalyticsAuto-check passed
  • 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.

    222 GitHub stars~3.5k tokensUpdated 7 mo ago
    Data & AnalyticsAuto-check passed
  • Create HTML Embed

    adithya-s-k/FineEnvs

    Create self-contained D3 HTML embed charts for the research article template.

    421 GitHub stars~1.1k tokensUpdated yesterday
    Data & AnalyticsAuto-check passed

More from Hack23/cia

All 78 skills in this repo
  • WCAG 2.1 AA compliance, ARIA attributes, keyboard navigation, screen reader optimization for accessible political data platforms

    239 GitHub stars~2.7k tokensUpdated today
    Auto-check passed
  • AI Governance

    Hack23/cia

    AI governance, EU AI Act compliance, OWASP LLM security, responsible AI practices for GitHub Copilot agents

    239 GitHub stars~1.4k tokensUpdated today
    Auto-check passed
  • API Integration

    Hack23/cia

    External API integration patterns, retry logic, circuit breakers, caching, rate limiting for government data APIs

    239 GitHub stars~1.9k tokensUpdated today
    Auto-check passed
  • AWS CloudWatch metrics, alarms, dashboards, log insights, and application monitoring for the CIA platform

    239 GitHub stars~1.9k tokensUpdated today
    Auto-check passed
  • AWS security best practices, VPC security, IAM, KMS, CloudTrail, GuardDuty for CIA platform deployment

    239 GitHub stars~2.3k tokensUpdated today
    Auto-check passed
  • Business continuity and disaster recovery: 30-day retention, quarterly restore tests, RTO/RPO targets per ISO 27001 A.17

    239 GitHub stars~4.7k tokensUpdated today
    Auto-check passed

Works with

Questions about Advanced Data Visualization

What does Advanced Data Visualization do?

Advanced chart types, D3.js/Vaadin Charts patterns, political data visualization, time series analysis. Advanced Data Visualization is an agent skill from Hack23/cia.

When should I use Advanced Data Visualization?

Advanced Data Visualization fits situations like: tasks that involve Data visualization; tasks that involve Forecasting and time series.

How do I install Advanced Data Visualization in Claude Code?

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.

How do I install Advanced Data Visualization in Codex?

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.

Can I use Advanced Data 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 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.

What does Advanced Data Visualization need to run?

SKILL.md names no scripts, command-line tools or credentials: Advanced Data Visualization is instructions for the agent only.

Does Advanced Data Visualization access the network?

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.

Is Advanced Data 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. Review the folder before installing.

What licence does Advanced Data Visualization use?

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.

How many tokens does Advanced Data Visualization use?

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.

What are the alternatives to Advanced Data Visualization?

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.

Who maintains Advanced Data Visualization?

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.