Add mapPalette URL parameter

The mapping between the palette and the temperature anomalies can either
be computed on a per-region basis (`per-region`, default) or for a
single region (index) that is then applied to the whole dataset. Using a
single dataset as a reference makes it easier to compare temperature
anomalies of different regions by color. Otherwise, the same temperature
anomaly might be displayed in different colors for different regions.

Author: porst17

README.md

@@ -33,6 +33,11 @@ valid:
   app starts. Note that the region index is with respect to the order in the dataset.
 - `palette` (`'berkeleyEarth'`, `'edHawkins'`, default: `'edHawkins'`): Temperature anomaly color palette.
   See `/src/js/palettes.js`.
+- `mapPalette` (`'per-region'`, `<number>`, default: `'per-region'`): The temperature anomalies are mapped to the
+  palette. If `'per-region'`, compute the mapping for each regio individually. This can lead to the same temperature
+  anomalies being assigned different colors for different regions. If `<number>`, use the mapping computed for the
+  respective region in the dataset. This provides a more uniform view onto the dataset and makes it easier to compare
+  temperature anomalies of different regions by color.
 - `highContrast` (`<boolean>`, default: `false`): Invert text brightness for dark temperature anomaly colors.
 - `prevRegionKey` (`<string>`, [JS key](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values),
   default: `'ArrowLeft'`): Key that selects the previous region.

src/js/options/defaultOptions.js

@@ -15,7 +15,8 @@ export const warmingNavigator = {
   initialYear: 'random', // 'first', 'last', 'random', <number>
   initialRegion: 'random', // 'first', 'last', 'random', <number>
   palette: 'edHawkins', // see ../palettes.js
-  highContrast: false,
+  mapPalette: 'per-region', // 'per-region', <number>
+  highContrast: false, // <boolean>
 };
 
 export const keyboard = {

src/js/options/optionParsers.js

@@ -94,6 +94,7 @@ export const warmingNavigator = {
   initialYear: intOrStringsParser('first', 'last', 'random'),
   initialRegion: intOrStringsParser('first', 'last', 'random'),
   palette: paletteParser(),
+  mapPalette: intOrStringsParser('per-region'),
   highContrast: booleanParser(),
 };
 

src/js/wn/model.js

@@ -16,13 +16,23 @@ function sortedMapping(data, language) {
 }
 
 export default class Model {
-  constructor(data, minYear, maxYear, lang, sort) {
+  constructor(
+    data,
+    minYear,
+    maxYear,
+    lang,
+    sort,
+    shift = undefined,
+    scale = undefined,
+  ) {
     this.data = data;
     this.minYear = minYear;
     this.maxYear = maxYear;
     this.language = lang;
     this.sort = true;
     this.regionMapping = (sort ? sortedMapping : identityMapping)(data, lang);
+    this.shift = shift;
+    this.scale = scale;
   }
 
   _getRegion(regionIndex) {
@@ -75,7 +85,8 @@ export default class Model {
         ? region.anomalies[indexForYear]
         : null;
 
-    const { shift, scale } = region;
+    const shift = this.shift ?? region.shift;
+    const scale = this.scale ?? region.scale;
     const relativeAnomaly = anomaly === null ? null : (anomaly - shift) * scale;
 
     const uncertainty =

src/js/wn/option-processor.js

@@ -137,6 +137,7 @@ function processOther(data, options) {
     sort: options.sort,
     singleCellView: options.singleCellView,
     gridView: options.gridView,
+    mapPalette: options.mapPalette,
     highContrast: options.highContrast,
   };
 }
@@ -159,7 +160,7 @@ export default function processOptions(data, optionsNoDefaults) {
   const inputs = processInputs(options);
   const gridViewElement = processGridViewElement(options);
 
-  const { sort, highContrast } = processOther(data, options);
+  const { sort, mapPalette, highContrast } = processOther(data, options);
 
   return {
     initialRegion,
@@ -175,6 +176,7 @@ export default function processOptions(data, optionsNoDefaults) {
     gridViewElement,
 
     sort,
+    mapPalette,
     highContrast,
   };
 }

src/js/wn/warming-navigator.js

@@ -23,10 +23,27 @@ export default class WarmingNavigator {
       gridViewElement,
 
       sort,
+      mapPalette,
       highContrast,
     } = this.processedOptions;
 
-    const model = new Model(data, minYear, maxYear, language, sort);
+    const shift =
+      typeof mapPalette === 'number'
+        ? data.regions[mapPalette].shift
+        : undefined;
+    const scale =
+      typeof mapPalette === 'number'
+        ? data.regions[mapPalette].scale
+        : undefined;
+    const model = new Model(
+      data,
+      minYear,
+      maxYear,
+      language,
+      sort,
+      shift,
+      scale,
+    );
 
     const rySelector = new RYSelectorClass({
       numRegions: model.getNumRegions(),
@@ -44,6 +61,7 @@ export default class WarmingNavigator {
         rySelector,
         language,
         palette,
+        mapPalette,
         highContrast,
       );
       views.push(singleRecordView);
@@ -56,6 +74,7 @@ export default class WarmingNavigator {
         rySelector,
         language,
         palette,
+        mapPalette,
         highContrast,
       );
       views.push(gridView);