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
Используйте при создании пользовательских интерактивных визуализаций данных с помощью D3.js — построении гистограмм, линейных или точечных диаграмм с нуля, создании сетевых диаграмм или географических карт, привязке изменяющихся данных к визуальным элементам, добавлении взаимодействий масштабирования/панорамирования/кисти, анимации переходов диаграмм или когда библиотеки диаграмм (Highcharts, Chart.js) не поддерживают ваш конкретный дизайн визуализации и вам необходим низкоуровневый контроль над манипулированием DOM, масштабами, формами и макетами на основе данных. Источник: lyndonkl/claude.