Orqestria Download
← Back to the catalog

Skill · Version 1.0.0

Custom D3 visualizations

Builds tailored visual explanations with D3 geometry and clear rendering ownership inside an existing frontend.

d3-custom-visualization

See how it helps

When is it useful?

Use when ordinary chart types cannot express relationships, flows or custom linked interactions.

What does it help you do?

  • Separates data-to-coordinate calculations from framework-managed visual elements.
  • Handles empty containers, constant domains and other scale edge cases.
  • Isolates imperative interactions and cleans up simulations or listeners.

Try asking this

Create a responsive flow diagram for customer journeys with linked selection and stable rendering for empty or identical-value datasets. Remove every journey, then load equal-valued flows and resize the container. The diagram should remain valid and preserve the selected journey identity.

Detailed documentation

Read the skill’s original instructions, examples and checks in their authored language.

Details…Show less

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)

  1. 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?

Included files 1

  • SKILL.md

About this skill package

d3-custom-visualization

d3-custom-visualization: Turn data into readable, interactive charts and dashboards with correct metrics, accessible views and usable large datasets.

Details…Show less

d3-custom-visualization

d3-custom-visualization: Turn data into readable, interactive charts and dashboards with correct metrics, accessible views and usable large datasets.

Includes the complete skill and its supporting files (1 files). The exact authored scope is preserved below.

Original skill description (source language)

Use when building bespoke visualizations with D3 scales, layouts, shapes, brushes, and zoom while integrating cleanly with modern frontend framework component lifecycles.

Install the skill, review its source and trust settings, then enable it for the relevant project or agent.

Requirements

  • Orqestria installed on your computer.