How to use the deck.gl.ScatterplotLayer function in deck

const geometry = this.getEditingFeature().geometry;
    let polygons = [];
    if (geometry.type === 'MultiPolygon') {
      polygons = geometry.coordinates;
    } else if (geometry.type === 'Polygon') {
      polygons = [geometry.coordinates];
    }

    for (let polygonIndex = 0; polygonIndex < polygons.length; polygonIndex++) {
      const polygon = polygons[polygonIndex];
      for (let ringIndex = 0; ringIndex < polygon.length; ringIndex++) {
        const ring = polygon[ringIndex];

        // create a layer per ring
        const layer = new ScatterplotLayer({
          ...this.props,
          data: ring,
          getPosition: data => data,
          pickable: true,
          autoHighlight: true,
          getRadius: this.props.getPointRadius || (() => 1),
          radiusScale: this.props.pointRadiusScale || 20,
          radiusMinPixels: this.props.pointRadiusMinPixels || 4,
          radiusMaxPixels: this.props.pointRadiusMaxPixels || 10,
          opacity: this.props.pointOpacity || 1.0,
          highlightColor: this.props.pointHighlightColor || [0xff, 0xff, 0xff, 0xff],
          getColor: this.props.getPointColor || (() => [0x80, 0x80, 0x80, 0xff]),
          id: `${this.props.id}-points|${polygonIndex}|${ringIndex}`
        });
        layers.push(layer);
      }

...sharedProps,
              iconAtlas: this.props.editHandleIconAtlas,
              iconMapping: this.props.editHandleIconMapping,
              sizeScale: this.props.editHandleIconSizeScale,
              getIcon: this.props.getEditHandleIcon,
              getSize: this.props.getEditHandleIconSize,
              getColor: this.props.getEditHandleIconColor,
              getAngle: this.props.getEditHandleIconAngle,

              getPosition: d => d.position,

              parameters: this.props.editHandleParameters
            })
          )
        : this.props.editHandleType === 'point'
          ? new ScatterplotLayer(
              this.getSubLayerProps({
                ...sharedProps,

                // Proxy editing point props
                radiusScale: this.props.editHandlePointRadiusScale,
                outline: this.props.editHandlePointOutline,
                strokeWidth: this.props.editHandlePointStrokeWidth,
                radiusMinPixels: this.props.editHandlePointRadiusMinPixels,
                radiusMaxPixels: this.props.editHandlePointRadiusMaxPixels,
                getRadius: this.props.getEditHandlePointRadius,
                getColor: this.props.getEditHandlePointColor,

                parameters: this.props.editHandleParameters
              })
            )
          : null;

};
  });

  if (fd.js_data_mutator) {
    // Applying user defined data mutator if defined
    const jsFnMutator = sandboxedEval(fd.js_data_mutator);
    data = jsFnMutator(data);
  }

  if (filters != null) {
    filters.forEach((f) => {
      data = data.filter(f);
    });
  }

  return new ScatterplotLayer({
    id: `scatter-layer-${fd.slice_id}`,
    data,
    fp64: true,
    radiusMinPixels: fd.min_radius || null,
    radiusMaxPixels: fd.max_radius || null,
    outline: false,
    ...common.commonLayerProps(fd, slice),
  });
}

.add('ScatterplotLayer#initialize', () => {
      const layer = new ScatterplotLayer({data: data.points, getPosition: d => d.COORDINATES});
      testInitializeLayer({layer});
    })
    .add('PathLayer#initialize', () => {

.add('ScatterplotLayer#construct(composed prop objects)', () => {
      return new ScatterplotLayer(Object.assign({}, PROPS1, PROPS2, PROPS3));
    });
}

createNodeLayer() {
    return new ScatterplotLayer({
      id: 'node-layer',
      data: this.props.nodes,
      getPosition: node => this.props.getNodePosition(node),
      getRadius: node => this.props.getNodeSize(node),
      getColor: node => this.props.getNodeColor(node),
      onHover: node => this.props.onHoverNode(node),
      pickable: true,
      projectionMode: COORDINATE_SYSTEM.IDENTITY,
      updateTriggers: {
        getPosition: this.props.positionUpdateTrigger,
        getColor: this.props.colorUpdateTrigger
      }
    });
  }

createNodeLayer() {
    return new ScatterplotLayer({
      id: 'node-layer',
      data: this.props.nodes,
      getPosition: node => this.props.getNodePosition(node),
      getRadius: node => this.props.getNodeSize(node),
      getColor: node => this.props.getNodeColor(node),
      projectionMode: COORDINATE_SYSTEM.IDENTITY,
      updateTriggers: {
        getPosition: this.props.positionUpdateTrigger
      }
    });
  }

_renderScatterplot() {
    const {pointData} = this.props;

    if (!pointData || pointData.length === 0) {
      return null;
    }

    return new ScatterplotLayer({
      id: 'scatterplot',
      data: pointData,
      coordinateSystem: COORDINATE_SYSTEM.IDENTITY
    });
  }

render() {
    const { viewport } = this.state

    const layers = [
      new ArcLayer({
        id: 'arc-layer',
        strokeWidth: 10,
        data: [
          {
            sourcePosition: [-122.4, 37.7843],
            targetPosition: [-122.416, 37.781],
            color: [255, 0, 255],
          },
        ],
      }),
      new ScatterplotLayer({
        id: 'scatterplot-layer',
        data: [{ position: [-122.4, 37.78], radius: 5, color: [0, 255, 0] }],
        radiusScale: 100,
      }),
      new LineLayer({
        id: 'line-layer',
        strokeWidth: 10,
        data: [
          {
            sourcePosition: [-122.43, 37.79],
            targetPosition: [-122.416, 37.781],
            color: [255, 0, 0],
          },
        ],
      }),
    ]

}}
        >
          <h2> {"THIS DEMO REQUIRES WEBLG2, BUT YOUR BRWOSER DOESN'T SUPPORT IT"} </h2>
        
      );
    }
    const {viewport, settings} = this.props;

    if (!data) {
      return null;
    }

    const {stations, triangulation, texData, bbox} = data;

    const layers = [
      new ScatterplotLayer({
        id: 'stations',
        data: stations,
        getPosition: d =&gt; [-d.long, d.lat, d.elv],
        getFillColor: d =&gt; [200, 200, 100],
        getRadius: d =&gt; 150,
        opacity: 0.2,
        radiusScale: 30
      }),
      settings.showParticles &amp;&amp;
        new ParticleLayer({
          id: 'particles',
          bbox,
          texData,
          time: settings.time,
          zScale: 100
        }),