Menu

Synced brushEdit

1980
1990
2000
2010
0
5
1980
1990
2000
2010
0
10
1980
1990
2000
2010
0
10
1980
1990
2000
2010
0
10
  • +page.svelte
  • ./_components/SyncedBrushWrapper.percent-range.svelte
  • ./_components/Line.svelte
  • ./_components/Area.svelte
  • ./_components/AxisX.percent-range.html.svelte
  • ./_components/AxisY.percent-range.html.svelte
  • ./_components/Brush.html.svelte
  • ./_data/points.csv
  • ./_data/pointsTwo.csv
  • ./_data/pointsThree.csv
  • ./_data/pointsFour.csv
<script>
  import SyncedBrushWrapper from './_components/SyncedBrushWrapper.percent-range.svelte';

  // This example loads csv data as json using @rollup/plugin-dsv
  import pointsOne from './_data/points.csv';
  import pointsTwo from './_data/pointsTwo.csv';
  import pointsThree from './_data/pointsThree.csv';
  import pointsFour from './_data/pointsFour.csv';

  let brushExtents = [null, null];

  const xKey = 'myX';
  const yKey = 'myY';

  const datasets = [pointsOne, pointsTwo, pointsThree, pointsFour];

  datasets.forEach(dataset => {
    dataset.forEach(d => {
      d[yKey] = +d[yKey];
    });
  });

  const colors = ['#00e047', '#00bbff', '#ff00cc', '#ffcc00'];
</script>

<div class="small-multiple-container">
  {#each datasets as dataset, i}
    <SyncedBrushWrapper
      data={dataset}
      {xKey}
      {yKey}
      bind:min={brushExtents[0]}
      bind:max={brushExtents[1]}
      stroke={colors[i]}
    />
  {/each}
</div>

<style>
  /*
    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 {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;
  }
</style>