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

À utiliser lors de la création de visualisations de données personnalisées et interactives avec D3.js : création de graphiques à barres/lignes/nuages ​​de points à partir de zéro, création de diagrammes de réseau ou de cartes géographiques, liaison de données changeantes à des éléments visuels, ajout d'interactions zoom/panoramique/pinceau, animation de transitions de graphiques ou lorsque les bibliothèques de graphiques (Highcharts, Chart.js) ne prennent pas en charge votre conception de visualisation spécifique et que vous avez besoin d'un contrôle de bas niveau sur la manipulation, les échelles, les formes et les mises en page du DOM basées sur les données. Source : lyndonkl/claude.

Voir l'original