Menu

Layer Cake

Layer Cake is a graphics framework built on top of Svelte. It measures your target div and your data and creates scales that stay synced on layout changes. Use these scales to organize multiple, mostly-reusable Svelte components, whether they be SVG, HTML, Canvas or WebGL. Since they all share the same coordinate space, you can build your graphic one layer at a time.

Read the guide or try the starter template that comes with example components. See the examples below and even edit them live. Here's a sample of what the code looks like:

<script>
  import { LayerCake, Svg, Html, Canvas } from 'layercake';

  import AxisX from './components/AxisX.svelte';
  import AxisY from './components/AxisY.svelte';
  import Line from './components/Line.svelte';
  import Scatter from './components/Scatter.svelte';
  import Labels from './components/Labels.svelte';

  const data = [{ x: 0, y: 1 }, { x: 1, y: 2 }];
</script>

<style>
  .chart-container {
    width: 100%;
    height: 500px;
  }
</style>

<div class="chart-container">
  <LayerCake
    x='x'
    y='y'
    {data}
  >
    <Svg>
      <AxisX/>
      <AxisY/>
      <Line color='#f0c'/>
    </Svg>

    <Canvas>
      <Scatter color='#0fc'/>
    </Canvas>

    <Html>
      <Labels/>
    </Html>
  </LayerCake>
</div>