function getPolygonPoints(props) {
  const {
    animation,
    domains,
    data,
    startingAngle,
    style,
    onValueMouseOver,
    onValueMouseOut
  } = props;
  if (!onValueMouseOver) {
    return;
  }
  const scales = domains.reduce((acc, {domain, name}) => {
    acc[name] = scaleLinear()
      .domain(domain)
      .range([0, 1]);
    return acc;
  }, {});
  return data.map((row, rowIndex) => {
    const mappedData = domains.map(({name, getValue}, index) => {
      const dataPoint = getValue ? getValue(row) : row[name];
      // error handling if point doesn't exist
      const angle = (index / domains.length) * Math.PI * 2 + startingAngle;
      // dont let the radius become negative
      const radius = Math.max(scales[name](dataPoint), 0);
      return {
        x: radius * Math.cos(angle),
        y: radius * Math.sin(angle),
        domain: name,
        value: dataPoint,
        dataName: row.name
      };
    });

    return (
      <MarkSeries
        animation={animation}
        className={`${predefinedClassName}-polygonPoint`}
        key={`${rowIndex}-polygonPoint`}
        data={mappedData}
        size={10}
        style={{
          ...style.polygons,
          fill: 'transparent',
          stroke: 'transparent'
        }}
        onValueMouseOver={onValueMouseOver}
        onValueMouseOut={onValueMouseOut}
      />
    );
  });
}
Generate circles at the polygon points for Hover functionality
@param {Object} props
 - props.animation {Boolean}
 - props.data {Array} array of object specifying what values are to be plotted
 - props.domains {Array} array of object specifying the way each axis is to be plotted
 - props.startingAngle {number} the initial angle offset
 - props.style {object} style object for the whole chart
 - props.onValueMouseOver {function} function to call on mouse over a polygon point
 - props.onValueMouseOver {function} function to call when mouse leaves a polygon point
@return {Array} the plotted axis components