@mathstack/viz 1.1.5 → 2.1.0

package/src/lib/geographies/config/layers/attribute-data-layer/attribute-data-layer.spec.ts

@@ -0,0 +1,119 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { GeographiesAttributeDataLayer } from './attribute-data-layer';
+import { GeographiesAttributeDataLayerBuilder } from './attribute-data-layer-builder';
+
+type Datum = { value: number; state: string };
+const data = [
+  { value: 1, state: 'AL' },
+  { value: 2, state: 'AK' },
+  { value: 3, state: 'AZ' },
+  { value: 4, state: 'CA' },
+  { value: 5, state: 'CO' },
+  { value: 6, state: 'CO' },
+];
+function createLayer(): GeographiesAttributeDataLayer<
+  Datum,
+  { name: string },
+  any
+> {
+  return new GeographiesAttributeDataLayerBuilder<Datum, { name: string }>()
+    .equalValueRangesBins((dimension) =>
+      dimension.valueAccessor((d) => d.value).numBins(5)
+    )
+    .geographyIndexAccessor((d) => d.state)
+    .data(data)
+    ._build();
+}
+
+describe('GeographiesAttributeDataLayer', () => {
+  let layer: GeographiesAttributeDataLayer<Datum, { name: string }, any>;
+
+  describe('initPropertiesFromData()', () => {
+    beforeEach(() => {
+      layer = createLayer();
+      spyOn(layer as any, 'getUniqueDatumsByGeoAccessor').and.returnValue(
+        'uniqueValues' as any
+      );
+      spyOn(layer.attributeDimension, 'setPropertiesFromData');
+      spyOn(layer.attributeDimension, 'getScale');
+      spyOn(layer as any, 'setAttributeDataMaps');
+      layer.initPropertiesFromData();
+    });
+    it('calls getUniqueDatumsByGeoAccessor once', () => {
+      expect(
+        (layer as any).getUniqueDatumsByGeoAccessor
+      ).toHaveBeenCalledOnceWith(data);
+    });
+    it('calls setPropertiesFromData once', () => {
+      expect(
+        layer.attributeDimension.setPropertiesFromData
+      ).toHaveBeenCalledOnceWith('uniqueValues' as any);
+    });
+    it('calls setAttributeDataMaps once', () => {
+      expect((layer as any).setAttributeDataMaps).toHaveBeenCalledOnceWith(
+        'uniqueValues' as any
+      );
+    });
+    it('calls getScale once', () => {
+      expect(layer.attributeDimension.getScale).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('getUniqueDatumsByGeoAccessor()', () => {
+    beforeEach(() => {
+      layer = createLayer();
+    });
+    it('returns the unique datums by geoAccessor', () => {
+      const result = (layer as any).getUniqueDatumsByGeoAccessor(data);
+      expect(result).toEqual([
+        { value: 1, state: 'AL' },
+        { value: 2, state: 'AK' },
+        { value: 3, state: 'AZ' },
+        { value: 4, state: 'CA' },
+        { value: 5, state: 'CO' },
+      ]);
+    });
+  });
+
+  describe('setAttributeDataMaps()', () => {
+    beforeEach(() => {
+      layer = createLayer();
+      (layer as any).setAttributeDataMaps([
+        { value: 1, state: 'AL' },
+        { value: 2, state: 'AK' },
+        { value: 3, state: 'AZ' },
+        { value: 4, state: 'CA' },
+        { value: 5, state: 'CO' },
+      ]);
+    });
+    it('correctly sets attributeValuesByGeographyIndex', () => {
+      expect(layer.attributeValuesByGeographyIndex.get('AL')).toEqual(1);
+      expect(layer.attributeValuesByGeographyIndex.get('AK')).toEqual(2);
+      expect(layer.attributeValuesByGeographyIndex.get('AZ')).toEqual(3);
+      expect(layer.attributeValuesByGeographyIndex.get('CA')).toEqual(4);
+      expect(layer.attributeValuesByGeographyIndex.get('CO')).toEqual(5);
+    });
+    it('correctly sets datumsByGeographyIndex', () => {
+      expect(layer.datumsByGeographyIndex.get('AL')).toEqual({
+        value: 1,
+        state: 'AL',
+      });
+      expect(layer.datumsByGeographyIndex.get('AK')).toEqual({
+        value: 2,
+        state: 'AK',
+      });
+      expect(layer.datumsByGeographyIndex.get('AZ')).toEqual({
+        value: 3,
+        state: 'AZ',
+      });
+      expect(layer.datumsByGeographyIndex.get('CA')).toEqual({
+        value: 4,
+        state: 'CA',
+      });
+      expect(layer.datumsByGeographyIndex.get('CO')).toEqual({
+        value: 5,
+        state: 'CO',
+      });
+    });
+  });
+});

package/src/lib/geographies/config/layers/attribute-data-layer/attribute-data-layer.ts

@@ -0,0 +1,148 @@
+import { safeAssign } from '@mathstack/app-kit';
+import { InternMap, select } from 'd3';
+import { Geometry, MultiPolygon, Polygon } from 'geojson';
+import { FillUtilities } from '../../../../core/utilities/fill-utilities';
+import { ValueUtilities } from '../../../../core/utilities/values';
+import { FillDefinition } from '../../../../fill-definitions/fill-definitions';
+import { GeographiesFeature } from '../../../geographies-feature';
+import {
+  GeographiesLayer,
+  GeographiesTooltipDatum,
+} from '../geographies-layer/geographies-layer';
+import { GeographiesAttributeDataLayerOptions } from './attribute-data-layer-options';
+import { BinStrategy } from './dimensions/attribute-data-bin-enums';
+import { CategoricalBinsAttributeDataDimension } from './dimensions/categorical-bins/categorical-bins';
+import { CustomBreaksBinsAttributeDataDimension } from './dimensions/custom-breaks/custom-breaks-bins';
+import { EqualFrequenciesAttributeDataDimension } from './dimensions/equal-frequencies-bins/equal-frequencies-bins';
+import { EqualValueRangesAttributeDataDimension } from './dimensions/equal-value-ranges-bins/equal-value-ranges-bins';
+import { NoBinsAttributeDataDimension } from './dimensions/no-bins/no-bins';
+
+const DEFAULT = {
+  _nullColor: '#dcdcdc',
+  _strokeColor: 'dimgray',
+  _strokeWidth: '1',
+  _enableEventActions: true,
+};
+
+export class GeographiesAttributeDataLayer<
+  Datum,
+  TProperties,
+  TGeometry extends Geometry = MultiPolygon | Polygon,
+>
+  extends GeographiesLayer<Datum, TProperties, TGeometry>
+  implements GeographiesAttributeDataLayerOptions<Datum, TProperties, TGeometry>
+{
+  readonly attributeDimension:
+    | CategoricalBinsAttributeDataDimension<Datum>
+    | NoBinsAttributeDataDimension<Datum>
+    | EqualValueRangesAttributeDataDimension<Datum>
+    | EqualFrequenciesAttributeDataDimension<Datum>
+    | CustomBreaksBinsAttributeDataDimension<Datum>;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  attributeScale: any;
+  attributeValuesByGeographyIndex: InternMap<string, string | number>;
+  readonly customFills: FillDefinition<Datum>[];
+  readonly data: Datum[];
+  datumsByGeographyIndex: InternMap<string, Datum>;
+  geographyIndexAccessor: (d: Datum) => string;
+  readonly marksClass: string;
+  readonly mixBlendMode: string;
+
+  constructor(
+    options: GeographiesAttributeDataLayerOptions<Datum, TProperties, TGeometry>
+  ) {
+    super();
+    safeAssign(this, DEFAULT);
+    safeAssign(this, options);
+    if (this.attributeDimension === undefined) {
+      console.error('Attribute dimension is required for data layers');
+    }
+    if (this.geographyIndexAccessor === undefined) {
+      console.error('Geography index accessor is required for data layers');
+    }
+    this.initPropertiesFromData();
+  }
+
+  initPropertiesFromData(): void {
+    const uniqueDatums = this.getUniqueDatumsByGeoAccessor(this.data);
+    this.attributeDimension.setPropertiesFromData(uniqueDatums);
+    this.setAttributeDataMaps(uniqueDatums);
+    this.attributeScale = this.attributeDimension.getScale();
+  }
+
+  private getUniqueDatumsByGeoAccessor(data: Datum[]): Datum[] {
+    const uniqueByGeoAccessor = (arr: Datum[], set = new Set()) =>
+      arr.filter(
+        (x) =>
+          !set.has(this.geographyIndexAccessor(x)) &&
+          set.add(this.geographyIndexAccessor(x))
+      );
+    return uniqueByGeoAccessor(data);
+  }
+
+  private setAttributeDataMaps(uniqueDatums: Datum[]): void {
+    this.attributeValuesByGeographyIndex = new InternMap(
+      uniqueDatums.map((d) => {
+        const value = this.attributeDimension.valueAccessor(d);
+        return [
+          this.geographyIndexAccessor(d),
+          value === null || value === undefined ? undefined : value,
+        ];
+      })
+    );
+    this.datumsByGeographyIndex = new InternMap(
+      uniqueDatums.map((d) => {
+        return [this.geographyIndexAccessor(d), d];
+      })
+    );
+  }
+
+  getFill(feature: GeographiesFeature<TProperties, TGeometry>): string {
+    const geographyIndex = this.featureIndexAccessor(feature);
+    return this.customFills
+      ? this.getPatternFill(geographyIndex)
+      : this.getAttributeFill(geographyIndex);
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  getPatternFill(geographyIndex: string): string {
+    const datum = this.datumsByGeographyIndex.get(geographyIndex);
+    const geographyFill = this.getAttributeFill(geographyIndex);
+    return FillUtilities.getFill(datum, geographyFill, this.customFills);
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  getAttributeFill(geographyIndex: string): string {
+    const dataValue = this.attributeValuesByGeographyIndex.get(geographyIndex);
+    return this.attributeScale(dataValue);
+  }
+
+  getTooltipData(path: SVGPathElement): GeographiesTooltipDatum<Datum> {
+    const feature = select(path).datum() as GeographiesFeature<
+      TProperties,
+      TGeometry
+    >;
+    const featureIndex = this.featureIndexAccessor(feature);
+    const datum = this.datumsByGeographyIndex.get(featureIndex);
+    const value = this.attributeValuesByGeographyIndex.get(featureIndex);
+    const tooltipData: GeographiesTooltipDatum<Datum> = {
+      datum,
+      geography: this.geographyIndexAccessor(datum),
+      attributeValue: this.attributeDimension.formatFunction
+        ? ValueUtilities.customFormat(
+            datum,
+            this.attributeDimension.formatFunction
+          )
+        : this.attributeDimension.dimensionType !== 'ordinal' &&
+            this.attributeDimension.binType !== BinStrategy.categorical
+          ? ValueUtilities.d3Format(
+              value as number,
+              this.attributeDimension.formatSpecifier
+            )
+          : (value as string),
+      color: this.getAttributeFill(featureIndex),
+    };
+
+    return tooltipData;
+  }
+}

package/src/lib/geographies/config/layers/attribute-data-layer/dimensions/attribute-data/attribute-data-dimension-builder.ts

@@ -0,0 +1,65 @@
+import { DataValue } from '../../../../../../core/types/values';
+import { DataDimensionBuilder } from '../../../../../../data-dimensions/dimension-builder';
+
+export abstract class AttributeDataDimensionBuilder<
+  Datum,
+  AttributeValue extends DataValue,
+  RangeValue extends string | number = string,
+> extends DataDimensionBuilder<Datum, AttributeValue> {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  protected _interpolator: (...args: any) => any;
+  protected _nullColor: string;
+  protected _range: RangeValue[];
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  protected _scale: (...args: any) => string;
+
+  /**
+   * OPTIONAL. For binned dimensions, a function that will be used to create the a new range for the attribute data scale if the user's specified numBins is greater than the values in the user's specified range.
+   *
+   * For the No Bins dimension, this will be used to interpolate between the two colors in the range.
+   *
+   * @default interpolateLab
+   */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  interpolator(interpolator: (...args: any) => any): this {
+    this._interpolator = interpolator;
+    return this;
+  }
+
+  /**
+   * A color that will be used if there are any geojson features provided in this dimension's geographies that do not have attribute data.
+   *
+   * @default 'whitesmoke'
+   */
+  nullColor(nullColor: string): this {
+    this._nullColor = nullColor;
+    return this;
+  }
+
+  /**
+   * OPTIONAL. An array of values that will be used as the range in the attribute data scale.
+   *
+   * @default ['white', 'slategray'] for Categorical Bins
+   * @default ['white', 'blue'] for Equal Frequencies Bins
+   * @default ['white', 'pink', 'red'] for Equal Value Ranges Bins
+   */
+  range(range: RangeValue[]): this {
+    this._range = range;
+    return this;
+  }
+
+  /**
+   * A function that will be used to create the scale for the attribute data.
+   *
+   * @default scaleOrdinal for Categorical Bins
+   * @default scaleThreshold for Custom Breaks Bins (cannot be overridden)
+   * @default scaleQuantile for Equal Frequencies Bins
+   * @default scaleQuantize for Equal Value Ranges Bins
+   * @default scaleLinear for No Bins
+   */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  scale(scale: (...args: any) => string): this {
+    this._scale = scale;
+    return this;
+  }
+}

package/src/lib/geographies/config/layers/attribute-data-layer/dimensions/attribute-data/attribute-data-dimension-options.ts

@@ -0,0 +1,15 @@
+import { DataValue } from '../../../../../../core/types/values';
+import { DataDimensionOptions } from '../../../../../../data-dimensions/dimension-options';
+
+export interface AttributeDataDimensionOptions<
+  Datum,
+  AttributeValue extends DataValue,
+  RangeValue extends string | number = string,
+> extends DataDimensionOptions<Datum, AttributeValue> {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  interpolator: (...args: any) => any;
+  nullColor: string;
+  range: RangeValue[];
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  scale: (...args: any) => string;
+}

package/src/lib/geographies/config/layers/attribute-data-layer/dimensions/attribute-data/attribute-data-dimension.ts

@@ -0,0 +1,32 @@
+import { DataValue } from '../../../../../../core/types/values';
+import { DataDimension } from '../../../../../../data-dimensions/dimension';
+import { BinStrategy } from '../attribute-data-bin-enums';
+import { AttributeDataDimensionOptions } from './attribute-data-dimension-options';
+
+/**
+ * Configuration object for attribute data that will be used to shade the map.
+ *
+ * The first generic parameter is the type of the attribute data.
+ */
+export abstract class AttributeDataDimension<
+  Datum,
+  AttributeValue extends DataValue,
+  RangeValue extends string | number = string,
+>
+  extends DataDimension<Datum, AttributeValue>
+  implements AttributeDataDimensionOptions<Datum, AttributeValue, RangeValue>
+{
+  binType: BinStrategy;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  interpolator: (...args: any) => any;
+  nullColor: string;
+  range: RangeValue[];
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  scale: (...args: any) => any;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  abstract getScale(): any;
+
+  constructor(dimensionType: 'number' | 'ordinal' | 'date') {
+    super(dimensionType);
+  }
+}

package/src/lib/geographies/config/layers/attribute-data-layer/dimensions/attribute-data-bin-enums.ts

@@ -0,0 +1,10 @@
+/**
+ * Enum that defines the types of binning that can be used to map quantitative attribute data to colors.
+ */
+export enum BinStrategy {
+  none = 'none',
+  categorical = 'categorical',
+  equalValueRanges = 'equalValueRanges',
+  equalFrequencies = 'equalFrequencies',
+  customBreaks = 'customBreaks',
+}

package/{lib/geographies/config/layers/attribute-data-layer/dimensions/attribute-data-bin-types.d.ts → src/lib/geographies/config/layers/attribute-data-layer/dimensions/attribute-data-bin-types.ts}

@@ -1,8 +1,15 @@
-import { BinStrategy } from './attribute-data-bin-enums';
-import { CategoricalBinsAttributeDataDimension } from './categorical-bins/categorical-bins';
-import { CustomBreaksBinsAttributeDataDimension } from './custom-breaks/custom-breaks-bins';
-import { EqualFrequenciesAttributeDataDimension } from './equal-frequencies-bins/equal-frequencies-bins';
-import { EqualValueRangesAttributeDataDimension } from './equal-value-ranges-bins/equal-value-ranges-bins';
-import { NoBinsAttributeDataDimension } from './no-bins/no-bins';
-export type VicNumberValuesBin = Omit<BinStrategy, BinStrategy.categorical>;
-export type VicAttributeDataDimensionConfig<Datum> = CategoricalBinsAttributeDataDimension<Datum> | NoBinsAttributeDataDimension<Datum> | EqualValueRangesAttributeDataDimension<Datum> | EqualFrequenciesAttributeDataDimension<Datum> | CustomBreaksBinsAttributeDataDimension<Datum>;
+import { BinStrategy } from './attribute-data-bin-enums';
+import { CategoricalBinsAttributeDataDimension } from './categorical-bins/categorical-bins';
+import { CustomBreaksBinsAttributeDataDimension } from './custom-breaks/custom-breaks-bins';
+import { EqualFrequenciesAttributeDataDimension } from './equal-frequencies-bins/equal-frequencies-bins';
+import { EqualValueRangesAttributeDataDimension } from './equal-value-ranges-bins/equal-value-ranges-bins';
+import { NoBinsAttributeDataDimension } from './no-bins/no-bins';
+
+export type VicNumberValuesBin = Omit<BinStrategy, BinStrategy.categorical>;
+
+export type VicAttributeDataDimensionConfig<Datum> =
+  | CategoricalBinsAttributeDataDimension<Datum>
+  | NoBinsAttributeDataDimension<Datum>
+  | EqualValueRangesAttributeDataDimension<Datum>
+  | EqualFrequenciesAttributeDataDimension<Datum>
+  | CustomBreaksBinsAttributeDataDimension<Datum>;

package/src/lib/geographies/config/layers/attribute-data-layer/dimensions/calculated-bins/calculated-bins-builder.ts

@@ -0,0 +1,18 @@
+import { AttributeDataDimensionBuilder } from '../attribute-data/attribute-data-dimension-builder';
+
+export abstract class CalculatedBinsAttributeDataDimensionBuilder<
+  Datum,
+  RangeValue extends string | number = string,
+> extends AttributeDataDimensionBuilder<Datum, number, RangeValue> {
+  protected _formatSpecifier: string;
+
+  /**
+   * OPTIONAL. Sets a format specifier that will be applied to the value of this dimension using D3 format for display purposes.
+   *
+   * For example, this will format data values shown in a tooltip
+   */
+  formatSpecifier(formatSpecifier: string): this {
+    this._formatSpecifier = formatSpecifier;
+    return this;
+  }
+}

package/src/lib/geographies/config/layers/attribute-data-layer/dimensions/calculated-bins/calculated-bins-options.ts

@@ -0,0 +1,8 @@
+import { AttributeDataDimensionOptions } from '../attribute-data/attribute-data-dimension-options';
+
+export interface CalculatedBinsAttributeDataDimensionOptions<
+  Datum,
+  RangeValue extends string | number = string,
+> extends AttributeDataDimensionOptions<Datum, number, RangeValue> {
+  formatSpecifier: string;
+}

package/src/lib/geographies/config/layers/attribute-data-layer/dimensions/calculated-bins/calculated-bins.spec.ts

@@ -0,0 +1,60 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { interpolateLab } from 'd3';
+import { CalculatedBinsAttributeDataDimension } from './calculated-bins';
+
+class ConcreteCalculatedBins extends CalculatedBinsAttributeDataDimension<
+  any,
+  string
+> {
+  protected override setDomain(): void {
+    return;
+  }
+  override getScale() {
+    return;
+  }
+  override setPropertiesFromData(): void {
+    return;
+  }
+}
+
+describe('CalculatedRangeBinsAttributeDataDimension', () => {
+  let dimension: ConcreteCalculatedBins;
+  beforeEach(() => {
+    dimension = new ConcreteCalculatedBins('number');
+  });
+  describe('integration: setRange', () => {
+    it('sets the range to the correct values/length', () => {
+      (dimension as any).calculatedNumBins = 3;
+      dimension.range = ['red', 'blue', 'yellow', 'green'];
+      dimension.interpolator = interpolateLab;
+      (dimension as any).setRange();
+      expect(dimension.range.length).toEqual(3);
+    });
+  });
+  describe('shouldCalculateBinColors', () => {
+    it('returns true when numBins is greater than 1 and colors length is not equal to numBins - colors are fewer', () => {
+      expect((dimension as any).shouldCalculateBinColors(2, ['red'])).toBe(
+        true
+      );
+    });
+    it('returns true when numBins is greater than 1 and colors length is not equal to numBins - colors are greater', () => {
+      expect(
+        (dimension as any).shouldCalculateBinColors(2, [
+          'red',
+          'blue',
+          'yellow',
+        ])
+      ).toBe(true);
+    });
+    it('returns false when numBins is 1', () => {
+      expect((dimension as any).shouldCalculateBinColors(1, ['red'])).toBe(
+        false
+      );
+    });
+    it('returns false when colors length is equal to numBins', () => {
+      expect(
+        (dimension as any).shouldCalculateBinColors(2, ['red', 'blue'])
+      ).toBe(false);
+    });
+  });
+});

package/src/lib/geographies/config/layers/attribute-data-layer/dimensions/calculated-bins/calculated-bins.ts

@@ -0,0 +1,34 @@
+import { extent, range, scaleLinear } from 'd3';
+import { AttributeDataDimension } from '../attribute-data/attribute-data-dimension';
+
+export abstract class CalculatedBinsAttributeDataDimension<
+  Datum,
+  RangeValue extends string | number = string,
+> extends AttributeDataDimension<Datum, number, RangeValue> {
+  protected calculatedNumBins: number;
+  readonly formatSpecifier: string;
+
+  protected setRange(): void {
+    if (this.shouldCalculateBinColors(this.calculatedNumBins, this.range)) {
+      const binIndicies = range(this.calculatedNumBins);
+      this.range = binIndicies.map((i) =>
+        this.getColorGenerator(binIndicies)(i)
+      );
+    }
+  }
+
+  private shouldCalculateBinColors(
+    numBins: number,
+    range: RangeValue[]
+  ): boolean {
+    return numBins > 1 && range.length !== numBins;
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  private getColorGenerator(binIndicies: number[]): any {
+    return scaleLinear<RangeValue>()
+      .domain(extent(binIndicies))
+      .range(this.range)
+      .interpolate(this.interpolator);
+  }
+}

package/src/lib/geographies/config/layers/attribute-data-layer/dimensions/categorical-bins/categorical-bins-builder.ts

@@ -0,0 +1,46 @@
+import { safeAssign } from '@mathstack/app-kit';
+import { scaleOrdinal } from 'd3';
+import { AttributeDataDimensionBuilder } from '../attribute-data/attribute-data-dimension-builder';
+import { CategoricalBinsAttributeDataDimension } from './categorical-bins';
+
+const DEFAULT = {
+  _nullColor: 'whitesmoke',
+  _range: ['white', 'lightslategray'],
+  _scale: scaleOrdinal,
+  _valueAccessor: () => '',
+};
+
+export class CategoricalBinsBuilder<
+  Datum,
+  RangeValue extends string | number = string,
+> extends AttributeDataDimensionBuilder<Datum, RangeValue> {
+  private _domain: string[];
+
+  constructor() {
+    super();
+    safeAssign(this, DEFAULT);
+  }
+
+  /**
+   * OPTIONAL. Sets the domain of the scale. If not set, the domain will be inferred from the data.
+   */
+  domain(domain: string[]): this {
+    this._domain = domain;
+    return this;
+  }
+
+  /**
+   * @internal This method is not intended to be used by consumers of this library.
+   */
+  _build(): CategoricalBinsAttributeDataDimension<Datum, RangeValue> {
+    return new CategoricalBinsAttributeDataDimension({
+      domain: this._domain,
+      formatFunction: this._formatFunction,
+      interpolator: this._interpolator,
+      nullColor: this._nullColor,
+      range: this._range,
+      scale: this._scale,
+      valueAccessor: this._valueAccessor,
+    });
+  }
+}

package/src/lib/geographies/config/layers/attribute-data-layer/dimensions/categorical-bins/categorical-bins-options.ts

@@ -0,0 +1,8 @@
+import { AttributeDataDimensionOptions } from '../attribute-data/attribute-data-dimension-options';
+
+export interface CategoricalBinsOptions<
+  Datum,
+  RangeValue extends string | number = string,
+> extends AttributeDataDimensionOptions<Datum, RangeValue> {
+  domain: string[];
+}