d3-visualization
Twórz interaktywne wizualizacje danych z pełną kontrolą — D3.js dla zaawansowanych wykresów
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Skill do tworzenia niestandardowych, interaktywnych wizualizacji danych w D3.js. Użyj go, gdy biblioteki takie jak Chart.js czy Highcharts nie spełniają Twoich potrzeb — buduj wykresy słupkowe, liniowe, punktowe, diagramy sieciowe, mapy geograficzne, dodawaj interakcje zoom/pan/brush i animacje przejść. D3 daje Ci pełną kontrolę nad manipulacją DOM, skalami, kształtami i algorytmami layoutu dla danych o dowolnej strukturze.
Jak używać
Zainstaluj skill w swoim środowisku Claude/Copilot, wskazując repozytorium https://github.com/lyndonkl/claude/tree/main/skills/d3-visualization jako źródło.
Zanim zaczniesz, upewnij się, że znasz podstawy JavaScript, SVG i CSS — D3 wymaga tych umiejętności. Przeczytaj sekcję "Core Concepts" w dokumentacji, aby zrozumieć data joins, scales i selections.
Wybierz ścieżkę pracy z menu Path Selection Menu: dla prostych wykresów użyj "Create Basic Chart Workflow", dla złożonych layoutów (sieci, hierarchie) wybierz "Create Advanced Layout Workflow".
Podczas tworzenia wykresu podążaj za workflow: zdefiniuj dane, utwórz SVG container, ustaw skale (scales), powiąż dane do elementów DOM (data joins), dodaj osie i etykiety, następnie interakcje (zoom, pan, brush).
Jeśli chcesz zaktualizować wizualizację nowymi danymi, użyj workflow "Update Visualization with New Data" — skill pokaże, jak rebindować dane i animować przejścia między stanami.
Skonsultuj Quick Reference w dokumentacji, aby szybko znaleźć wzorce dla konkretnych zadań (np. tworzenie network diagram, geographic map, animacje przejść).