Menu

Scatter (svg + canvas + voronoi)

import LayerCake from 'layercake';
import points from './data/points.js';
import Scatter from './components/Scatter.html';
import Voronoi from './components/Voronoi.html';
import AxisX from './components/AxisX.html';
import AxisY from './components/AxisY.html';

const r = 3;
const padding = 4;

const myCake = new LayerCake({
  padding: { top: 0, right: 5, bottom: 20, left: 25 },
  x: 'myX',
  y: 'myY',
  xPadding: [padding, padding],
  yPadding: [padding, padding],
  data: points,
  target: document.getElementById('my-chart')
})
  .canvasLayers([
    { component: Scatter, opts: { r, fill: '#ff4eff' } }
  ])
  .svgLayers([
    { component: AxisX, opts: {} },
    { component: AxisY, opts: {} },
    { component: Voronoi, opts: {} }
  ]);

myCake.render();