Skill · Version 1.0.0

Individuelle D3-Visualisierungen

Erstellt maßgeschneiderte Datendarstellungen mit D3-Geometrie und klarer Rendering-Verantwortung im vorhandenen Frontend.

d3-custom-visualization

Entdecke, wie der Skill hilft

Wann ist der Skill hilfreich?

Nutze diesen Skill für Beziehungen, Flüsse oder gekoppelte Interaktionen jenseits üblicher Diagramme.

Wobei hilft er dir?

Trennt Koordinatenberechnung von frameworkgesteuerten Darstellungselementen.
Behandelt leere Container, konstante Wertebereiche und Skalenrandfälle.
Isoliert imperative Interaktionen und beendet Simulationen oder Listener.

Das könntest du fragen

Erstelle ein responsives Kundenflussdiagramm mit gekoppelter Auswahl und stabiler Darstellung leerer oder gleicher Werte. Entferne alle Wege, lade gleichwertige Flüsse und ändere die Containergröße. Das Diagramm bleibt gültig und erhält die Kennung des ausgewählten Weges.

Ausführliche Dokumentation

Hier findest du die ursprüngliche Anleitung, Beispiele und Prüfschritte des Skills in ihrer Originalsprache.

Details…Weniger anzeigen

D3 & Custom Visualization

Use this skill when standard chart types are insufficient and custom visual encodings (e.g., Sankey diagrams, hierarchical treemaps/sunbursts, chord/network graphs, horizon charts, beeswarm/force layouts, or custom linked brushes) are needed.

Clean Architecture: D3 for Math, Framework for DOM (or Scoped Hybrid)

Separate Pure Data-to-Geometry Math from Rendering (Bostock):
- Use modular D3 packages (d3-scale, d3-array, d3-shape, d3-hierarchy, d3-sankey, d3-geo, d3-time) as pure mathematical functions that transform domain data into screen coordinates, paths, and ticks.
- In React, Vue, or Angular, let the UI framework own the declarative SVG/HTML elements whenever mark counts are moderate—avoid having both D3 .enter().append() and React/Vue mutate the same DOM subtree simultaneously.
- Reserve imperative D3 DOM/Canvas bindings (d3-selection, d3-brush, d3-zoom, d3-force tick loops) for isolated <g ref={...}> or <canvas ref={...}> subtrees with strict cleanup on unmount.

Scales, Margins & Edge-Case Guards

Margin Convention & Bounded Inner Dimensions:
- Compute innerWidth = Math.max(0, width - margin.left - margin.right) and innerHeight = Math.max(0, height - margin.top - margin.bottom) so zero or initializing container sizes never produce negative SVG dimensions or NaN paths.
Degenerate Domain Protection:
- When all data values are identical (domainMin === domainMax), expand or pad the scale domain deterministically so linear/log scales do not collapse to a single pixel or divide by zero.
- Use .clamp(true) or explicit out-of-bounds indicators when external values can exceed fixed scale domains.
Avoid Misleading Curve Interpolations:
- Do not use curveBasis (which fails to pass through actual data points and shaves off peaks) or curveCardinal / curveCatmullRom (which can overshoot below zero on non-negative data). Use curveLinear, curveMonotoneX (which preserves monotonicity without false overshoots), or curveStepAfter for discrete state changes.

Checklist

Are D3 math modules (d3-scale, d3-shape, d3-array) used cleanly without conflicting with the UI framework's virtual DOM?
Do scales guard against empty arrays, min === max degenerate domains, and zero/negative container sizes?
Is curveMonotoneX, curveLinear, or curveStep* used instead of peak-clipping curveBasis or overshooting splines?
Are d3-zoom, d3-brush, and d3-force timers/listeners properly cleaned up on component unmount?

Enthaltene Dateien 1

SKILL.md