layercake_skill

Overview

This skill is an expert guide for Layer Cake, a headless Svelte visualization framework that centralizes scales, dimensions, and data flow while remaining rendering-agnostic. It explains how to wire up reactive stores, choose rendering contexts (SVG, Canvas, HTML, WebGL), and apply common data transforms so components only consume prepared scales. The content focuses on practical patterns, performance tips, and concrete examples for responsive, data-driven visuals.

How this skill works

Layer Cake establishes a root context that calculates D3 scales from data extents and responsive dimensions, then exposes those scales and dimension stores to child components via Svelte context. Rendering containers (Svg, Canvas, Html) share the same coordinate system so you can mix SVG axes, Canvas marks, and HTML tooltips. Utility transforms (stack, bin, groupLonger, flatten) prepare data before it enters Layer Cake, and custom D3 scales or domains can override defaults.

When to use it

• Building reusable Svelte visual components that should not manage transforms or coordinate math.
• Creating hybrid visualizations (SVG axes + Canvas-heavy marks + HTML tooltips).
• Rendering large datasets (thousands of points) where Canvas performance matters.
• Implementing responsive charts that recalculate scales on resize.
• Needing out-of-the-box access to common transforms: stacking, binning, pivoting.

Best practices

• Precompute expensive transforms (stack, bin) outside render loops and memoize results.
• Use Canvas for high-volume marks (>5k) and overlay SVG for axes/interaction.
• Pass custom D3 scale instances when you need non-linear or threshold behavior.
• Call scaleCanvas(ctx, width, height) once on setup to handle device pixel ratio.
• Avoid re-calculating extents on every frame—only when data or explicit domains change.

Example use cases

• Time series: LayerCake with scaleTime for x, SVG axes, and an SVG Line component for trends.
• Stacked area chart: preprocess with stack(), render each series using shared scales.
• High-volume scatter: Canvas layer renders 10k+ points while SVG provides interactive axes.
• Histogram: bin() to generate bins, then render bars in Svg or Canvas depending on volume.
• Dashboard with mixed rendering: Html tooltips and legends positioned using the same scales.