How to use the d3-geo.geoAlbers function in d3-geo

const orthographicRaw: d3Geo.GeoRawProjection = d3Geo.geoOrthographicRaw();
const stereographicRaw: d3Geo.GeoRawProjection = d3Geo.geoStereographicRaw();
const transverseMercatorRaw: d3Geo.GeoRawProjection = d3Geo.geoTransverseMercatorRaw();

// Use Raw Projection =====================================================

const rawProjectionPoint: [number, number] = azimuthalEqualAreaRaw(54, 2);
const rawProjectionInvertedPoint: [number, number] = azimuthalEqualAreaRaw.invert(180, 6);

// ----------------------------------------------------------------------
// Pre-Defined Projections
// ----------------------------------------------------------------------

// Create predefined Projection from factory =============================

const albers: d3Geo.GeoConicProjection = d3Geo.geoAlbers();
const albersUsa: d3Geo.GeoProjection = d3Geo.geoAlbersUsa();
const azimuthalEqualArea: d3Geo.GeoProjection = d3Geo.geoAzimuthalEqualArea();
const azimuthalEquidistant: d3Geo.GeoProjection = d3Geo.geoAzimuthalEquidistant();
let conicConformal: d3Geo.GeoConicProjection = d3Geo.geoConicConformal();
const conicEqualArea: d3Geo.GeoConicProjection = d3Geo.geoConicEqualArea();
const conicEquidistant: d3Geo.GeoConicProjection = d3Geo.geoConicEquidistant();
const cquirectangular: d3Geo.GeoProjection = d3Geo.geoEquirectangular();
const gnomonic: d3Geo.GeoProjection = d3Geo.geoGnomonic();
const mercator: d3Geo.GeoProjection = d3Geo.geoMercator();
const orthographic: d3Geo.GeoProjection = d3Geo.geoOrthographic();
const stereographic: d3Geo.GeoProjection = d3Geo.geoStereographic();
const transverseMercator: d3Geo.GeoProjection = d3Geo.geoTransverseMercator();

// ----------------------------------------------------------------------
// Create New Projections
// ----------------------------------------------------------------------

const orthographicRaw: d3Geo.GeoRawProjection = d3Geo.geoOrthographicRaw();
const stereographicRaw: d3Geo.GeoRawProjection = d3Geo.geoStereographicRaw();
const transverseMercatorRaw: d3Geo.GeoRawProjection = d3Geo.geoTransverseMercatorRaw();

// Use Raw Projection =====================================================

const rawProjectionPoint: [number, number] = azimuthalEqualAreaRaw(54, 2);
const rawProjectionInvertedPoint: [number, number] = azimuthalEqualAreaRaw.invert(180, 6);

// ----------------------------------------------------------------------
// Pre-Defined Projections
// ----------------------------------------------------------------------

// Create predefined Projection from factory =============================

const albers: d3Geo.GeoConicProjection = d3Geo.geoAlbers();
const albersUsa: d3Geo.GeoProjection = d3Geo.geoAlbersUsa();
const azimuthalEqualArea: d3Geo.GeoProjection = d3Geo.geoAzimuthalEqualArea();
const azimuthalEquidistant: d3Geo.GeoProjection = d3Geo.geoAzimuthalEquidistant();
let conicConformal: d3Geo.GeoConicProjection = d3Geo.geoConicConformal();
const conicEqualArea: d3Geo.GeoConicProjection = d3Geo.geoConicEqualArea();
const conicEquidistant: d3Geo.GeoConicProjection = d3Geo.geoConicEquidistant();
const cquirectangular: d3Geo.GeoProjection = d3Geo.geoEquirectangular();
const gnomonic: d3Geo.GeoProjection = d3Geo.geoGnomonic();
const mercator: d3Geo.GeoProjection = d3Geo.geoMercator();
const orthographic: d3Geo.GeoProjection = d3Geo.geoOrthographic();
const stereographic: d3Geo.GeoProjection = d3Geo.geoStereographic();
const transverseMercator: d3Geo.GeoProjection = d3Geo.geoTransverseMercator();

// ----------------------------------------------------------------------
// Create New Projections
// ----------------------------------------------------------------------

