d3-color-legend
From the author
Add a categorical color legend to a D3 chart using colored rectangles or circles with text labels, supporting both SVG-inline and HTML overlay styles.
Install
npx skills add cxcscmu/SkillLearnBench --skill d3-color-legend -a claude-code
Installs to .claude/skills/d3-color-legend/ · Each command fetches the skill straight from GitHub with the open skills CLI.
Download .zip
Byte-identical to the scanned commit, with the repository’s licence and a SOURCE.txt.
Want your agent to suggest skills while you type? See how to use skills from your IDE.
Safety checks on SKILL.md
No warnings.
Why 83
Security100
Provenance64
Maintenance100
Licence100
Adoption34
aiqbench computes the trust score from public signals. It is not a security audit, so read a skill before you install it.
Similar skills
Closest to this one by what they do and when they are used.
- d3-bubble-chartcxcscmu/SkillLearnBenchHow to build a D3.js v6 force-directed bubble chart with sector clustering, size encoding, color legends, tooltips, and interactive selection. Use this skill whenever the user wants a bubble chart, force simulation, cluster layout, or interactive SVG circles with D3.Other★ 91
- d3-interactive-tablecxcscmu/SkillLearnBenchBuild a sortable, highlightable HTML data table linked to a D3 chart so clicking a chart element highlights the matching table row and vice versa.Other★ 91
- d3-interactive-chartscxcscmu/SkillLearnBenchD3.js techniques for tooltips, hover effects, click handlers, and cross-filtering between visualizationsOther★ 91
- d3-fundamentalscxcscmu/SkillLearnBenchEssential D3.js v6 concepts including selections, scales, SVG basics, and data binding for building interactive visualizationsOther★ 91
- blog-chartAgriciDaniel/claude-blogGenerate dark-mode-compatible inline SVG data visualization charts for blog posts. Supports horizontal bar, grouped bar, donut, line, lollipop, area, and radar charts with automatic platform detection (HTML vs JSX/MDX). Enforces chart type diversity, accessible markup (role=img, aria-labelledby), source attribution, and transparent backgrounds. Use whenever the user mentions data visualization, charts, graphs, comparison tables that need to be visualized, or wants to embed inline SVG visualizations in a blog post, even if not invoking blog-write. Use when user says "blog chart", "generate chart", "data visualization", "svg chart", "blog graph", "visualize data", or when the blog-write workflow identifies chart-worthy data points (3+ comparable metrics, trends, before/after data).Writing★ 2.5K
- d3-force-bubblecxcscmu/SkillLearnBenchGuide for creating clustered bubble charts using D3.js force simulations (v6+), including collision and categorization.Other★ 91
Ratings & reviews
—
no reviews
Tried this skill? Rate it to help others. Sign in
Discussion
Join the discussion. Sign in