d3-visualization

SKILL.md

This skill helps you create custom, interactive data visualizations using D3.js (Data-Driven Documents). D3 provides low-level building blocks for data-driven DOM manipulation, visual encoding, layout algorithms, and interactions—enabling bespoke visualizations that chart libraries can't provide.

Data Joins: Bind arrays to DOM elements, creating one-to-one correspondence Scales: Transform data values → visual values (pixels, colors, sizes) Shapes: Generate SVG paths for lines, areas, arcs from data Layouts: Calculate positions for complex visualizations (networks, trees, maps) Transitions: Animate smooth changes between states

Use when: Building bar, line, or scatter charts from scratch

Verwenden Sie diese Option, wenn Sie benutzerdefinierte, interaktive Datenvisualisierungen mit D3.js erstellen – Balken-/Linien-/Punktdiagramme von Grund auf erstellen, Netzwerkdiagramme oder geografische Karten erstellen, sich ändernde Daten an visuelle Elemente binden, Zoom-/Schwenk-/Pinselinteraktionen hinzufügen, Diagrammübergänge animieren oder wenn Diagrammbibliotheken (Highcharts, Chart.js) Ihr spezifisches Visualisierungsdesign nicht unterstützen und Sie eine einfache Kontrolle über datengesteuerte DOM-Manipulation, Skalen, Formen und Layouts benötigen. Quelle: lyndonkl/claude.

Original anzeigen