D3.js Visualization

D3.js grafiekbouwpatronen: scales, data joins, tooltips, responsive resize, toegankelijkheid.

Door AutumnsGrove · AutumnsGrove/ClaudeSkills

Getest · Werkt ★ 8.4/10

D3.js Visualization — D3.js grafiekbouwpatronen: scales, data joins, tooltips, responsive resize, toegankelijkheid.

Wat het doet

Biedt D3.js workflowpatronen voor het bouwen van interactieve, responsieve grafieken en dashboards – margeconventies, schaal-/asinstellingen, tooltips, overgangen, gedebounceerde resize en een toegankelijkheidschecklist. Activeert bij verzoeken om aangepaste D3-grafieken, dashboards, netwerkgrafieken of geografische/tijdreeksvisualisaties; verwijst correct naar Chart.js/matplotlib voor eenvoudige of statische grafiekverzoeken.

Testrapport

Skill-geleide grafiek voegde een gedebounceerde 250ms resize handler toe, viewBox-gebaseerde responsieve schaling, en een toegankelijkheids-/kleurenblind-palet checklist – details die een vrije D3-antwoord oversloeg; D3-basisprincipes zijn al solide in de baseline, dus het verschil is reëel maar niet dag en nacht.

Getest op: 2026-07-14 · Claude Code 2.x (agent harness)

Installatie

git clone https://github.com/AutumnsGrove/ClaudeSkills
cd ClaudeSkills
mkdir -p ~/.claude/skills
cp -r d3js-visualization ~/.claude/skills/d3js-visualization

Commando's en voorbeeldprompts

  • /d3js-visualizationD3.js grafiekbouwpatronen: scales, data joins, tooltips, responsive resize, toegankelijkheid.

Skills reageren op gewone verzoeken — geen commando's om te onthouden. Na installatie activeren prompts zoals deze de skill (in het Engels):

  • Build a responsive D3 bar chart with hover tooltips
  • Add window-resize handling to my D3 line chart
  • Make this D3 dashboard accessible for colorblind users