d3-viz
Creating interactive data visualisations using d3.js. This skill should be used when creating custom charts, graphs, network diagrams, geographic visualisations, or any complex SVG-based data visualisation that requires fine-grained control over visual elements, transitions, or
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
Creating interactive data visualisations using d3.js. This skill should be used when creating custom charts, graphs, network diagrams, geographic visualisations, or any complex SVG-based data visualisation that requires fine-grained control over visual elements, transitions, or interactions. Use this for bespoke visualisations beyond standard charting libraries, whether in React, Vue, Svelte, vanilla JavaScript, or any other environment.
How to use
- Załaduj d3.js do swojego projektu, importując bibliotekę na początku skryptu za pomocą
import * as d3 from 'd3'lub dodając CDN wersję 7.x poprzez tag script w HTML. - Wybierz wzorzec integracji — bezpośrednia manipulacja DOM (rekomendowana dla większości przypadków) lub integracja z frameworkiem takim jak React czy Vue, jeśli chcesz reaktywność.
- Przygotuj dane, które chcesz wizualizować — d3.js wiąże dane z elementami DOM i stosuje transformacje oparte na danych.
- Zdefiniuj skale (scales) do mapowania wartości danych na wymiary wizualne, takie jak pozycja, rozmiar czy kolor.
- Utwórz elementy SVG za pomocą d3 selections i zastosuj atrybuty oparte na danych — d3 obsługuje płynne przejścia i animacje między stanami.
- Dodaj interakcje, takie jak pan, zoom lub brush, aby umożliwić użytkownikom eksplorowanie wizualizacji — d3 zapewnia wbudowane moduły do obsługi tych zachowań.