Menu

WebGl Scatter (svg axes, quadtree hover)

import LayerCake from 'layercake';
import points from './data/points.js';
import ScatterWebgl from './components/ScatterWebgl.html';
import AxisX from './components/AxisX.html';
import AxisY from './components/AxisY.html';
import QuadTree from './components/QuadTree.html';

const diameter = 6;
const padding = 6;

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')
})
  .svgLayers([
    { component: AxisX, opts: {} },
    { component: AxisY, opts: {} }
  ])
  .webglLayers([
    { component: ScatterWebgl, opts: { diameter } }
  ])
  .htmlLayers([
    { component: QuadTree, opts: { color: '#fff' } }
  ]);

myCake.render();