@flowmap.gl/data 8.0.0-alpha.2 → 8.0.0-alpha.6

package/src/{FlowMapSelectors.ts → FlowmapSelectors.ts}

@@ -44,8 +44,8 @@ import getColors, {
   isDiffColors,
   isDiffColorsRGBA,
 } from './colors';
-import FlowMapAggregateAccessors from './FlowMapAggregateAccessors';
-import {FlowMapState} from './FlowMapState';
+import FlowmapAggregateAccessors from './FlowmapAggregateAccessors';
+import {FlowmapState} from './FlowmapState';
 import {
   getTimeGranularityByKey,
   getTimeGranularityByOrder,
@@ -60,80 +60,85 @@ import {
   FlowAccessors,
   FlowCirclesLayerAttributes,
   FlowLinesLayerAttributes,
-  FlowMapData,
-  FlowMapDataAccessors,
+  FlowmapData,
+  FlowmapDataAccessors,
   isCluster,
   isLocationClusterNode,
   LayersData,
   LocationFilterMode,
   LocationTotals,
 } from './types';
-import {flatMap} from './util';
 
 const MAX_CLUSTER_ZOOM_LEVEL = 20;
-const NUMBER_OF_FLOWS_TO_DISPLAY = 5000;
 type KDBushTree = any;
 
 export type Selector<L, F, T> = ParametricSelector<
-  FlowMapState,
-  FlowMapData<L, F>,
+  FlowmapState,
+  FlowmapData<L, F>,
   T
 >;
 
-export default class FlowMapSelectors<L, F> {
-  accessors: FlowMapAggregateAccessors<L, F>;
+export default class FlowmapSelectors<L, F> {
+  accessors: FlowmapAggregateAccessors<L, F>;
 
-  constructor(accessors: FlowMapDataAccessors<L, F>) {
-    this.accessors = new FlowMapAggregateAccessors(accessors);
+  constructor(accessors: FlowmapDataAccessors<L, F>) {
+    this.accessors = new FlowmapAggregateAccessors(accessors);
     this.setAccessors(accessors);
   }
 
-  setAccessors(accessors: FlowMapDataAccessors<L, F>) {
-    this.accessors = new FlowMapAggregateAccessors(accessors);
+  setAccessors(accessors: FlowmapDataAccessors<L, F>) {
+    this.accessors = new FlowmapAggregateAccessors(accessors);
   }
 
-  getFetchedFlows = (state: FlowMapState, props: FlowMapData<L, F>) =>
+  getFetchedFlows = (state: FlowmapState, props: FlowmapData<L, F>) =>
     props.flows;
-  getFetchedLocations = (state: FlowMapState, props: FlowMapData<L, F>) =>
+  getFetchedLocations = (state: FlowmapState, props: FlowmapData<L, F>) =>
     props.locations;
-  getSelectedLocations = (state: FlowMapState, props: FlowMapData<L, F>) =>
+  getMaxTopFlowsDisplayNum = (state: FlowmapState, props: FlowmapData<L, F>) =>
+    state.settingsState.maxTopFlowsDisplayNum;
+  getSelectedLocations = (state: FlowmapState, props: FlowmapData<L, F>) =>
     state.filterState.selectedLocations;
-  getLocationFilterMode = (state: FlowMapState, props: FlowMapData<L, F>) =>
+  getLocationFilterMode = (state: FlowmapState, props: FlowmapData<L, F>) =>
     state.filterState.locationFilterMode;
-  getClusteringEnabled = (state: FlowMapState, props: FlowMapData<L, F>) =>
+  getClusteringEnabled = (state: FlowmapState, props: FlowmapData<L, F>) =>
     state.settingsState.clusteringEnabled;
-  getLocationTotalsEnabled = (state: FlowMapState, props: FlowMapData<L, F>) =>
+  getLocationTotalsEnabled = (state: FlowmapState, props: FlowmapData<L, F>) =>
     state.settingsState.locationTotalsEnabled;
-  getZoom = (state: FlowMapState, props: FlowMapData<L, F>) =>
+  getZoom = (state: FlowmapState, props: FlowmapData<L, F>) =>
     state.viewport.zoom;
-  getViewport = (state: FlowMapState, props: FlowMapData<L, F>) =>
+  getViewport = (state: FlowmapState, props: FlowmapData<L, F>) =>
     state.viewport;
-  getSelectedTimeRange = (state: FlowMapState, props: FlowMapData<L, F>) =>
+  getSelectedTimeRange = (state: FlowmapState, props: FlowmapData<L, F>) =>
     state.filterState.selectedTimeRange;
 
   getColorSchemeKey: Selector<L, F, string | undefined> = (
-    state: FlowMapState,
-    props: FlowMapData<L, F>,
+    state: FlowmapState,
+    props: FlowmapData<L, F>,
   ) => state.settingsState.colorScheme;
 
   getDarkMode: Selector<L, F, boolean> = (
-    state: FlowMapState,
-    props: FlowMapData<L, F>,
+    state: FlowmapState,
+    props: FlowmapData<L, F>,
   ) => state.settingsState.darkMode;
 
   getFadeEnabled: Selector<L, F, boolean> = (
-    state: FlowMapState,
-    props: FlowMapData<L, F>,
+    state: FlowmapState,
+    props: FlowmapData<L, F>,
   ) => state.settingsState.fadeEnabled;
 
+  getFadeOpacityEnabled: Selector<L, F, boolean> = (
+    state: FlowmapState,
+    props: FlowmapData<L, F>,
+  ) => state.settingsState.fadeOpacityEnabled;
+
   getFadeAmount: Selector<L, F, number> = (
-    state: FlowMapState,
-    props: FlowMapData<L, F>,
+    state: FlowmapState,
+    props: FlowmapData<L, F>,
   ) => state.settingsState.fadeAmount;
 
   getAnimate: Selector<L, F, boolean> = (
-    state: FlowMapState,
-    props: FlowMapData<L, F>,
+    state: FlowmapState,
+    props: FlowmapData<L, F>,
   ) => state.settingsState.animationEnabled;
 
   getInvalidLocationIds: Selector<L, F, string[] | undefined> = createSelector(
@@ -304,11 +309,11 @@ export default class FlowMapSelectors<L, F> {
 
       const getLocationWeight = makeLocationWeightGetter(
         flows,
-        this.accessors.getFlowMapDataAccessors(),
+        this.accessors.getFlowmapDataAccessors(),
       );
       const clusterLevels = clusterLocations(
         locations,
-        this.accessors.getFlowMapDataAccessors(),
+        this.accessors.getFlowmapDataAccessors(),
         getLocationWeight,
         {
           maxZoom: MAX_CLUSTER_ZOOM_LEVEL,
@@ -316,7 +321,7 @@ export default class FlowMapSelectors<L, F> {
       );
       const clusterIndex = buildIndex<F>(clusterLevels);
       const {getLocationName, getLocationClusterName} =
-        this.accessors.getFlowMapDataAccessors();
+        this.accessors.getFlowmapDataAccessors();
 
       // Adding meaningful names
       const getName = (id: string) => {
@@ -411,7 +416,7 @@ export default class FlowMapSelectors<L, F> {
     },
   );
 
-  getClusterZoom = (state: FlowMapState, props: FlowMapData<L, F>) => {
+  getClusterZoom = (state: FlowmapState, props: FlowmapData<L, F>) => {
     const {settingsState} = state;
     if (!settingsState.clusteringEnabled) return undefined;
     if (settingsState.clusteringAuto || settingsState.clusteringLevel == null) {
@@ -482,22 +487,23 @@ export default class FlowMapSelectors<L, F> {
     },
   );
 
-  _getFlowMapColors = createSelector(
+  _getFlowmapColors = createSelector(
     this.getDiffMode,
     this.getColorSchemeKey,
     this.getDarkMode,
     this.getFadeEnabled,
+    this.getFadeOpacityEnabled,
     this.getFadeAmount,
     this.getAnimate,
     getColors,
   );
 
-  getFlowMapColorsRGBA = createSelector(
-    this._getFlowMapColors,
-    (flowMapColors) => {
-      return isDiffColors(flowMapColors)
-        ? getDiffColorsRGBA(flowMapColors)
-        : getColorsRGBA(flowMapColors);
+  getFlowmapColorsRGBA = createSelector(
+    this._getFlowmapColors,
+    (flowmapColors) => {
+      return isDiffColors(flowmapColors)
+        ? getDiffColorsRGBA(flowmapColors)
+        : getColorsRGBA(flowmapColors);
     },
   );
 
@@ -544,12 +550,12 @@ export default class FlowMapSelectors<L, F> {
           //   : flows,
           flows,
           clusterZoom,
-          this.accessors.getFlowMapDataAccessors(),
+          this.accessors.getFlowmapDataAccessors(),
         );
       } else {
         aggregated = aggregateFlows(
           flows,
-          this.accessors.getFlowMapDataAccessors(),
+          this.accessors.getFlowmapDataAccessors(),
         );
       }
       aggregated.sort((a, b) =>
@@ -845,8 +851,8 @@ export default class FlowMapSelectors<L, F> {
   );
 
   getLocationTotalsExtent = (
-    state: FlowMapState,
-    props: FlowMapData<L, F>,
+    state: FlowmapState,
+    props: FlowmapData<L, F>,
   ): [number, number] | undefined => {
     if (state.settingsState.adaptiveScalesEnabled) {
       return this._getLocationTotalsForViewportExtent(state, props);
@@ -855,17 +861,19 @@ export default class FlowMapSelectors<L, F> {
     }
   };
 
-  getFlowsForFlowMapLayer: Selector<L, F, (F | AggregateFlow)[] | undefined> =
+  getFlowsForFlowmapLayer: Selector<L, F, (F | AggregateFlow)[] | undefined> =
     createSelector(
       this.getSortedAggregatedFilteredFlows,
       this.getLocationIdsInViewport,
       this.getSelectedLocationsSet,
       this.getLocationFilterMode,
+      this.getMaxTopFlowsDisplayNum,
       (
         flows,
         locationIdsInViewport,
         selectedLocationsSet,
         locationFilterMode,
+        maxTopFlowsDisplayNum,
       ) => {
         if (!flows || !locationIdsInViewport) return undefined;
         const picked: (F | AggregateFlow)[] = [];
@@ -892,7 +900,7 @@ export default class FlowMapSelectors<L, F> {
             }
           }
           // Only keep top
-          if (pickedCount > NUMBER_OF_FLOWS_TO_DISPLAY) break;
+          if (pickedCount > maxTopFlowsDisplayNum) break;
         }
         // assuming they are sorted in descending order,
         // we need ascending for rendering
@@ -901,11 +909,11 @@ export default class FlowMapSelectors<L, F> {
     );
 
   _getFlowMagnitudeExtent = (
-    state: FlowMapState,
-    props: FlowMapData<L, F>,
+    state: FlowmapState,
+    props: FlowmapData<L, F>,
   ): [number, number] | undefined => {
     if (state.settingsState.adaptiveScalesEnabled) {
-      const flows = this.getFlowsForFlowMapLayer(state, props);
+      const flows = this.getFlowsForFlowmapLayer(state, props);
       if (flows) {
         const rv = extent(flows, this.accessors.getFlowMagnitude);
         return rv[0] !== undefined && rv[1] !== undefined ? rv : undefined;
@@ -1027,7 +1035,7 @@ export default class FlowMapSelectors<L, F> {
       },
     );
 
-  getLocationsForFlowMapLayer: Selector<
+  getLocationsForFlowmapLayer: Selector<
     L,
     F,
     Array<L | ClusterNode> | undefined
@@ -1057,11 +1065,11 @@ export default class FlowMapSelectors<L, F> {
     },
   );
 
-  getLocationsForFlowMapLayerById: Selector<
+  getLocationsForFlowmapLayerById: Selector<
     L,
     F,
     Map<string, L | ClusterNode> | undefined
-  > = createSelector(this.getLocationsForFlowMapLayer, (locations) => {
+  > = createSelector(this.getLocationsForFlowmapLayer, (locations) => {
     if (!locations) return undefined;
     return locations.reduce(
       (m, d) => (m.set(this.accessors.getLocationId(d), d), m),
@@ -1070,10 +1078,10 @@ export default class FlowMapSelectors<L, F> {
   });
 
   getLayersData: Selector<L, F, LayersData> = createSelector(
-    this.getLocationsForFlowMapLayer,
-    this.getFlowsForFlowMapLayer,
-    this.getFlowMapColorsRGBA,
-    this.getLocationsForFlowMapLayerById,
+    this.getLocationsForFlowmapLayer,
+    this.getFlowsForFlowmapLayer,
+    this.getFlowmapColorsRGBA,
+    this.getLocationsForFlowmapLayerById,
     this.getLocationIdsInViewport,
     this.getInCircleSizeGetter,
     this.getOutCircleSizeGetter,
@@ -1082,7 +1090,7 @@ export default class FlowMapSelectors<L, F> {
     (
       locations,
       flows,
-      flowMapColors,
+      flowmapColors,
       locationsById,
       locationIdsInViewport,
       getInCircleSize,
@@ -1093,7 +1101,7 @@ export default class FlowMapSelectors<L, F> {
       return this._prepareLayersData(
         locations,
         flows,
-        flowMapColors,
+        flowmapColors,
         locationsById,
         locationIdsInViewport,
         getInCircleSize,
@@ -1104,11 +1112,11 @@ export default class FlowMapSelectors<L, F> {
     },
   );
 
-  prepareLayersData(state: FlowMapState, props: FlowMapData<L, F>): LayersData {
-    const locations = this.getLocationsForFlowMapLayer(state, props) || [];
-    const flows = this.getFlowsForFlowMapLayer(state, props) || [];
-    const flowMapColors = this.getFlowMapColorsRGBA(state, props);
-    const locationsById = this.getLocationsForFlowMapLayerById(state, props);
+  prepareLayersData(state: FlowmapState, props: FlowmapData<L, F>): LayersData {
+    const locations = this.getLocationsForFlowmapLayer(state, props) || [];
+    const flows = this.getFlowsForFlowmapLayer(state, props) || [];
+    const flowmapColors = this.getFlowmapColorsRGBA(state, props);
+    const locationsById = this.getLocationsForFlowmapLayerById(state, props);
     const locationIdsInViewport = this.getLocationIdsInViewport(state, props);
     const getInCircleSize = this.getInCircleSizeGetter(state, props);
     const getOutCircleSize = this.getOutCircleSizeGetter(state, props);
@@ -1116,7 +1124,7 @@ export default class FlowMapSelectors<L, F> {
     return this._prepareLayersData(
       locations,
       flows,
-      flowMapColors,
+      flowmapColors,
       locationsById,
       locationIdsInViewport,
       getInCircleSize,
@@ -1129,7 +1137,7 @@ export default class FlowMapSelectors<L, F> {
   _prepareLayersData(
     locations: (L | ClusterNode)[] | undefined,
     flows: (F | AggregateFlow)[] | undefined,
-    flowMapColors: DiffColorsRGBA | ColorsRGBA,
+    flowmapColors: DiffColorsRGBA | ColorsRGBA,
     locationsById: Map<string, L | ClusterNode> | undefined,
     locationIdsInViewport: Set<string> | undefined,
     getInCircleSize: (locationId: string) => number,
@@ -1157,67 +1165,100 @@ export default class FlowMapSelectors<L, F> {
       number,
     ];
     const flowColorScale = getFlowColorScale(
-      flowMapColors,
+      flowmapColors,
       flowMagnitudeExtent,
       false,
     );
 
-    const circlePositions = new Float32Array(
-      flatMap(locations, getLocationCentroid),
+    // Using a generator here helps to avoid creating intermediary arrays
+    const circlePositions = Float32Array.from(
+      (function* () {
+        for (const location of locations) {
+          // yield* effectively works as flatMap here
+          yield* getLocationCentroid(location);
+        }
+      })(),
     );
 
     // TODO: diff mode
-    const circleColor = isDiffColorsRGBA(flowMapColors)
-      ? flowMapColors.positive.locationCircles.inner
-      : flowMapColors.locationCircles.inner;
-
-    const circleColors = new Uint8Array(flatMap(locations, (d) => circleColor));
-    const inCircleRadii = new Float32Array(
-      locations.map((loc) => {
-        const id = getLocationId(loc);
-        return locationIdsInViewport?.has(id) ? getInCircleSize(id) : 1.0;
-      }),
+    const circleColor = isDiffColorsRGBA(flowmapColors)
+      ? flowmapColors.positive.locationCircles.inner
+      : flowmapColors.locationCircles.inner;
+
+    const circleColors = Uint8Array.from(
+      (function* () {
+        for (const location of locations) {
+          yield* circleColor;
+        }
+      })(),
+    );
+
+    const inCircleRadii = Float32Array.from(
+      (function* () {
+        for (const location of locations) {
+          const id = getLocationId(location);
+          yield locationIdsInViewport?.has(id) ? getInCircleSize(id) : 1.0;
+        }
+      })(),
     );
-    const outCircleRadii = new Float32Array(
-      locations.map((loc) => {
-        const id = getLocationId(loc);
-        return locationIdsInViewport?.has(id) ? getOutCircleSize(id) : 1.0;
-      }),
+    const outCircleRadii = Float32Array.from(
+      (function* () {
+        for (const location of locations) {
+          const id = getLocationId(location);
+          yield locationIdsInViewport?.has(id) ? getOutCircleSize(id) : 1.0;
+        }
+      })(),
     );
 
-    const sourcePositions = new Float32Array(
-      flatMap(flows, (d: F | AggregateFlow) => getCentroid(getFlowOriginId(d))),
+    const sourcePositions = Float32Array.from(
+      (function* () {
+        for (const flow of flows) {
+          yield* getCentroid(getFlowOriginId(flow));
+        }
+      })(),
     );
-    const targetPositions = new Float32Array(
-      flatMap(flows, (d: F | AggregateFlow) => getCentroid(getFlowDestId(d))),
+    const targetPositions = Float32Array.from(
+      (function* () {
+        for (const flow of flows) {
+          yield* getCentroid(getFlowDestId(flow));
+        }
+      })(),
     );
-    const thicknesses = new Float32Array(
-      flows.map((d: F | AggregateFlow) =>
-        flowThicknessScale ? flowThicknessScale(getFlowMagnitude(d)) || 0 : 0,
-      ),
+    const thicknesses = Float32Array.from(
+      (function* () {
+        for (const flow of flows) {
+          yield flowThicknessScale
+            ? flowThicknessScale(getFlowMagnitude(flow)) || 0
+            : 0;
+        }
+      })(),
     );
-    const endpointOffsets = new Float32Array(
-      flatMap(flows, (d: F | AggregateFlow) => {
-        const originId = getFlowOriginId(d);
-        const destId = getFlowDestId(d);
-        return [
-          Math.max(getInCircleSize(originId), getOutCircleSize(originId)),
-          Math.max(getInCircleSize(destId), getOutCircleSize(destId)),
-        ];
-      }),
+    const endpointOffsets = Float32Array.from(
+      (function* () {
+        for (const flow of flows) {
+          const originId = getFlowOriginId(flow);
+          const destId = getFlowDestId(flow);
+          yield Math.max(getInCircleSize(originId), getOutCircleSize(originId));
+          yield Math.max(getInCircleSize(destId), getOutCircleSize(destId));
+        }
+      })(),
     );
-    const flowLineColors = new Uint8Array(
-      flatMap(flows, (f: F | AggregateFlow) =>
-        flowColorScale(getFlowMagnitude(f)),
-      ),
+    const flowLineColors = Uint8Array.from(
+      (function* () {
+        for (const flow of flows) {
+          yield* flowColorScale(getFlowMagnitude(flow));
+        }
+      })(),
     );
 
     const staggeringValues = animationEnabled
-      ? new Float32Array(
-          flows.map((f: F | AggregateFlow) =>
-            // @ts-ignore
-            new alea(`${getFlowOriginId(f)}-${getFlowDestId(f)}`)(),
-          ),
+      ? Float32Array.from(
+          (function* () {
+            for (const f of flows) {
+              // @ts-ignore
+              yield new alea(`${getFlowOriginId(f)}-${getFlowDestId(f)}`)();
+            }
+          })(),
         )
       : undefined;
 

package/src/{FlowMapState.ts → FlowmapState.ts}

@@ -9,6 +9,7 @@ export interface FilterState {
 export interface SettingsState {
   animationEnabled: boolean;
   fadeEnabled: boolean;
+  fadeOpacityEnabled: boolean;
   locationTotalsEnabled: boolean;
   adaptiveScalesEnabled: boolean;
   clusteringEnabled: boolean;
@@ -17,9 +18,11 @@ export interface SettingsState {
   darkMode: boolean;
   fadeAmount: number;
   colorScheme: string | undefined;
+  highlightColor: string;
+  maxTopFlowsDisplayNum: number;
 }
 
-export interface FlowMapState {
+export interface FlowmapState {
   filterState: FilterState;
   settingsState: SettingsState;
   viewport: ViewportProps;

package/src/colors.ts

@@ -26,9 +26,9 @@ import {
 } from 'd3-scale-chromatic';
 import {range} from 'd3-array';
 import {scalePow, scaleSequential, scaleSequentialPow} from 'd3-scale';
-import {interpolateRgbBasis} from 'd3-interpolate';
-import {color as d3color, hcl} from 'd3-color';
-import {SettingsState} from './FlowMapState';
+import {interpolateBasis, interpolateRgbBasis} from 'd3-interpolate';
+import {color as d3color, hcl, rgb as colorRgb} from 'd3-color';
+import {SettingsState} from './FlowmapState';
 
 const DEFAULT_OUTLINE_COLOR = '#fff';
 const DEFAULT_DIMMED_OPACITY = 0.4;
@@ -100,7 +100,7 @@ const getColorSteps = (interpolate: (x: number) => string) =>
     .reverse();
 
 const FLOW_MIN_COLOR = 'rgba(240,240,240,0.5)';
-export const BLUES_PALE = [FLOW_MIN_COLOR, ColorScheme.primary];
+export const GRAYISH = [FLOW_MIN_COLOR, ColorScheme.primary];
 const schemeBluYl = [
   '#f7feae',
   '#b7e6a5',
@@ -134,7 +134,6 @@ export const schemeTeal = [
 export const DEFAULT_COLOR_SCHEME = schemeTeal;
 export const COLOR_SCHEMES: {[key: string]: string[]} = {
   Blues: asScheme(schemeBlues),
-  BluesPale: BLUES_PALE,
   BluGrn: [
     '#c4e6c3',
     '#96d2a4',
@@ -186,6 +185,7 @@ export const COLOR_SCHEMES: {[key: string]: string[]} = {
   ],
   Emrld: schemeEmrld,
   GnBu: asScheme(schemeGnBu),
+  Grayish: GRAYISH,
   Greens: asScheme(schemeGreens),
   Greys: asScheme(schemeGreys),
   Inferno: getColorSteps(interpolateInferno),
@@ -330,7 +330,7 @@ const diffColors: DiffColors = {
   outlineColor: 'rgb(230,233,237)',
 };
 
-export function getFlowMapColors(
+export function getFlowmapColors(
   settingsState: SettingsState,
 ): Colors | DiffColors {
   return getColors(
@@ -338,6 +338,7 @@ export function getFlowMapColors(
     settingsState.colorScheme,
     settingsState.darkMode,
     settingsState.fadeEnabled,
+    settingsState.fadeOpacityEnabled,
     settingsState.fadeAmount,
     settingsState.animationEnabled,
   );
@@ -348,6 +349,7 @@ export function getColors(
   schemeKey: string | undefined,
   darkMode: boolean,
   fadeEnabled: boolean,
+  fadeOpacityEnabled: boolean,
   fadeAmount: number,
   animate: boolean,
 ): Colors | DiffColors {
@@ -390,13 +392,14 @@ export function getColors(
       scheme = indices.map(
         (c, i) => {
           const color = colorScale(i);
-          const alpha = amount(i);
-          if (color == null || alpha == null) return '#000';
+          const a = amount(i);
+          if (color == null || a == null) return '#000';
           const col = hcl(color);
-          col.l = darkMode
-            ? col.l - col.l * alpha
-            : col.l + (100 - col.l) * alpha;
-          col.c = col.c - col.c * (alpha / 4);
+          col.l = darkMode ? col.l - col.l * a : col.l + (100 - col.l) * a;
+          col.c = col.c - col.c * (a / 4);
+          if (fadeOpacityEnabled) {
+            col.opacity = col.opacity * (1.0 - a);
+          }
           return col.toString();
         },
         // interpolateRgbBasis([colorScale(i), darkMode ? '#000' : '#fff'])(amount(i))
@@ -417,15 +420,46 @@ export function getColors(
   };
 }
 
+function interpolateRgbaBasis(colors: string[]) {
+  const spline = interpolateBasis;
+  const n = colors.length;
+  let r: any = new Array(n),
+    g: any = new Array(n),
+    b: any = new Array(n),
+    opacity: any = new Array(n),
+    i,
+    color: any;
+  for (i = 0; i < n; ++i) {
+    color = colorRgb(colors[i]);
+    r[i] = color.r || 0;
+    g[i] = color.g || 0;
+    b[i] = color.b || 0;
+    opacity[i] = color.opacity || 0;
+  }
+  r = spline(r);
+  g = spline(g);
+  b = spline(b);
+  opacity = spline(opacity);
+  // color.opacity = 1;
+  return function (t: number) {
+    color.r = r(t);
+    color.g = g(t);
+    color.b = b(t);
+    color.opacity = opacity(t);
+    return color + '';
+  };
+}
+
 export function createFlowColorScale(
   domain: [number, number],
   scheme: string[],
   animate: boolean | undefined,
 ): ColorScale {
-  const scale = scaleSequentialPow(interpolateRgbBasis(scheme))
+  const scale = scaleSequentialPow(interpolateRgbaBasis(scheme))
     // @ts-ignore
     .exponent(animate ? 1 / 2 : 1 / 3)
     .domain(domain);
+
   return (value: number) => colorAsRgba(scale(value));
 }
 
@@ -516,7 +550,7 @@ export interface LocationCircleColors {
   incoming?: string;
   highlighted?: string;
   empty?: string;
-  emptyOutline?: string;
+  outlineEmptyMix?: number;
 }
 
 export interface LocationAreaColors {
@@ -563,7 +597,7 @@ export interface LocationCircleColorsRGBA {
   incoming: RGBA;
   highlighted: RGBA;
   empty: RGBA;
-  emptyOutline: RGBA;
+  outlineEmptyMix: number;
 }
 
 export interface LocationAreaColorsRGBA {
@@ -648,7 +682,7 @@ function getFlowAndCircleColors(
         flowColorHighlighted,
       ),
       empty: emptyColor,
-      emptyOutline: mixColorsRGBA(innerColor, emptyColor, 0.4),
+      outlineEmptyMix: inputColors?.locationCircles?.outlineEmptyMix ?? 0.4,
     },
   };
 }