@mathstack/viz 2.0.3 → 2.2.0

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

@@ -1,119 +0,0 @@
-/* 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

@@ -1,148 +0,0 @@
-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

@@ -1,65 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

@@ -1,10 +0,0 @@
-/**
- * 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/src/lib/geographies/config/layers/attribute-data-layer/dimensions/attribute-data-bin-types.ts

@@ -1,15 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,60 +0,0 @@
-/* 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

@@ -1,34 +0,0 @@
-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

@@ -1,46 +0,0 @@
-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

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