d3-interactive-charts

d3-interactive-charts is a skill for Claude Code, Codex from cxcscmu/SkillLearnBench. It costs 28 tokens per session (1,450 once invoked), scanned A, original, MIT.

Guidance for adding user interaction to D3.js charts, including hover messages, visual highlighting, clicks, and linked filtering between charts. D3.js is a JavaScript library for building data-driven web visualisations.

In plain words
What is it for?
Use it to add tooltips, mouse-over effects, click handlers, and cross-filtering so selecting data in one visualisation affects another.
Why use it?
A static chart can make it difficult to inspect individual values or compare related data. These techniques show details when users interact with the chart and keep multiple charts in sync.

Skill for Claude CodeCodex

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods
npx agentmods add skills/cxcscmu/skilllearnbench/d3-interactive-charts
Any agent
npx skills add cxcscmu/SkillLearnBench --skill d3-interactive-charts
Clone the repo
git clone --depth 1 https://github.com/cxcscmu/SkillLearnBench

Made for: Claude Code, Codex.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for d3-interactive-charts

README.md
[![agentmods](https://agentmods.dev/badge/skills/cxcscmu/skilllearnbench/d3-interactive-charts.svg)](https://agentmods.dev/skills/cxcscmu/skilllearnbench/d3-interactive-charts)
Your own site
<a href="https://agentmods.dev/skills/cxcscmu/skilllearnbench/d3-interactive-charts"><img src="https://agentmods.dev/badge/skills/cxcscmu/skilllearnbench/d3-interactive-charts.svg" alt="Measured on agentmods" height="20"></a>
Per session 28 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 1,450 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5 $0.00028 $0.01450
Opus 5 $0.00014 $0.00725
Sonnet 5 $0.00006 $0.00290
Haiku 4.5 $0.00003 $0.00145

Measured 5d ago against content hash 9003b713e312, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

d3-interactive-charts scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 5d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

skills/b1-one-shot-claude-haiku-4-5/stock-data-visualization/d3-interactive-charts/SKILL.md · 233 lines

How it starts

The opening of the file, as written. The whole thing — 233 lines — stays where its author put it; the contents beside it link to each section on GitHub.

D3.js Interactive Charts

Overview

Making D3 charts interactive with tooltips, highlighting, and coordinated interactions between multiple charts.

1. Tooltips

HTML Tooltip (Best for Hover)

// Create tooltip div
const tooltip = d3.select("body")
  .append("div")
  .attr("class", "tooltip")
  .style("position", "absolute")
  .style("background", "rgba(0,0,0,0.8)")
  .style("color", "white")
  .style("padding", "8px 12px")
  .style("border-radius", "4px")
  .style("pointer-events", "none")
  .style("opacity", 0)
  .style("z-index", 1000);

// Add mouseover handlers
circles
  .on("mouseover", (event, d) => {
    tooltip
      .style("opacity", 1)
      .html(`<strong>${d.ticker}</strong><br/>${d.name}<br/>${d.sector}`)
      .style("left", event.pageX + 10 + "px")
      .style("top", event.pageY + 10 + "px");
  })
  .on("mousemove", (event) => {
    tooltip
      .style("left", event.pageX + 10 + "px")
      .style("top", event.pageY + 10 + "px");
  })
  .on("mouseout", () => {
    tooltip.style("opacity", 0);
  });

CSS Styling for Tooltip

.tooltip {
  position: absolute;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.85);
  color: white;
  border-radius: 4px;
  font-size: 12px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 1000;
  white-space: nowrap;
}

2. Hover Effects

Highlight on Hover

circles
  .on("mouseover", (event, d) => {
    // Highlight the hovered circle
    d3.select(event.currentTarget)
      .transition()
      .duration(200)
      .attr("opacity", 1)
      .attr("stroke", "black")
      .attr("stroke-width", 2);

    // Fade other circles
    circles.filter(nd => nd.id !== d.id)
      .transition()
      .duration(200)
      .attr("opacity", 0.3);
  })
  .on("mouseout", () => {
    // Restore all
    circles
      .transition()
      .duration(200)
      .attr("opacity", 1)
      .attr("stroke", "none");
  });

3. Click Handlers & Selection

Read the full file on GitHub · 233 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 5d ago First seen · 233 lines · 28 tokens per session scan A 9003b713e312

Subscribe to this mod's changes

d3-interactive-charts is a skill published in the GitHub repository cxcscmu/SkillLearnBench (82 stars, last pushed 1mo ago), licensed MIT. It adds 28 tokens to every session and 1,450 once invoked, about $0.0001 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Related

Other skills, from other repositories

ceo-setup

One-time onboarding for the executive/manager commitment workflow — delegation-heavy, meeting prep, decision capture, morning and evening digests. Creates a commitments project and installs two dashboard widgets. After successful setup this skill is excluded from selection until the marker file is deleted.

suyoumo/ClawProBench · 60 tokens

content-creator-setup

One-time onboarding for the content creator workflow — content pipeline stages, trend expiration, cross-platform cascades, heavy idea parking. After successful setup this skill is excluded from selection until the marker file is deleted.

suyoumo/ClawProBench · 47 tokens

idea-parking

Park interesting ideas for later consideration, resurface them periodically, and promote to commitments when ready.

suyoumo/ClawProBench · 23 tokens

agentsop-conventions-pinning

SOP for writing, loading, and evolving a project-level convention file (CONVENTIONS.md / CLAUDE.md / .cursor/rules / .clinerules / AGENTS.md) so that a coder-agent reliably respects your codebase's style choices every session. Tool-agnostic; covers the four load mechanics (read-only attachment, ancestor-walk…

agentsope/SkillAlchemy · 104 tokens

agentsop-llamaindex

Operating-system distillation of LlamaIndex — the leading RAG / document-agent framework. Activate when the calling agent must build, debug, harden, or evaluate a Retrieval-Augmented Generation pipeline over unstructured/private data, decide between RAG primitives (Index types, retrievers, query engines, routers…

agentsope/SkillAlchemy · 178 tokens

agentsop-llm-artifact-versioning

Enhancement overlay — version the WHOLE deployable LLM-app artifact as one bundle: prompts + compiled programs + model snapshot pins + retrieval config + eval-set version, versioned together so a deploy is reproducible and rollback is atomic. Activate when preparing to deploy an LLM app, when asking "what exactly is…

agentsope/SkillAlchemy · 223 tokens