D3 Viz

Interaktivní d3.js grafy, mapy a síťové diagramy na míru.

od chrisvoncsefalvay · chrisvoncsefalvay/claude-d3js-skill

Otestováno · Funguje ★ 8.4/10

D3 Viz — Interaktivní d3.js grafy, mapy a síťové diagramy na míru.

Co umí

Pokyny a referenční vzory pro vytváření vlastních SVG vizualizací s d3.js — měřítka, osy, přechody, štětce, silové rozvržení a geografické projekce. Spouští se, když potřebujete jemnou kontrolu nad rámec standardní knihovny pro grafy, v React, Vue, Svelte nebo vanilla JS.

Testovací report

Úkol: seskupený sloupcový graf (příjmy podle čtvrtletí × 3 regiony), obě verze skutečně provedeny v node 24 s d3 7.9.0 + jsdom, výsledek měřen finálním SVG. Základní verze (bez skillu) vypočítala šířku sloupce ručně jako i*barWidth — 12 obdélníků, 0 chyb, ale mezera mezi sloupci ve skupině byla přesně 0px, sloupce se sloučily, paleta byla náhodná (steelblue/orange/green). Verze skillu používá vnořenou x1Scale s padding(0.05) z references/d3-patterns.md — stejných 12 obdélníků a 18 osových značek, ale naměřená mezera 2.59px a paleta d3.schemeCategory10. Nalezena skutečná omezení: vzor striktně nastavuje doménu [0, max], a pro zápornou hodnotu vyprodukoval neplatný SVG obdélník s výškou=-78.46 — skill nepokrývá záporné sloupce. Všech 6 souborů z references/ a assets/ je na místě a sample-data.json je platný (6 datasetů), ale SKILL.md pojmenovává šablony chart-template.js, zatímco na disku jsou .jsx. Stage 0 čisté: přečten celý SKILL.md (820 řádků) a 3 referenční soubory, žádná exfiltrace, skryté instrukce ani síťová volání.

Testováno: 2026-07-16 · Claude Code 2.x (agent harness)

Instalace

git clone https://github.com/chrisvoncsefalvay/claude-d3js-skill.git && mkdir -p ~/.claude/skills && cp -r claude-d3js-skill ~/.claude/skills/d3-viz

Příkazy a ukázkové prompty

  • /d3-vizInteraktivní d3.js grafy, mapy a síťové diagramy na míru.

Skilly se spouštějí běžnými požadavky — žádné příkazy k zapamatování. Po instalaci ho aktivují prompty jako tyto (anglicky):

  • Build a grouped bar chart in d3 comparing quarterly revenue by region
  • I need a force-directed network diagram with brushing in vanilla JS
  • Add a geographic projection map with d3 scales and smooth transitions