export default function() {
  var cache,
      cacheStream,
      lower48 = albers(), lower48Point,
      alaska = conicEqualArea().rotate([154, 0]).center([-2, 58.5]).parallels([55, 65]), alaskaPoint, // EPSG:3338
      hawaii = conicEqualArea().rotate([157, 0]).center([-3, 19.9]).parallels([8, 18]), hawaiiPoint, // ESRI:102007
      point, pointStream = {point: function(x, y) { point = [x, y]; }};

  function albersUsa(coordinates) {
    var x = coordinates[0], y = coordinates[1];
    return point = null,
        (lower48Point.point(x, y), point)
        || (alaskaPoint.point(x, y), point)
        || (hawaiiPoint.point(x, y), point);
  }

  albersUsa.invert = function(coordinates) {
    var k = lower48.scale(),
        t = lower48.translate(),
        x = (coordinates[0] - t[0]) / k,

export default function() {
  var cache,
      cacheStream,
      lower48 = albers(), lower48Point,
      alaska = conicEqualArea().rotate([154, 0]).center([-2, 58.5]).parallels([55, 65]), alaskaPoint, // EPSG:3338
      hawaii = conicEqualArea().rotate([157, 0]).center([-3, 19.9]).parallels([8, 18]), hawaiiPoint, // ESRI:102007
      puertoRico = conicEqualArea().rotate([66, 0]).center([0, 18]).parallels([8, 18]), puertoRicoPoint, //Taken from https://bl.ocks.org/mbostock/5629120
      samoa = equirectangular().rotate([173, 14]), samoaPoint, // EPSG:4169
      guam = equirectangular().rotate([-145, -16.8]), guamPoint,
      point, pointStream = {point: function(x, y) { point = [x, y]; }};

      /*
      var puertoRicoBbox = [[-68.3, 19], [-63.9, 17]];
      var samoaBbox = [[-171, -14], [-168, -14.8]];
      var guamBbox = [[144, 20.8], [146.5, 12.7]];
      */

  function albersUsa(coordinates) {
    var x = coordinates[0], y = coordinates[1];

export function albersUsaPr() {
    let cache;
    let cacheStream;

    const ε = 1e-6;

    const lower48 = geoAlbers();
    let lower48Point;

    // EPSG:3338
    const alaska = geoConicEqualArea()
        .rotate([154, 0])
        .center([-2, 58.5])
        .parallels([55, 65]);
    let alaskaPoint;

    // ESRI:102007
    const hawaii = geoConicEqualArea()
        .rotate([157, 0])
        .center([-3, 19.9])
        .parallels([8, 18]);
    let hawaiiPoint;

this.measure = () => {
      const width = this.container.getBoundingClientRect().width
      const height = Math.min(width / 1.5, window.innerHeight * 0.65)

      const extentData = this.props.extentData || this.props.data
      if (
        width !== this.state.width ||
        extentData !== this.state.extentData
      ) {
        const targetProjection = geoAlbers()
          .rotate([0, 0])
          .center([8.23, 46.8])
          .fitExtent(
            [[10, 10], [width - 10, height - 10]],
            toGeoJson(extentData)
          )

        const currentScale = this.projection.scale()
        const targetScale = targetProjection.scale()
        const currentTranslate = this.projection.translate()
        const targetTranslate = targetProjection.translate()

        const duration = 1000
        if (this.timer) {
          this.timer.stop()
        }

projection(width, height) {
    return geoAlbers()
      .rotate([0,0])
      .center([8.3, 46.8])
      .scale(14000)
      .translate([width / 2, height / 2])
  }
  render() {

constructor (...args) {
    super(...args)

    this.state = {}
    this.projection = geoAlbers()
      .rotate([0, 0])
      .center([8.23, 46.8])
      .scale(13000)
    this.containerRef = ref => {
      this.container = ref
    }
    this.measure = () => {
      const width = this.container.getBoundingClientRect().width
      const height = Math.min(width / 1.5, window.innerHeight * 0.65)

      const extentData = this.props.extentData || this.props.data
      if (
        width !== this.state.width ||
        extentData !== this.state.extentData
      ) {
        const targetProjection = geoAlbers()