D3 Viz
Skill Verifiziert AktivCreating interactive data visualisations using d3.js. This skill should be used when creating custom charts, graphs, network diagrams, geographic visualisations, or any complex SVG-based data visualisation that requires fine-grained control over visual elements, transitions, or interactions. Use this for bespoke visualisations beyond standard charting libraries, whether in React, Vue, Svelte, vanilla JavaScript, or any other environment.
To empower developers to create sophisticated, custom, and interactive data visualisations using d3.js by providing clear code patterns, best practices, and detailed explanations.
Funktionen
- Interactive data visualisation with d3.js
- Examples for custom charts, graphs, and diagrams
- Guidance on transitions, interactions, and responsiveness
- Code patterns for various chart types (bar, line, scatter, network, geo)
- Best practices for data preparation, performance, and accessibility
Anwendungsfälle
- Creating bespoke visualisations beyond standard charting libraries
- Implementing complex SVG-based data visualisations
- Adding fine-grained control over visual elements, transitions, or interactions
- Developing visualisations for React, Vue, Svelte, or vanilla JavaScript projects
Nicht-Ziele
- Creating 3D visualisations (recommend Three.js)
- Providing general-purpose JavaScript utility functions
- Handling backend data processing or API integrations
Installation
npx skills add davila7/claude-code-templatesFührt das Vercel skills CLI (skills.sh) via npx aus — benötigt Node.js lokal und mindestens einen installierten skills-kompatiblen Agent (Claude Code, Cursor, Codex, …). Setzt voraus, dass das Repo dem agentskills.io-Format folgt.
Qualitätspunktzahl
VerifiziertVertrauenssignale
Ähnliche Erweiterungen
D3 Viz
90Erstellung interaktiver Datenvisualisierungen mit d3.js. Diese Fähigkeit sollte verwendet werden, wenn benutzerdefinierte Diagramme, Graphen, Netzwerkdiagramme, geografische Visualisierungen oder komplexe SVG-basierte Datenvisualisierungen erstellt werden, die eine präzise Steuerung von visuellen Elementen, Übergängen oder Interaktionen erfordern. Verwenden Sie dies für maßgeschneiderte Visualisierungen, die über Standard-Charting-Bibliotheken hinausgehen, sei es in React, Vue, Svelte, reinem JavaScript oder jeder anderen Umgebung.
Layout Audit
100Layout and spacing audit covering grid, spacing consistency, density, responsive behavior
Data Visualizer
99Create marketing visualizations from data. Use when: creating charts for reports; visualizing campaign performance; generating dashboards; presenting data insights; exporting charts for presentations
React Modernization
99Upgrade React applications to latest versions, migrate from class components to hooks, and adopt concurrent features. Use when modernizing React codebases, migrating to React Hooks, or upgrading to latest React versions.
Data Visualization
97Data visualization with chart selection, color theory, and annotation best practices. Covers chart types (bar, line, scatter, heatmap), axes rules, and storytelling with data. Use for: charts, graphs, dashboards, reports, presentations, infographics, data stories. Triggers: data visualization, chart, graph, data chart, bar chart, line chart, scatter plot, data viz, visualization, dashboard chart, infographic data, data presentation, chart design, plot, heatmap, pie chart alternative
Measure Dashboard Requirements
100Specifies requirements for an analytics dashboard including metrics, visualizations, filters, and data sources. Use when requesting dashboards from data teams, defining KPI tracking, or documenting reporting needs.