d3-visualization

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.