d3-viz
Custom, interactive data visualisations with fine-grained control over visual elements, transitions, and interactions.
- Covers core d3 patterns including scales, axes, data binding, and transitions across bar charts, line charts, scatter plots, chord diagrams, heatmaps, force-directed networks, and more
- Two integration approaches: direct DOM manipulation for complex interactive visualisations, or declarative rendering via your framework (React, Vue, Svelte, vanilla JS)
- Includes responsive sizing strategies using ResizeObserver or window resize listeners, plus interactivity patterns for tooltips, zoom/pan, click handlers, and staggered animations
- Best practices for data preparation, performance optimisation with large datasets, accessibility, and styling consistency
D3.js Visualisation
Overview
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.
When to use d3.js
Use d3.js for:
- Custom visualisations requiring unique visual encodings or layouts
- Interactive explorations with complex pan, zoom, or brush behaviours
- Network/graph visualisations (force-directed layouts, tree diagrams, hierarchies, chord diagrams)
- Geographic visualisations with custom projections
- Visualisations requiring smooth, choreographed transitions
- Publication-quality graphics with fine-grained styling control
- Novel chart types not available in standard libraries
Consider alternatives for:
- 3D visualisations - use Three.js instead
More from sickn33/antigravity-awesome-skills
docker-expert
You are an advanced Docker containerization expert with comprehensive, practical knowledge of container optimization, security hardening, multi-stage builds, orchestration patterns, and production deployment strategies based on current industry best practices.
15.0Knodejs-best-practices
Node.js development principles and decision-making. Framework selection, async patterns, security, and architecture. Teaches thinking, not copying.
11.2Ktypescript-expert
TypeScript and JavaScript expert with deep knowledge of type-level programming, performance optimization, monorepo management, migration strategies, and modern tooling.
8.3Kapi-security-best-practices
Implement secure API design patterns including authentication, authorization, input validation, rate limiting, and protection against common API vulnerabilities
7.0Kclean-code
This skill embodies the principles of \"Clean Code\" by Robert C. Martin (Uncle Bob). Use it to transform \"code that works\" into \"code that is clean.\"
6.6Knextjs-best-practices
Next.js App Router principles. Server Components, data fetching, routing patterns.
5.2K