How to use the recharts.Scatter function in recharts

// ResponsiveContainer, <- not implemented
  Area: recharts.Area,
  Legend: recharts.Legend,
  Tooltip: recharts.Tooltip,
  // Cell           <- not implemented
  // Text           <- not implemented
  // Label          <- not implemented
  // LabelList      <- not implemented

  //////////////////////////
  // Cartesian Components //
  //////////////////////////

  Bar: recharts.Bar,
  Line: recharts.Line,
  Scatter: recharts.Scatter,
  XAxis: recharts.XAxis,
  YAxis: recharts.YAxis,
  ZAxis: recharts.ZAxis,
  Brush: recharts.Brush,
  CartesianAxis: recharts.CartesianAxis,
  CartesianGrid: recharts.CartesianGrid,
  ReferenceLine: recharts.ReferenceLine,
  ReferenceDot: recharts.ReferenceDot,
  ReferenceArea: recharts.ReferenceArea,
  ErrorBar: recharts.ErrorBar,

  //////////////////////
  // Polar Components //
  //////////////////////

  Pie: recharts.Pie,

// ResponsiveContainer, <- not implemented
  Area              : recharts.Area,
  Legend            : recharts.Legend,
  Tooltip           : recharts.Tooltip,
  // Cell           <- not implemented
  // Text           <- not implemented
  // Label          <- not implemented
  // LabelList      <- not implemented

  //////////////////////////
  // Cartesian Components //
  //////////////////////////

  Bar               : recharts.Bar,
  Line              : recharts.Line,
  Scatter           : recharts.Scatter,
  XAxis             : recharts.XAxis,
  YAxis             : recharts.YAxis,
  ZAxis             : recharts.ZAxis,
  Brush             : recharts.Brush,
  CartesianAxis     : recharts.CartesianAxis,
  CartesianGrid     : recharts.CartesianGrid,
  ReferenceLine     : recharts.ReferenceLine,
  ReferenceDot      : recharts.ReferenceDot,
  ReferenceArea     : recharts.ReferenceArea,
  ErrorBar          : recharts.ErrorBar,

  //////////////////////
  // Polar Components //
  //////////////////////

  Pie               : recharts.Pie,

_react2.default.createElement(_recharts.Scatter, { name: 'Incidents Per Thousand vs FMA Median Income', data: _data2.default, fill: '#D7075F' }),
        _react2.default.createElement(_recharts.CartesianGrid, null),
        _react2.default.createElement(_recharts.Legend, null),
        _react2.default.createElement(_recharts.Tooltip, { cursor: { strokeDasharray: '3 3' } })
      )
    ),
    _react2.default.createElement(
      _recharts.ResponsiveContainer,
      { width: '33.333%', aspect: '1' },
      _react2.default.createElement(
        _recharts.ScatterChart,
        null,
        _react2.default.createElement(_recharts.XAxis, { dataKey: 'percent_non_white', name: 'Non-White', unit: '%' }),
        _react2.default.createElement(_recharts.YAxis, { dataKey: 'total_incidents_per_1000', name: 'Incidents Per Thousand' }),
        _react2.default.createElement(_recharts.ZAxis, { dataKey: 'fma', name: 'Fire Management Area' }),
        _react2.default.createElement(_recharts.Scatter, { name: 'Incidents Per Thousand vs FMA % Non-White', data: _data2.default, fill: '#D7075F' }),
        _react2.default.createElement(_recharts.CartesianGrid, null),
        _react2.default.createElement(_recharts.Legend, null),
        _react2.default.createElement(_recharts.Tooltip, { cursor: { strokeDasharray: '3 3' } })
      )
    )
  );
};

var Scatterplot = function Scatterplot() {
  return _react2.default.createElement(
    'div',
    { style: { display: 'flex', flexFlow: 'row wrap' } },
    _react2.default.createElement(
      _recharts.ResponsiveContainer,
      { width: '33.333%', aspect: '1' },
      _react2.default.createElement(
        _recharts.ScatterChart,
        null,
        _react2.default.createElement(_recharts.XAxis, { dataKey: 'fma_population_total', name: 'Population' }),
        _react2.default.createElement(_recharts.YAxis, { dataKey: 'median_response_time', name: 'Response Time', unit: 'min' }),
        _react2.default.createElement(_recharts.ZAxis, { dataKey: 'fma', name: 'Fire Management Area' }),
        _react2.default.createElement(_recharts.Scatter, { name: 'Response Time vs. FMA Population', data: _data2.default, fill: '#D7075F' }),
        _react2.default.createElement(_recharts.CartesianGrid, null),
        _react2.default.createElement(_recharts.Legend, null),
        _react2.default.createElement(_recharts.Tooltip, { cursor: { strokeDasharray: '3 3' } })
      )
    ),
    _react2.default.createElement(
      _recharts.ResponsiveContainer,
      { width: '33.333%', aspect: '1' },
      _react2.default.createElement(
        _recharts.ScatterChart,
        null,
        _react2.default.createElement(_recharts.XAxis, { dataKey: 'median_hh_income', name: 'Median Household Income', unit: '$' }),
        _react2.default.createElement(_recharts.YAxis, { dataKey: 'median_response_time', name: 'Response Time', unit: 'min' }),
        _react2.default.createElement(_recharts.ZAxis, { dataKey: 'fma', name: 'Fire Management Area' }),
        _react2.default.createElement(_recharts.Scatter, { name: 'Response Time vs FMA Median Income', data: _data2.default, fill: '#D7075F' }),
        _react2.default.createElement(_recharts.CartesianGrid, null),