Data pipeline visualization pattern
Skill kjuhwa/skills-hub/skills/design/data-pipeline-visualization-pattern
Self-correcting knowledge corpus for Claude Code — 9 stable shape clusters, bias-correction pipeline baked into contribution flow. 47 papers, 45 techniques, 1.1k skills.
npx -y skills add kjuhwa/skills-hub --skill data-pipeline-visualization-patternAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
What its author says it does
Copied from the file, not written here
Visual patterns for rendering multi-stage data pipelines with flow direction, stage health, and throughput indicators
SKILL.md
1.9 KB, as published. Nobody here has run it
data-pipeline-visualization-pattern
Data pipeline visualizations benefit from a left-to-right (or top-to-bottom) directed acyclic graph layout where each node represents a processing stage (extract, transform, load, enrich, sink) and edges carry animated particles or flowing gradients proportional to current throughput. Use a three-tier color encoding: saturated green/blue for healthy flow, amber for degraded (lag building, retries climbing), and red for broken/halted stages. Each stage node should expose at-a-glance metrics — records/sec in, records/sec out, lag, error rate — as a compact badge or sparkline embedded in the node, with the full metric panel revealed on hover or click.
For pipeline-flow-visualizer-style apps, animate edge particles at a speed mapped to throughput (faster particles = higher rate) and use particle density to show backpressure buildup between stages. For etl-job-scheduler layouts, overlay a Gantt-like timeline beneath the DAG so users can see both topology and temporal execution (job X started at 02:00, took 14 min, triggered job Y). For stream-throughput-monitor views, pair the DAG with a stacked area chart of throughput per stage over time so spikes and bottlenecks align visually with the stage that caused them.
Critical affordances: make stage boundaries the primary interaction target (not edges), since users diagnose at the stage level; show the "slowest stage" as a persistent badge so bottleneck identification is zero-click; and always render the pipeline in a single viewport without horizontal scroll at typical zoom — collapse or group stages into supernodes when the DAG exceeds ~12 nodes.