d3-viz

This skill provides guidance for creating sophisticated, interactive data visualisations using d3.js. D3.js (Data-Driven Documents) excels at binding data to DOM elements and applying data-driven transformations to create custom, publication-quality visualisations with precise control over every visual element. The techniques work across any JavaScript environment, including vanilla JavaScript, React, Vue, Svelte, and other frameworks. Use d3.js for: Consider alternatives for: Import d3 at the top of your script: Or use the CDN version (7.x): All modules (scales, axes, shapes, transitions, etc.) are accessible through the d3 namespace. Pattern A: Direct DOM manipulation (recommended for most cases) Use d3 to select DOM elements and manipulate them imperatively. This works in any JavaScript environment: Pattern B: Declarative rendering (for frameworks with templating) Use d3 for data calculations (scales, layouts) but render elements via your framework: Use Pattern A for complex visualisations with transitions, interactions, or when leveraging d3's full capabilities. Use Pattern B for simpler visualisations or when your framework prefers declarative rendering. Follow this standard structure in your drawing function: Make visualisations responsive to container size: Or use ResizeObserver for more direct container monitoring: A chord diagram shows relationships between entities...