d3-visualization
Use when creating custom, interactive data visualizations with D3.js—building bar/line/scatter charts from scratch, creating network diagrams or geographic maps, binding changing data to visual elements, adding zoom/pan/brush interactions, animating chart transitions, or when
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
Use when creating custom, interactive data visualizations with D3.js—building bar/line/scatter charts from scratch, creating network diagrams or geographic maps, binding changing data to visual elements, adding zoom/pan/brush interactions, animating chart transitions, or when chart libraries (Highcharts, Chart.js) don't support your specific visualization design and you need low-level control over data-driven DOM manipulation, scales, shapes, and layouts.
How to use
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ść).