layercake
Layer Cake Skill
Layer Cake is a foundational visualization framework for Svelte that handles the mathematics of coordinate systems and scales while remaining completely agnostic about visual presentation.
Core Philosophy
Layer Cake follows a "bring your own components" approach. The framework establishes context through reactive Svelte stores, making D3 scales (linear, time, ordinal, log, threshold) and calculated dimensions available to child components via Svelte's context API. Developers build visualization components that consume these stores rather than managing transforms themselves.
Primary Components
LayerCake: The root wrapper establishing context, calculating scales from data extents, managing responsive dimensions, and providing stores for x/y/r scales to children.
Svg, Canvas, Html: Layout containers for different rendering contexts. All coexist in the same coordinate system, allowing hybrid rendering (SVG axes + Canvas marks + HTML tooltips).
Custom Components: Build components that consume stores (xScale$, yScale$, etc.) from context and render visual elements.