Menu

Small multiples (animated domain transition)

An example rendering cakes in a loop and using the newDiv function. Whether it uses that element's extent or the extent of the whole series can be toggled.

import * as eases from 'eases-jsnext';
import { tween } from 'svelte-extras';
import { default as LayerCake, newDiv, calcExtents, flatten } from 'layercake';
import pointSeries from './data/pointSeries.js';
import Line from './components/Line.html';

// Grab the extents of the full dataset
const extents = calcExtents(flatten(pointSeries), [
  { field: 'x', accessor: d => d.x },
  { field: 'y', accessor: d => d.y }
]);

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

const cakes = [];

pointSeries.forEach(point => {
  const styles = {
    position: 'relative',
    display: 'inline-block',
    width: '11%',
    height: '30%'
  };

  const myDiv = newDiv('my-div', styles, document.getElementById('my-chart'));

  const myCake = new LayerCake({
    padding: { top: 2, right: 6, bottom: 2, left: 6 },
    x: 'x',
    y: 'y',
    data: point,
    target: myDiv
  })
    .svgLayers([
      { component: Line, opts: { stroke: '#000' } }
    ]);

  myCake.render();
  cakes.push(myCake);
});

Array.prototype.forEach.call(document.querySelectorAll('.input-container[data-which="small-multiples"]'), el => {
  el.addEventListener('change', e => {
    const whichScale = e.target.value;
    cakes.forEach(myCake => {
      const { domains } = myCake.get();
      // Set the source of our domain extent
      const doughmain = whichScale === 'shared' ? extents : domains;

      tween.call(myCake, 'xDomain', doughmain.x, {
        duration: 300,
        easing: eases.cubicOut
      });
      tween.call(myCake, 'yDomain', doughmain.y, {
        duration: 300,
        easing: eases.cubicOut
      });
    });
  });
});