Menu

Radar Chart

import LayerCake from 'layercake';
import points from './data/radarScores.js';
import Radar from './components/Radar.html';
import AxisRadial from './components/AxisRadial.html';
import { scaleLinear } from 'd3-scale';

const myCake = new LayerCake({
  padding: { top: 30, right: 0, bottom: 7, left: 0 },
  r: ['fastball', 'change', 'slider', 'cutter', 'curve'],
  rScale: scaleLinear(),
  rRange: ({ width, height }) => {
    return [0, height / 2];
  },
  rDomain: [0, 10],
  data: points,
  target: document.getElementById('my-chart')
})
  .svgLayers([
    { component: AxisRadial, opts: {} },
    { component: Radar, opts: {} }
  ]);

myCake.render();