Menu

Small multiples (animated domain transition)Edit

An example of how to do small multiples with the same rendering component. Because we want to calculate and store the extents for each series, we have to put the Layer Cake component in a wrapper component, called ChartWrapper.svelte below.

  • +page.svelte
  • ./_components/SmallMultipleWrapper.svelte
  • ./_data/pointSeries.js
  • ./_components/Line.svelte
<script>
  import { calcExtents, flatten } from 'layercake';

  import SmallMultipleWrapper from './_components/SmallMultipleWrapper.svelte';

  import dataSeries from './_data/pointSeries.js';

  /* --------------------------------------------
   * Grab the extents of the full dataset
   */
  const extentGetters = {
    x: d => d.x,
    y: d => d.y
  };

  const fullExtents = calcExtents(flatten(dataSeries), extentGetters);

  /* --------------------------------------------
   * Sort by the last value
   */
  dataSeries.sort((a, b) => {
    return b[b.length - 1].y - a[a.length - 1].y;
  });

  let scale = 'individual';
</script>

<div class="input-container">
  <label><input type="radio" bind:group={scale} value="individual" />Individual scale</label>
  <label><input type="radio" bind:group={scale} value="shared" />Shared scale</label>
</div>

<div class="group-container">
  {#each dataSeries as data}
    <div class="small-multiple-container">
      <SmallMultipleWrapper {data} {fullExtents} {scale} {extentGetters} />
    </div>
  {/each}
</div>

<style>
  .group-container {
    height: calc(100% - 40px);
    width: 100%;
  }
  .input-container {
    margin-bottom: 7px;
  }
  label {
    cursor: pointer;
  }
  input {
    margin-right: 7px;
  }
  /*
    The wrapper div needs to have an explicit width and height in CSS.
    It can also be a flexbox child or CSS grid element.
    The point being it needs dimensions since the <LayerCake> element will
    expand to fill it.
  */
  .small-multiple-container {
    position: relative;
    display: inline-block;
    width: 11%;
    height: 30%;
  }
</style>