layercake

What problem does it solve?

This Skill provides an expert guide to Layer Cake, a headless Svelte visualization framework that manages the complex mathematics of coordinate systems, scales, and dimensions, allowing you to build responsive data visualizations without being constrained by opinionated visual components.

Core Features & Use Cases

• Headless Visualization Core: Handles scales (D3 linear, time, ordinal), dimensions, and data flow, making them available via Svelte's context API.
• Multi-Context Rendering: Supports SVG for interactivity, Canvas for high-volume data, and HTML for overlays, all within the same coordinate system.
• Data Transformation Utilities: Includes functions like stack(), bin(), groupLonger(), and calcExtents() to prepare your data for various chart types.
• Responsive Design: Automatically adjusts scales and layouts as container dimensions change, ensuring your visualizations look great on any screen.
• Use Case: Create a custom time series chart that displays 10,000+ data points using Canvas for performance, while overlaying interactive SVG axes and HTML tooltips for a rich user experience.

Quick Start

Use the layercake skill to set up a basic Layer Cake chart with X and Y scales for my data, using x="date" and y="value".