Menu

Scatter (svg + canvas + voronoi)Edit

1980 1985 1990 1995 2000 2005 2010 2015 4 5 6 7 8
<script>
  import { LayerCake, Svg, Canvas } from 'layercake';

  import points from './data/points.csv';
  import ScatterSvg from './components/ScatterSvg.svelte';
  import ScatterCanvas from './components/ScatterCanvas.svelte';
  import Voronoi from './components/Voronoi.svelte';
  import AxisX from './components/AxisX.svelte';
  import AxisY from './components/AxisY.svelte';

  points.forEach(row => {
    row.myY = +row.myY;
  });

  const r = 3;
  const padding = 10;
  const color = '#fff';
</script>

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

<div class="chart-container">
  <LayerCake
    padding={{ top: 10, right: 5, bottom: 20, left: 25 }}
    x='myX'
    y='myY'
    xPadding={[padding, padding]}
    yPadding={[padding, padding]}
    data={points}
  >

    <Svg>
      <AxisX/>
      <AxisY/>
    </Svg>

    <Canvas>
      <ScatterCanvas
        r={r * 1.5}
        fill={'#0cf'}
      />
    </Canvas>

    <Svg>
      <ScatterSvg
        {r}
        fill={color}
      />
      <Voronoi/>
    </Svg>
  </LayerCake>
</div>