D3.js Visualization

Wzorce budowania wykresów D3.js: skale, łączenia danych, podpowiedzi, responsywne skalowanie, dostępność.

Autor: AutumnsGrove · AutumnsGrove/ClaudeSkills

Testowano · Działa ★ 8.4/10

D3.js Visualization — Wzorce budowania wykresów D3.js: skale, łączenia danych, podpowiedzi, responsywne skalowanie, dostępność.

Co robi ten skill

Dostarcza wzorce przepływu pracy D3.js do budowania interaktywnych, responsywnych wykresów i pulpitów nawigacyjnych — konwencje marginesów, konfiguracja skal/osi, podpowiedzi, przejścia, debounced resize i lista kontrolna dostępności. Uruchamia się na żądania niestandardowych wykresów D3, pulpitów nawigacyjnych, wykresów sieciowych lub wizualizacji geograficznych/szeregów czasowych; prawidłowo odsyła do Chart.js/matplotlib dla prostych lub statycznych żądań wykresów.

Raport z testu

Wykres wspomagany umiejętnością dodał debounced 250ms resize handler, responsywne skalowanie oparte na viewBox i listę kontrolną dostępności/palety dla daltonistów — szczegóły, które pominięto w swobodnej odpowiedzi D3; podstawy D3 są już solidne w linii bazowej, więc różnica jest realna, ale nie drastyczna.

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

Instalacja

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

Komendy i przykładowe prompty

  • /d3js-visualizationWzorce budowania wykresów D3.js: skale, łączenia danych, podpowiedzi, responsywne skalowanie, dostępność.

Skille uruchamiają się na zwykłe polecenia — bez komend do zapamiętania. Po instalacji aktywują go prompty takie jak te (po angielsku):

  • 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