@oiz/stzh-components 2.3.0-alpha → 2.3.0-alpha2

package/dist/cjs/stzh-chart.cjs.entry.js

@@ -5036,10 +5036,10 @@ function ribbon() {
 
 var prefix = "$";
 
-function Map$1() {}
+function Map() {}
 
-Map$1.prototype = map$1.prototype = {
-  constructor: Map$1,
+Map.prototype = map$1.prototype = {
+  constructor: Map,
   has: function(key) {
     return (prefix + key) in this;
   },
@@ -5087,10 +5087,10 @@ Map$1.prototype = map$1.prototype = {
 };
 
 function map$1(object, f) {
-  var map = new Map$1;
+  var map = new Map;
 
   // Copy constructor.
-  if (object instanceof Map$1) object.each(function(value, key) { map.set(key, value); });
+  if (object instanceof Map) object.each(function(value, key) { map.set(key, value); });
 
   // Index array by numeric index or specified key function.
   else if (Array.isArray(object)) {
@@ -5180,12 +5180,12 @@ function setMap(map, key, value) {
   map.set(key, value);
 }
 
-function Set$1() {}
+function Set() {}
 
 var proto = map$1.prototype;
 
-Set$1.prototype = set.prototype = {
-  constructor: Set$1,
+Set.prototype = set.prototype = {
+  constructor: Set,
   has: proto.has,
   add: function(value) {
     value += "";
@@ -5201,10 +5201,10 @@ Set$1.prototype = set.prototype = {
 };
 
 function set(object, f) {
-  var set = new Set$1;
+  var set = new Set;
 
   // Copy constructor.
-  if (object instanceof Set$1) object.each(function(value) { set.add(value); });
+  if (object instanceof Set) object.each(function(value) { set.add(value); });
 
   // Otherwise, assume it’s an array.
   else if (object) {
@@ -17159,945 +17159,46 @@ const d3 = /*#__PURE__*/Object.freeze({
 const require$$0 = /*@__PURE__*/_commonjsHelpers.getAugmentedNamespace(d3);
 
 var sszvis = _commonjsHelpers.createCommonjsModule(function (module, exports) {
-/*! sszvis v2.4.1, Copyright 2014-present Statistik Stadt Zürich */
+/*! sszvis v2.1.1, Copyright 2014-present Statistik Stadt Zürich */
 (function (global, factory) {
   factory(exports, require$$0) ;
 }(_commonjsHelpers.commonjsGlobal, (function (exports, d3) {
-  var d3__default = 'default' in d3 ? d3['default'] : d3;
-
-  function n(n){for(var t=arguments.length,r=Array(t>1?t-1:0),e=1;e<t;e++)r[e-1]=arguments[e];throw Error("[Immer] minified error nr: "+n+(r.length?" "+r.join(","):"")+". Find the full error at: https://bit.ly/3cXEKWf")}function t(n){return !!n&&!!n[Q]}function r(n){return !!n&&(function(n){if(!n||"object"!=typeof n)return !1;var t=Object.getPrototypeOf(n);return !t||t===Object.prototype}(n)||Array.isArray(n)||!!n[L]||!!n.constructor[L]||s(n)||v(n))}function i(n,t,r){void 0===r&&(r=!1),0===o(n)?(r?Object.keys:Z)(n).forEach((function(e){r&&"symbol"==typeof e||t(e,n[e],n);})):n.forEach((function(r,e){return t(e,r,n)}));}function o(n){var t=n[Q];return t?t.i>3?t.i-4:t.i:Array.isArray(n)?1:s(n)?2:v(n)?3:0}function u(n,t){return 2===o(n)?n.has(t):Object.prototype.hasOwnProperty.call(n,t)}function a(n,t){return 2===o(n)?n.get(t):n[t]}function f(n,t,r){var e=o(n);2===e?n.set(t,r):3===e?(n.delete(t),n.add(r)):n[t]=r;}function c(n,t){return n===t?0!==n||1/n==1/t:n!=n&&t!=t}function s(n){return X&&n instanceof Map}function v(n){return q&&n instanceof Set}function p(n){return n.o||n.t}function l(n){if(Array.isArray(n))return n.slice();var t=nn(n);delete t[Q];for(var r=Z(t),e=0;e<r.length;e++){var i=r[e],o=t[i];!1===o.writable&&(o.writable=!0,o.configurable=!0),(o.get||o.set)&&(t[i]={configurable:!0,writable:!0,enumerable:o.enumerable,value:n[i]});}return Object.create(Object.getPrototypeOf(n),t)}function d(n,e){b(n)||t(n)||!r(n)||(o(n)>1&&(n.set=n.add=n.clear=n.delete=h),Object.freeze(n),e&&i(n,(function(n,t){return d(t,!0)}),!0));}function h(){n(2);}function b(n){return null==n||"object"!=typeof n||Object.isFrozen(n)}function y(t){var r=tn[t];return r||n(19,t),r}function m(n,t){tn[n]=t;}function _(){return U}function j(n,t){t&&(y("Patches"),n.u=[],n.s=[],n.v=t);}function g(n){O(n),n.p.forEach(S),n.p=null;}function O(n){n===U&&(U=n.l);}function w(n){return U={p:[],l:U,h:n,m:!0,_:0}}function S(n){var t=n[Q];0===t.i||1===t.i?t.j():t.g=!0;}function P(t,e){e._=e.p.length;var i=e.p[0],o=void 0!==t&&t!==i;return e.h.O||y("ES5").S(e,t,o),o?(i[Q].P&&(g(e),n(4)),r(t)&&(t=M(e,t),e.l||x(e,t)),e.u&&y("Patches").M(i[Q],t,e.u,e.s)):t=M(e,i,[]),g(e),e.u&&e.v(e.u,e.s),t!==H?t:void 0}function M(n,t,r){if(b(t))return t;var e=t[Q];if(!e)return i(t,(function(i,o){return A(n,e,t,i,o,r)}),!0),t;if(e.A!==n)return t;if(!e.P)return x(n,e.t,!0),e.t;if(!e.I){e.I=!0,e.A._--;var o=4===e.i||5===e.i?e.o=l(e.k):e.o;i(3===e.i?new Set(o):o,(function(t,i){return A(n,e,o,t,i,r)})),x(n,o,!1),r&&n.u&&y("Patches").R(e,r,n.u,n.s);}return e.o}function A(e,i,o,a,c,s){if(t(c)){var v=M(e,c,s&&i&&3!==i.i&&!u(i.D,a)?s.concat(a):void 0);if(f(o,a,v),!t(v))return;e.m=!1;}if(r(c)&&!b(c)){if(!e.h.N&&e._<1)return;M(e,c),i&&i.A.l||x(e,c);}}function x(n,t,r){void 0===r&&(r=!1),n.h.N&&n.m&&d(t,r);}function z(n,t){var r=n[Q];return (r?p(r):n)[t]}function I(n,t){if(t in n)for(var r=Object.getPrototypeOf(n);r;){var e=Object.getOwnPropertyDescriptor(r,t);if(e)return e;r=Object.getPrototypeOf(r);}}function E(n){n.P||(n.P=!0,n.l&&E(n.l));}function k(n){n.o||(n.o=l(n.t));}function R(n,t,r){var e=s(t)?y("MapSet").T(t,r):v(t)?y("MapSet").F(t,r):n.O?function(n,t){var r=Array.isArray(n),e={i:r?1:0,A:t?t.A:_(),P:!1,I:!1,D:{},l:t,t:n,k:null,o:null,j:null,C:!1},i=e,o=rn;r&&(i=[e],o=en);var u=Proxy.revocable(i,o),a=u.revoke,f=u.proxy;return e.k=f,e.j=a,f}(t,r):y("ES5").J(t,r);return (r?r.A:_()).p.push(e),e}function D(e){return t(e)||n(22,e),function n(t){if(!r(t))return t;var e,u=t[Q],c=o(t);if(u){if(!u.P&&(u.i<4||!y("ES5").K(u)))return u.t;u.I=!0,e=N(t,c),u.I=!1;}else e=N(t,c);return i(e,(function(t,r){u&&a(u.t,t)===r||f(e,t,n(r));})),3===c?new Set(e):e}(e)}function N(n,t){switch(t){case 2:return new Map(n);case 3:return Array.from(n)}return l(n)}function T(){function r(n,t){var r=s[n];return r?r.enumerable=t:s[n]=r={configurable:!0,enumerable:t,get:function(){var t=this[Q];return rn.get(t,n)},set:function(t){var r=this[Q];rn.set(r,n,t);}},r}function e(n){for(var t=n.length-1;t>=0;t--){var r=n[t][Q];if(!r.P)switch(r.i){case 5:a(r)&&E(r);break;case 4:o(r)&&E(r);}}}function o(n){for(var t=n.t,r=n.k,e=Z(r),i=e.length-1;i>=0;i--){var o=e[i];if(o!==Q){var a=t[o];if(void 0===a&&!u(t,o))return !0;var f=r[o],s=f&&f[Q];if(s?s.t!==a:!c(f,a))return !0}}var v=!!t[Q];return e.length!==Z(t).length+(v?0:1)}function a(n){var t=n.k;if(t.length!==n.t.length)return !0;var r=Object.getOwnPropertyDescriptor(t,t.length-1);return !(!r||r.get)}var s={};m("ES5",{J:function(n,t){var e=Array.isArray(n),i=function(n,t){if(n){for(var e=Array(t.length),i=0;i<t.length;i++)Object.defineProperty(e,""+i,r(i,!0));return e}var o=nn(t);delete o[Q];for(var u=Z(o),a=0;a<u.length;a++){var f=u[a];o[f]=r(f,n||!!o[f].enumerable);}return Object.create(Object.getPrototypeOf(t),o)}(e,n),o={i:e?5:4,A:t?t.A:_(),P:!1,I:!1,D:{},l:t,t:n,k:i,o:null,g:!1,C:!1};return Object.defineProperty(i,Q,{value:o,writable:!0}),i},S:function(n,r,o){o?t(r)&&r[Q].A===n&&e(n.p):(n.u&&function n(t){if(t&&"object"==typeof t){var r=t[Q];if(r){var e=r.t,o=r.k,f=r.D,c=r.i;if(4===c)i(o,(function(t){t!==Q&&(void 0!==e[t]||u(e,t)?f[t]||n(o[t]):(f[t]=!0,E(r)));})),i(e,(function(n){void 0!==o[n]||u(o,n)||(f[n]=!1,E(r));}));else if(5===c){if(a(r)&&(E(r),f.length=!0),o.length<e.length)for(var s=o.length;s<e.length;s++)f[s]=!1;else for(var v=e.length;v<o.length;v++)f[v]=!0;for(var p=Math.min(o.length,e.length),l=0;l<p;l++)void 0===f[l]&&n(o[l]);}}}}(n.p[0]),e(n.p));},K:function(n){return 4===n.i?o(n):a(n)}});}var G,U,W="undefined"!=typeof Symbol&&"symbol"==typeof Symbol("x"),X="undefined"!=typeof Map,q="undefined"!=typeof Set,B="undefined"!=typeof Proxy&&void 0!==Proxy.revocable&&"undefined"!=typeof Reflect,H=W?Symbol.for("immer-nothing"):((G={})["immer-nothing"]=!0,G),L=W?Symbol.for("immer-draftable"):"__$immer_draftable",Q=W?Symbol.for("immer-state"):"__$immer_state",Z="undefined"!=typeof Reflect&&Reflect.ownKeys?Reflect.ownKeys:void 0!==Object.getOwnPropertySymbols?function(n){return Object.getOwnPropertyNames(n).concat(Object.getOwnPropertySymbols(n))}:Object.getOwnPropertyNames,nn=Object.getOwnPropertyDescriptors||function(n){var t={};return Z(n).forEach((function(r){t[r]=Object.getOwnPropertyDescriptor(n,r);})),t},tn={},rn={get:function(n,t){if(t===Q)return n;var e=p(n);if(!u(e,t))return function(n,t,r){var e,i=I(t,r);return i?"value"in i?i.value:null===(e=i.get)||void 0===e?void 0:e.call(n.k):void 0}(n,e,t);var i=e[t];return n.I||!r(i)?i:i===z(n.t,t)?(k(n),n.o[t]=R(n.A.h,i,n)):i},has:function(n,t){return t in p(n)},ownKeys:function(n){return Reflect.ownKeys(p(n))},set:function(n,t,r){var e=I(p(n),t);if(null==e?void 0:e.set)return e.set.call(n.k,r),!0;if(n.D[t]=!0,!n.P){if(c(r,z(p(n),t))&&(void 0!==r||u(n.t,t)))return !0;k(n),E(n);}return n.o[t]=r,!0},deleteProperty:function(n,t){return void 0!==z(n.t,t)||t in n.t?(n.D[t]=!1,k(n),E(n)):delete n.D[t],n.o&&delete n.o[t],!0},getOwnPropertyDescriptor:function(n,t){var r=p(n),e=Reflect.getOwnPropertyDescriptor(r,t);return e?{writable:!0,configurable:1!==n.i||"length"!==t,enumerable:e.enumerable,value:r[t]}:e},defineProperty:function(){n(11);},getPrototypeOf:function(n){return Object.getPrototypeOf(n.t)},setPrototypeOf:function(){n(12);}},en={};i(rn,(function(n,t){en[n]=function(){return arguments[0]=arguments[0][0],t.apply(this,arguments)};})),en.deleteProperty=function(t,r){return rn.deleteProperty.call(this,t[0],r)},en.set=function(t,r,e){return rn.set.call(this,t[0],r,e,t[0])};var on=function(){function e(n){this.O=B,this.N="production"!=="production","boolean"==typeof(null==n?void 0:n.useProxies)&&this.setUseProxies(n.useProxies),"boolean"==typeof(null==n?void 0:n.autoFreeze)&&this.setAutoFreeze(n.autoFreeze),this.produce=this.produce.bind(this),this.produceWithPatches=this.produceWithPatches.bind(this);}var i=e.prototype;return i.produce=function(t,e,i){if("function"==typeof t&&"function"!=typeof e){var o=e;e=t;var u=this;return function(n){var t=this;void 0===n&&(n=o);for(var r=arguments.length,i=Array(r>1?r-1:0),a=1;a<r;a++)i[a-1]=arguments[a];return u.produce(n,(function(n){var r;return (r=e).call.apply(r,[t,n].concat(i))}))}}var a;if("function"!=typeof e&&n(6),void 0!==i&&"function"!=typeof i&&n(7),r(t)){var f=w(this),c=R(this,t,void 0),s=!0;try{a=e(c),s=!1;}finally{s?g(f):O(f);}return "undefined"!=typeof Promise&&a instanceof Promise?a.then((function(n){return j(f,i),P(n,f)}),(function(n){throw g(f),n})):(j(f,i),P(a,f))}if(!t||"object"!=typeof t){if((a=e(t))===H)return;return void 0===a&&(a=t),this.N&&d(a,!0),a}n(21,t);},i.produceWithPatches=function(n,t){var r,e,i=this;return "function"==typeof n?function(t){for(var r=arguments.length,e=Array(r>1?r-1:0),o=1;o<r;o++)e[o-1]=arguments[o];return i.produceWithPatches(t,(function(t){return n.apply(void 0,[t].concat(e))}))}:[this.produce(n,t,(function(n,t){r=n,e=t;})),r,e]},i.createDraft=function(e){r(e)||n(8),t(e)&&(e=D(e));var i=w(this),o=R(this,e,void 0);return o[Q].C=!0,O(i),o},i.finishDraft=function(t,r){var e=t&&t[Q];var i=e.A;return j(i,r),P(void 0,i)},i.setAutoFreeze=function(n){this.N=n;},i.setUseProxies=function(t){t&&!B&&n(20),this.O=t;},i.applyPatches=function(n,r){var e;for(e=r.length-1;e>=0;e--){var i=r[e];if(0===i.path.length&&"replace"===i.op){n=i.value;break}}var o=y("Patches").$;return t(n)?o(n,r):this.produce(n,(function(n){return o(n,r.slice(e+1))}))},e}(),un=new on;un.produceWithPatches.bind(un);var cn=un.setAutoFreeze.bind(un);un.setUseProxies.bind(un);un.applyPatches.bind(un);var pn=un.createDraft.bind(un),ln=un.finishDraft.bind(un);
-
   /**
-   * @this {Promise}
+   * d3.selection plugin to simplify creating idempotent divs that are not
+   * recreated when rendered again.
+   *
+   * @see https://github.com/mbostock/d3/wiki/Selections
+   *
+   * @param {String} key - the name of the group
+   * @return {d3.selection}
    */
-  function finallyConstructor(callback) {
-    var constructor = this.constructor;
-    return this.then(
-      function(value) {
-        // @ts-ignore
-        return constructor.resolve(callback()).then(function() {
-          return value;
-        });
-      },
-      function(reason) {
-        // @ts-ignore
-        return constructor.resolve(callback()).then(function() {
-          // @ts-ignore
-          return constructor.reject(reason);
-        });
-      }
-    );
-  }
-
-  // Store setTimeout reference so promise-polyfill will be unaffected by
-  // other code modifying setTimeout (like sinon.useFakeTimers())
-  var setTimeoutFunc = setTimeout;
-
-  function isArray(x) {
-    return Boolean(x && typeof x.length !== 'undefined');
-  }
 
-  function noop() {}
-
-  // Polyfill for Function.prototype.bind
-  function bind(fn, thisArg) {
-    return function() {
-      fn.apply(thisArg, arguments);
-    };
-  }
-
-  /**
-   * @constructor
-   * @param {Function} fn
-   */
-  function Promise$1(fn) {
-    if (!(this instanceof Promise$1))
-      throw new TypeError('Promises must be constructed via new');
-    if (typeof fn !== 'function') throw new TypeError('not a function');
-    /** @type {!number} */
-    this._state = 0;
-    /** @type {!boolean} */
-    this._handled = false;
-    /** @type {Promise|undefined} */
-    this._value = undefined;
-    /** @type {!Array<!Function>} */
-    this._deferreds = [];
-
-    doResolve(fn, this);
-  }
-
-  function handle(self, deferred) {
-    while (self._state === 3) {
-      self = self._value;
-    }
-    if (self._state === 0) {
-      self._deferreds.push(deferred);
-      return;
-    }
-    self._handled = true;
-    Promise$1._immediateFn(function() {
-      var cb = self._state === 1 ? deferred.onFulfilled : deferred.onRejected;
-      if (cb === null) {
-        (self._state === 1 ? resolve : reject)(deferred.promise, self._value);
-        return;
-      }
-      var ret;
-      try {
-        ret = cb(self._value);
-      } catch (e) {
-        reject(deferred.promise, e);
-        return;
-      }
-      resolve(deferred.promise, ret);
+  d3.selection.prototype.selectDiv = function (key) {
+    var div = this.selectAll('[data-d3-selectdiv="' + key + '"]').data(function (d) {
+      return [d];
     });
-  }
-
-  function resolve(self, newValue) {
-    try {
-      // Promise Resolution Procedure: https://github.com/promises-aplus/promises-spec#the-promise-resolution-procedure
-      if (newValue === self)
-        throw new TypeError('A promise cannot be resolved with itself.');
-      if (
-        newValue &&
-        (typeof newValue === 'object' || typeof newValue === 'function')
-      ) {
-        var then = newValue.then;
-        if (newValue instanceof Promise$1) {
-          self._state = 3;
-          self._value = newValue;
-          finale(self);
-          return;
-        } else if (typeof then === 'function') {
-          doResolve(bind(then, newValue), self);
-          return;
-        }
-      }
-      self._state = 1;
-      self._value = newValue;
-      finale(self);
-    } catch (e) {
-      reject(self, e);
-    }
-  }
-
-  function reject(self, newValue) {
-    self._state = 2;
-    self._value = newValue;
-    finale(self);
-  }
-
-  function finale(self) {
-    if (self._state === 2 && self._deferreds.length === 0) {
-      Promise$1._immediateFn(function() {
-        if (!self._handled) {
-          Promise$1._unhandledRejectionFn(self._value);
-        }
-      });
-    }
-
-    for (var i = 0, len = self._deferreds.length; i < len; i++) {
-      handle(self, self._deferreds[i]);
-    }
-    self._deferreds = null;
-  }
-
-  /**
-   * @constructor
-   */
-  function Handler(onFulfilled, onRejected, promise) {
-    this.onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : null;
-    this.onRejected = typeof onRejected === 'function' ? onRejected : null;
-    this.promise = promise;
-  }
+    var newDiv = div.enter().append("div").attr("data-d3-selectdiv", key).style("position", "absolute");
+    return div.merge(newDiv);
+  };
 
   /**
-   * Take a potentially misbehaving resolver function and make sure
-   * onFulfilled and onRejected are only called once.
+   * d3.selection plugin to simplify creating idempotent groups that are not
+   * recreated when rendered again.
+   *
+   * @see https://github.com/mbostock/d3/wiki/Selections
    *
-   * Makes no guarantees about asynchrony.
+   * @param  {String} key The name of the group
+   * @return {d3.selection}
    */
-  function doResolve(fn, self) {
-    var done = false;
-    try {
-      fn(
-        function(value) {
-          if (done) return;
-          done = true;
-          resolve(self, value);
-        },
-        function(reason) {
-          if (done) return;
-          done = true;
-          reject(self, reason);
-        }
-      );
-    } catch (ex) {
-      if (done) return;
-      done = true;
-      reject(self, ex);
-    }
-  }
 
-  Promise$1.prototype['catch'] = function(onRejected) {
-    return this.then(null, onRejected);
-  };
-
-  Promise$1.prototype.then = function(onFulfilled, onRejected) {
-    // @ts-ignore
-    var prom = new this.constructor(noop);
-
-    handle(this, new Handler(onFulfilled, onRejected, prom));
-    return prom;
-  };
-
-  Promise$1.prototype['finally'] = finallyConstructor;
-
-  Promise$1.all = function(arr) {
-    return new Promise$1(function(resolve, reject) {
-      if (!isArray(arr)) {
-        return reject(new TypeError('Promise.all accepts an array'));
-      }
-
-      var args = Array.prototype.slice.call(arr);
-      if (args.length === 0) return resolve([]);
-      var remaining = args.length;
-
-      function res(i, val) {
-        try {
-          if (val && (typeof val === 'object' || typeof val === 'function')) {
-            var then = val.then;
-            if (typeof then === 'function') {
-              then.call(
-                val,
-                function(val) {
-                  res(i, val);
-                },
-                reject
-              );
-              return;
-            }
-          }
-          args[i] = val;
-          if (--remaining === 0) {
-            resolve(args);
-          }
-        } catch (ex) {
-          reject(ex);
-        }
-      }
-
-      for (var i = 0; i < args.length; i++) {
-        res(i, args[i]);
-      }
-    });
-  };
-
-  Promise$1.resolve = function(value) {
-    if (value && typeof value === 'object' && value.constructor === Promise$1) {
-      return value;
-    }
-
-    return new Promise$1(function(resolve) {
-      resolve(value);
-    });
-  };
-
-  Promise$1.reject = function(value) {
-    return new Promise$1(function(resolve, reject) {
-      reject(value);
-    });
-  };
-
-  Promise$1.race = function(arr) {
-    return new Promise$1(function(resolve, reject) {
-      if (!isArray(arr)) {
-        return reject(new TypeError('Promise.race accepts an array'));
-      }
-
-      for (var i = 0, len = arr.length; i < len; i++) {
-        Promise$1.resolve(arr[i]).then(resolve, reject);
-      }
-    });
-  };
-
-  // Use polyfill for setImmediate for performance gains
-  Promise$1._immediateFn =
-    // @ts-ignore
-    (typeof setImmediate === 'function' &&
-      function(fn) {
-        // @ts-ignore
-        setImmediate(fn);
-      }) ||
-    function(fn) {
-      setTimeoutFunc(fn, 0);
-    };
-
-  Promise$1._unhandledRejectionFn = function _unhandledRejectionFn(err) {
-    if (typeof console !== 'undefined' && console) {
-      console.warn('Possible Unhandled Promise Rejection:', err); // eslint-disable-line no-console
-    }
-  };
-
-  /** @suppress {undefinedVars} */
-  var globalNS = (function() {
-    // the only reliable means to get the global object is
-    // `Function('return this')()`
-    // However, this causes CSP violations in Chrome apps.
-    if (typeof self !== 'undefined') {
-      return self;
-    }
-    if (typeof window !== 'undefined') {
-      return window;
-    }
-    if (typeof _commonjsHelpers.commonjsGlobal !== 'undefined') {
-      return _commonjsHelpers.commonjsGlobal;
-    }
-    throw new Error('unable to locate global object');
-  })();
-
-  if (!('Promise' in globalNS)) {
-    globalNS['Promise'] = Promise$1;
-  } else if (!globalNS.Promise.prototype['finally']) {
-    globalNS.Promise.prototype['finally'] = finallyConstructor;
-  }
-
-  var global$1 = (function(self) {
-    return self
-    // eslint-disable-next-line no-invalid-this
-  })(typeof self !== 'undefined' ? self : window);
-  var support = {
-    searchParams: 'URLSearchParams' in global$1,
-    iterable: 'Symbol' in global$1 && 'iterator' in Symbol,
-    blob:
-      'FileReader' in global$1 &&
-      'Blob' in global$1 &&
-      (function() {
-        try {
-          new Blob();
-          return true
-        } catch (e) {
-          return false
-        }
-      })(),
-    formData: 'FormData' in global$1,
-    arrayBuffer: 'ArrayBuffer' in global$1
-  };
-
-  function isDataView(obj) {
-    return obj && DataView.prototype.isPrototypeOf(obj)
-  }
-
-  if (support.arrayBuffer) {
-    var viewClasses = [
-      '[object Int8Array]',
-      '[object Uint8Array]',
-      '[object Uint8ClampedArray]',
-      '[object Int16Array]',
-      '[object Uint16Array]',
-      '[object Int32Array]',
-      '[object Uint32Array]',
-      '[object Float32Array]',
-      '[object Float64Array]'
-    ];
-
-    var isArrayBufferView =
-      ArrayBuffer.isView ||
-      function(obj) {
-        return obj && viewClasses.indexOf(Object.prototype.toString.call(obj)) > -1
-      };
-  }
-
-  function normalizeName(name) {
-    if (typeof name !== 'string') {
-      name = String(name);
-    }
-    if (/[^a-z0-9\-#$%&'*+.^_`|~!]/i.test(name) || name === '') {
-      throw new TypeError('Invalid character in header field name')
-    }
-    return name.toLowerCase()
-  }
-
-  function normalizeValue(value) {
-    if (typeof value !== 'string') {
-      value = String(value);
-    }
-    return value
-  }
-
-  // Build a destructive iterator for the value list
-  function iteratorFor(items) {
-    var iterator = {
-      next: function() {
-        var value = items.shift();
-        return {done: value === undefined, value: value}
-      }
-    };
-
-    if (support.iterable) {
-      iterator[Symbol.iterator] = function() {
-        return iterator
-      };
-    }
-
-    return iterator
-  }
-
-  function Headers(headers) {
-    this.map = {};
-
-    if (headers instanceof Headers) {
-      headers.forEach(function(value, name) {
-        this.append(name, value);
-      }, this);
-    } else if (Array.isArray(headers)) {
-      headers.forEach(function(header) {
-        this.append(header[0], header[1]);
-      }, this);
-    } else if (headers) {
-      Object.getOwnPropertyNames(headers).forEach(function(name) {
-        this.append(name, headers[name]);
-      }, this);
-    }
-  }
-
-  Headers.prototype.append = function(name, value) {
-    name = normalizeName(name);
-    value = normalizeValue(value);
-    var oldValue = this.map[name];
-    this.map[name] = oldValue ? oldValue + ', ' + value : value;
-  };
-
-  Headers.prototype['delete'] = function(name) {
-    delete this.map[normalizeName(name)];
-  };
-
-  Headers.prototype.get = function(name) {
-    name = normalizeName(name);
-    return this.has(name) ? this.map[name] : null
-  };
-
-  Headers.prototype.has = function(name) {
-    return this.map.hasOwnProperty(normalizeName(name))
-  };
-
-  Headers.prototype.set = function(name, value) {
-    this.map[normalizeName(name)] = normalizeValue(value);
-  };
-
-  Headers.prototype.forEach = function(callback, thisArg) {
-    for (var name in this.map) {
-      if (this.map.hasOwnProperty(name)) {
-        callback.call(thisArg, this.map[name], name, this);
-      }
-    }
-  };
-
-  Headers.prototype.keys = function() {
-    var items = [];
-    this.forEach(function(value, name) {
-      items.push(name);
-    });
-    return iteratorFor(items)
-  };
-
-  Headers.prototype.values = function() {
-    var items = [];
-    this.forEach(function(value) {
-      items.push(value);
-    });
-    return iteratorFor(items)
-  };
-
-  Headers.prototype.entries = function() {
-    var items = [];
-    this.forEach(function(value, name) {
-      items.push([name, value]);
-    });
-    return iteratorFor(items)
-  };
-
-  if (support.iterable) {
-    Headers.prototype[Symbol.iterator] = Headers.prototype.entries;
-  }
-
-  function consumed(body) {
-    if (body.bodyUsed) {
-      return Promise.reject(new TypeError('Already read'))
-    }
-    body.bodyUsed = true;
-  }
-
-  function fileReaderReady(reader) {
-    return new Promise(function(resolve, reject) {
-      reader.onload = function() {
-        resolve(reader.result);
-      };
-      reader.onerror = function() {
-        reject(reader.error);
-      };
-    })
-  }
-
-  function readBlobAsArrayBuffer(blob) {
-    var reader = new FileReader();
-    var promise = fileReaderReady(reader);
-    reader.readAsArrayBuffer(blob);
-    return promise
-  }
-
-  function readBlobAsText(blob) {
-    var reader = new FileReader();
-    var promise = fileReaderReady(reader);
-    reader.readAsText(blob);
-    return promise
-  }
-
-  function readArrayBufferAsText(buf) {
-    var view = new Uint8Array(buf);
-    var chars = new Array(view.length);
-
-    for (var i = 0; i < view.length; i++) {
-      chars[i] = String.fromCharCode(view[i]);
-    }
-    return chars.join('')
-  }
-
-  function bufferClone(buf) {
-    if (buf.slice) {
-      return buf.slice(0)
-    } else {
-      var view = new Uint8Array(buf.byteLength);
-      view.set(new Uint8Array(buf));
-      return view.buffer
-    }
-  }
-
-  function Body() {
-    this.bodyUsed = false;
-
-    this._initBody = function(body) {
-      /*
-        fetch-mock wraps the Response object in an ES6 Proxy to
-        provide useful test harness features such as flush. However, on
-        ES5 browsers without fetch or Proxy support pollyfills must be used;
-        the proxy-pollyfill is unable to proxy an attribute unless it exists
-        on the object before the Proxy is created. This change ensures
-        Response.bodyUsed exists on the instance, while maintaining the
-        semantic of setting Request.bodyUsed in the constructor before
-        _initBody is called.
-      */
-      this.bodyUsed = this.bodyUsed;
-      this._bodyInit = body;
-      if (!body) {
-        this._bodyText = '';
-      } else if (typeof body === 'string') {
-        this._bodyText = body;
-      } else if (support.blob && Blob.prototype.isPrototypeOf(body)) {
-        this._bodyBlob = body;
-      } else if (support.formData && FormData.prototype.isPrototypeOf(body)) {
-        this._bodyFormData = body;
-      } else if (support.searchParams && URLSearchParams.prototype.isPrototypeOf(body)) {
-        this._bodyText = body.toString();
-      } else if (support.arrayBuffer && support.blob && isDataView(body)) {
-        this._bodyArrayBuffer = bufferClone(body.buffer);
-        // IE 10-11 can't handle a DataView body.
-        this._bodyInit = new Blob([this._bodyArrayBuffer]);
-      } else if (support.arrayBuffer && (ArrayBuffer.prototype.isPrototypeOf(body) || isArrayBufferView(body))) {
-        this._bodyArrayBuffer = bufferClone(body);
-      } else {
-        this._bodyText = body = Object.prototype.toString.call(body);
-      }
-
-      if (!this.headers.get('content-type')) {
-        if (typeof body === 'string') {
-          this.headers.set('content-type', 'text/plain;charset=UTF-8');
-        } else if (this._bodyBlob && this._bodyBlob.type) {
-          this.headers.set('content-type', this._bodyBlob.type);
-        } else if (support.searchParams && URLSearchParams.prototype.isPrototypeOf(body)) {
-          this.headers.set('content-type', 'application/x-www-form-urlencoded;charset=UTF-8');
-        }
-      }
-    };
-
-    if (support.blob) {
-      this.blob = function() {
-        var rejected = consumed(this);
-        if (rejected) {
-          return rejected
-        }
-
-        if (this._bodyBlob) {
-          return Promise.resolve(this._bodyBlob)
-        } else if (this._bodyArrayBuffer) {
-          return Promise.resolve(new Blob([this._bodyArrayBuffer]))
-        } else if (this._bodyFormData) {
-          throw new Error('could not read FormData body as blob')
-        } else {
-          return Promise.resolve(new Blob([this._bodyText]))
-        }
-      };
-
-      this.arrayBuffer = function() {
-        if (this._bodyArrayBuffer) {
-          return consumed(this) || Promise.resolve(this._bodyArrayBuffer)
-        } else {
-          return this.blob().then(readBlobAsArrayBuffer)
-        }
-      };
-    }
-
-    this.text = function() {
-      var rejected = consumed(this);
-      if (rejected) {
-        return rejected
-      }
-
-      if (this._bodyBlob) {
-        return readBlobAsText(this._bodyBlob)
-      } else if (this._bodyArrayBuffer) {
-        return Promise.resolve(readArrayBufferAsText(this._bodyArrayBuffer))
-      } else if (this._bodyFormData) {
-        throw new Error('could not read FormData body as text')
-      } else {
-        return Promise.resolve(this._bodyText)
-      }
-    };
-
-    if (support.formData) {
-      this.formData = function() {
-        return this.text().then(decode)
-      };
-    }
-
-    this.json = function() {
-      return this.text().then(JSON.parse)
-    };
-
-    return this
-  }
-
-  // HTTP methods whose capitalization should be normalized
-  var methods = ['DELETE', 'GET', 'HEAD', 'OPTIONS', 'POST', 'PUT'];
-
-  function normalizeMethod(method) {
-    var upcased = method.toUpperCase();
-    return methods.indexOf(upcased) > -1 ? upcased : method
-  }
-
-  function Request(input, options) {
-    options = options || {};
-    var body = options.body;
-
-    if (input instanceof Request) {
-      if (input.bodyUsed) {
-        throw new TypeError('Already read')
-      }
-      this.url = input.url;
-      this.credentials = input.credentials;
-      if (!options.headers) {
-        this.headers = new Headers(input.headers);
-      }
-      this.method = input.method;
-      this.mode = input.mode;
-      this.signal = input.signal;
-      if (!body && input._bodyInit != null) {
-        body = input._bodyInit;
-        input.bodyUsed = true;
-      }
-    } else {
-      this.url = String(input);
-    }
-
-    this.credentials = options.credentials || this.credentials || 'same-origin';
-    if (options.headers || !this.headers) {
-      this.headers = new Headers(options.headers);
-    }
-    this.method = normalizeMethod(options.method || this.method || 'GET');
-    this.mode = options.mode || this.mode || null;
-    this.signal = options.signal || this.signal;
-    this.referrer = null;
-
-    if ((this.method === 'GET' || this.method === 'HEAD') && body) {
-      throw new TypeError('Body not allowed for GET or HEAD requests')
-    }
-    this._initBody(body);
-
-    if (this.method === 'GET' || this.method === 'HEAD') {
-      if (options.cache === 'no-store' || options.cache === 'no-cache') {
-        // Search for a '_' parameter in the query string
-        var reParamSearch = /([?&])_=[^&]*/;
-        if (reParamSearch.test(this.url)) {
-          // If it already exists then set the value with the current time
-          this.url = this.url.replace(reParamSearch, '$1_=' + new Date().getTime());
-        } else {
-          // Otherwise add a new '_' parameter to the end with the current time
-          var reQueryString = /\?/;
-          this.url += (reQueryString.test(this.url) ? '&' : '?') + '_=' + new Date().getTime();
-        }
-      }
-    }
-  }
-
-  Request.prototype.clone = function() {
-    return new Request(this, {body: this._bodyInit})
-  };
-
-  function decode(body) {
-    var form = new FormData();
-    body
-      .trim()
-      .split('&')
-      .forEach(function(bytes) {
-        if (bytes) {
-          var split = bytes.split('=');
-          var name = split.shift().replace(/\+/g, ' ');
-          var value = split.join('=').replace(/\+/g, ' ');
-          form.append(decodeURIComponent(name), decodeURIComponent(value));
-        }
-      });
-    return form
-  }
-
-  function parseHeaders(rawHeaders) {
-    var headers = new Headers();
-    // Replace instances of \r\n and \n followed by at least one space or horizontal tab with a space
-    // https://tools.ietf.org/html/rfc7230#section-3.2
-    var preProcessedHeaders = rawHeaders.replace(/\r?\n[\t ]+/g, ' ');
-    preProcessedHeaders.split(/\r?\n/).forEach(function(line) {
-      var parts = line.split(':');
-      var key = parts.shift().trim();
-      if (key) {
-        var value = parts.join(':').trim();
-        headers.append(key, value);
-      }
+  d3.selection.prototype.selectGroup = function (key) {
+    var group = this.selectAll('[data-d3-selectgroup="' + key + '"]').data(function (d) {
+      return [d];
     });
-    return headers
-  }
-
-  Body.call(Request.prototype);
-
-  function Response(bodyInit, options) {
-    if (!options) {
-      options = {};
-    }
-
-    this.type = 'default';
-    this.status = options.status === undefined ? 200 : options.status;
-    this.ok = this.status >= 200 && this.status < 300;
-    this.statusText = 'statusText' in options ? options.statusText : '';
-    this.headers = new Headers(options.headers);
-    this.url = options.url || '';
-    this._initBody(bodyInit);
-  }
-
-  Body.call(Response.prototype);
-
-  Response.prototype.clone = function() {
-    return new Response(this._bodyInit, {
-      status: this.status,
-      statusText: this.statusText,
-      headers: new Headers(this.headers),
-      url: this.url
-    })
-  };
-
-  Response.error = function() {
-    var response = new Response(null, {status: 0, statusText: ''});
-    response.type = 'error';
-    return response
-  };
-
-  var redirectStatuses = [301, 302, 303, 307, 308];
-
-  Response.redirect = function(url, status) {
-    if (redirectStatuses.indexOf(status) === -1) {
-      throw new RangeError('Invalid status code')
-    }
-
-    return new Response(null, {status: status, headers: {location: url}})
+    var newGroup = group.enter().append("g").attr("data-d3-selectgroup", key);
+    return group.merge(newGroup);
   };
 
-  var DOMException = global$1.DOMException;
-
-  if (typeof DOMException !== 'function') {
-    DOMException = function(message, name) {
-      this.message = message;
-      this.name = name;
-      var error = Error(message);
-      this.stack = error.stack;
-    };
-    DOMException.prototype = Object.create(Error.prototype);
-    DOMException.prototype.constructor = DOMException;
-  }
-
-  function fetch(input, init) {
-    return new Promise(function(resolve, reject) {
-      var request = new Request(input, init);
-
-      if (request.signal && request.signal.aborted) {
-        return reject(new DOMException('Aborted', 'AbortError'))
-      }
-
-      var xhr = new XMLHttpRequest();
-
-      function abortXhr() {
-        xhr.abort();
-      }
-
-      xhr.onload = function() {
-        var options = {
-          status: xhr.status,
-          statusText: xhr.statusText,
-          headers: parseHeaders(xhr.getAllResponseHeaders() || '')
-        };
-        options.url = 'responseURL' in xhr ? xhr.responseURL : options.headers.get('X-Request-URL');
-        var body = 'response' in xhr ? xhr.response : xhr.responseText;
-        setTimeout(function() {
-          resolve(new Response(body, options));
-        }, 0);
-      };
-
-      xhr.onerror = function() {
-        setTimeout(function() {
-          reject(new TypeError('Network request failed'));
-        }, 0);
-      };
-
-      xhr.ontimeout = function() {
-        setTimeout(function() {
-          reject(new TypeError('Network request failed'));
-        }, 0);
-      };
-
-      xhr.onabort = function() {
-        setTimeout(function() {
-          reject(new DOMException('Aborted', 'AbortError'));
-        }, 0);
-      };
-
-      function fixUrl(url) {
-        try {
-          return url === '' && global$1.location.href ? global$1.location.href : url
-        } catch (e) {
-          return url
-        }
-      }
-
-      xhr.open(request.method, fixUrl(request.url), true);
-
-      if (request.credentials === 'include') {
-        xhr.withCredentials = true;
-      } else if (request.credentials === 'omit') {
-        xhr.withCredentials = false;
-      }
-
-      if ('responseType' in xhr) {
-        if (support.blob) {
-          xhr.responseType = 'blob';
-        } else if (
-          support.arrayBuffer &&
-          request.headers.get('Content-Type') &&
-          request.headers.get('Content-Type').indexOf('application/octet-stream') !== -1
-        ) {
-          xhr.responseType = 'arraybuffer';
-        }
-      }
-
-      request.headers.forEach(function(value, name) {
-        xhr.setRequestHeader(name, value);
-      });
-
-      if (request.signal) {
-        request.signal.addEventListener('abort', abortXhr);
-
-        xhr.onreadystatechange = function() {
-          // DONE (success or failure)
-          if (xhr.readyState === 4) {
-            request.signal.removeEventListener('abort', abortXhr);
-          }
-        };
-      }
-
-      xhr.send(typeof request._bodyInit === 'undefined' ? null : request._bodyInit);
-    })
-  }
-
-  fetch.polyfill = true;
-
-  if (!global$1.fetch) {
-    global$1.fetch = fetch;
-    global$1.Headers = Headers;
-    global$1.Request = Request;
-    global$1.Response = Response;
-  }
-
-  /**
-   * d3-request shim
-   *
-   * This module shims [d3-request](https://github.com/d3/d3-request) from d3v4 using
-   * the new [d3-fetch](https://github.com/d3/d3-fetch) from d3v5. This makes it
-   * possible to use d3v4 code with d3v5 for the use cases in SSZVIS, but not when
-   * using more advanced functionality of d3-request (e.g. setting headers).
-   *
-   * Example from d3v4 that works thanks to this shim:
-   *
-   *     d3.csv("http://example.com")
-   *       .row(function(x) {
-   *         return {
-   *           year: parseInt(x.Jahr, 10)
-   *         }
-   *       })
-   *       .get(function(error, data) {
-   *         if (error) {
-   *           sszvis.loadError(error);
-   *           return;
-   *         }
-   *         actions.prepareState(data);
-   *       })
-   *
-   * With d3v5 this can now be written like:
-   *
-   *     d3.csv("http://example.com", function(x) { return x })
-   *       .then(actions.prepareState)
-   *       .catch(sszvis.loadError)
-   *
-   * Supported d3 versions:
-   * - d3 5.0: Fully supported
-   * - d3 4.0: Partially supported (only "get" and "row" methods have been implemented)
-   */
-  d3__default.csv = mkShim(d3__default.csv);
-  d3__default.json = mkShim(d3__default.json); // -----------------------------------------------------------------------------
-
-  function mkShim(request) {
-    function mkGet() {
-      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-
-      return function (cb) {
-        request.apply(void 0, args).then(function (data) {
-          cb(undefined, data);
-        }).catch(cb);
-      };
-    }
-
-    return function (url, parseNew) {
-      return {
-        // This is the "new" d3-fetch way of loading data that uses a Promise
-        then: function then(cb) {
-          return request(url, parseNew).then(cb);
-        },
-        // This is the "old" d3-request way of loading data using an XMLHttpRequest
-        get: mkGet(url),
-        row: function row(parseRow) {
-          return {
-            get: mkGet(url, parseRow)
-          };
-        }
-      };
-    };
-  }
-
   /* eslint-disable */
 
   /**
@@ -18198,64 +17299,17 @@ var sszvis = _commonjsHelpers.createCommonjsModule(function (module, exports) {
           throw new Error("Error parsing XML string");
         }
       }
-    }); // The innerSVG DOM property for SVGElement.
-
-    Object.defineProperty(SVGElement.prototype, "innerSVG", {
-      get: function get() {
-        return this.innerHTML;
-      },
-      set: function set(markupText) {
-        this.innerHTML = markupText;
-      }
-    });
-  })();
-
-  // This is the more strict version of `isNaN`. We need to polyfill it for Internet Explorer,
-  // all other browsers support this.
-  // See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/isNaN
-  Number.isNaN = Number.isNaN || function isNaN(input) {
-    return typeof input === "number" && input !== input;
-  };
-
-  T(); // d3 mutates state in many places, which is why we have to turn this off.
-
-  cn(false);
-
-  /**
-   * d3.selection plugin to simplify creating idempotent divs that are not
-   * recreated when rendered again.
-   *
-   * @see https://github.com/mbostock/d3/wiki/Selections
-   *
-   * @param {String} key - the name of the group
-   * @return {d3.selection}
-   */
-
-  d3.selection.prototype.selectDiv = function (key) {
-    var div = this.selectAll('[data-d3-selectdiv="' + key + '"]').data(function (d) {
-      return [d];
-    });
-    var newDiv = div.enter().append("div").attr("data-d3-selectdiv", key).style("position", "absolute");
-    return div.merge(newDiv);
-  };
-
-  /**
-   * d3.selection plugin to simplify creating idempotent groups that are not
-   * recreated when rendered again.
-   *
-   * @see https://github.com/mbostock/d3/wiki/Selections
-   *
-   * @param  {String} key The name of the group
-   * @return {d3.selection}
-   */
-
-  d3.selection.prototype.selectGroup = function (key) {
-    var group = this.selectAll('[data-d3-selectgroup="' + key + '"]').data(function (d) {
-      return [d];
+    }); // The innerSVG DOM property for SVGElement.
+
+    Object.defineProperty(SVGElement.prototype, "innerSVG", {
+      get: function get() {
+        return this.innerHTML;
+      },
+      set: function set(markupText) {
+        this.innerHTML = markupText;
+      }
     });
-    var newGroup = group.enter().append("g").attr("data-d3-selectgroup", key);
-    return group.merge(newGroup);
-  };
+  })();
 
   /**
    * A collection of functional programming helper functions
@@ -18427,7 +17481,7 @@ var sszvis = _commonjsHelpers.createCommonjsModule(function (module, exports) {
    */
 
   var defined = function defined(val) {
-    return typeof val !== "undefined" && val != null && !Number.isNaN(val);
+    return typeof val !== "undefined" && val != null;
   };
   /**
    * fn.derivedSet
@@ -18667,7 +17721,7 @@ var sszvis = _commonjsHelpers.createCommonjsModule(function (module, exports) {
    */
 
   var isNumber = function isNumber(val) {
-    return Object.prototype.toString.call(val) === "[object Number]" && !Number.isNaN(val);
+    return Object.prototype.toString.call(val) === "[object Number]";
   };
   /**
    * fn.isObject
@@ -18943,22 +17997,10 @@ var sszvis = _commonjsHelpers.createCommonjsModule(function (module, exports) {
     };
   }
 
-  var darkBlue = "#3431DE";
-  var mediumBlue = "#0A8DF6";
-  var lightBlue = "#23C3F1";
-  var darkRed = "#7B4FB7";
-  var mediumRed = "#DB247D";
-  var lightRed = "#FB737E";
-  var darkGreen = "#007C78";
-  var mediumGreen = "#1D942E";
-  var lightGreen = "#99C32E";
-  var darkBrown = "#9A5B01";
-  var mediumBrown = "#FF720C";
-  var lightBrown = "#FBB900";
-  var scaleQual12 = qualColorScale([darkBlue, mediumBlue, lightBlue, darkRed, mediumRed, lightRed, darkGreen, mediumGreen, lightGreen, darkBrown, mediumBrown, lightBrown]);
-  var scaleQual6 = qualColorScale([darkBlue, mediumRed, mediumGreen, lightBrown, lightBlue, mediumBrown]);
-  var scaleQual6a = qualColorScale([darkBlue, mediumBlue, lightBlue, darkRed, mediumRed, lightRed]);
-  var scaleQual6b = qualColorScale([darkGreen, mediumGreen, lightGreen, darkBrown, mediumBrown, lightBrown]);
+  var scaleQual12 = qualColorScale(["#5182B3", "#B8CFE6", "#60BF97", "#B8E6D2", "#94BF69", "#CFE6B8", "#E6CF73", "#FAEBAF", "#E67D73", "#F2CEC2", "#CC6788", "#E6B7C7"]);
+  var scaleQual6 = qualColorScale(["#5182B3", "#60BF97", "#94BF69", "#E6CF73", "#E67D73", "#CC6788"]);
+  var scaleQual6a = qualColorScale(["#5182B3", "#B8CFE6", "#60BF97", "#B8E6D2", "#94BF69", "#CFE6B8"]);
+  var scaleQual6b = qualColorScale(["#E6CF73", "#FAEBAF", "#E67D73", "#F2CEC2", "#CC6788", "#E6B7C7"]);
 
   function seqColorScale(colors) {
     return function () {
@@ -18967,10 +18009,10 @@ var sszvis = _commonjsHelpers.createCommonjsModule(function (module, exports) {
     };
   }
 
-  var scaleSeqBlu = seqColorScale(["#CADEFF", "#5B6EFF", "#211A8A"]);
-  var scaleSeqRed = seqColorScale(["#FED2EE", "#ED408D", "#7D0044"]);
-  var scaleSeqGrn = seqColorScale(["#CFEED8", "#34B446", "#0C4B1F"]);
-  var scaleSeqBrn = seqColorScale(["#FCDDBB", "#EA5D00", "#611F00"]);
+  var scaleSeqBlu = seqColorScale(["#DDE9FE", "#3B76B3", "#343F4D"]);
+  var scaleSeqRed = seqColorScale(["#FEECEC", "#CC6171", "#4D353A"]);
+  var scaleSeqGrn = seqColorScale(["#D2DFDE", "#4A807C", "#2C3C3F"]);
+  var scaleSeqBrn = seqColorScale(["#E9DFD6", "#A67D5A", "#4C3735"]);
 
   function divColorScale(colors) {
     return function () {
@@ -18979,10 +18021,10 @@ var sszvis = _commonjsHelpers.createCommonjsModule(function (module, exports) {
     };
   }
 
-  var scaleDivVal = divColorScale(["#782600", "#FFFFFF", "#2F2ABB"]);
-  var scaleDivValGry = divColorScale(["#782600", "#F3F3F3", "#2F2ABB"]);
-  var scaleDivNtr = divColorScale(["#A30059", "#FFFFFF", "#10652A"]);
-  var scaleDivNtrGry = divColorScale(["#A30059", "#F3F3F3", "#10652A"]);
+  var scaleDivVal = divColorScale(["#CC6171", "#FFFFFF", "#3B76B3"]);
+  var scaleDivValGry = divColorScale(["#CC6171", "#F3F3F3", "#3B76B3"]);
+  var scaleDivNtr = divColorScale(["#A67D5A", "#FFFFFF", "#4A807C"]);
+  var scaleDivNtrGry = divColorScale(["#A67D5A", "#F3F3F3", "#4A807C"]);
 
   function greyColorScale(colors) {
     return function () {
@@ -19831,7 +18873,7 @@ var sszvis = _commonjsHelpers.createCommonjsModule(function (module, exports) {
    * @return {sszvis.component}
    */
   function rangeRuler () {
-    return component().prop("x", functor).prop("y0", functor).prop("y1", functor).prop("top").prop("bottom").prop("label").prop("removeStroke").label(functor("")).prop("total").prop("flip", functor).flip(false).render(function (data) {
+    return component().prop("x", functor).prop("y0", functor).prop("y1", functor).prop("top").prop("bottom").prop("label").label(functor("")).prop("total").prop("flip", functor).flip(false).render(function (data) {
       var selection = d3.select(this);
       var props = selection.props();
       var crispX = compose(halfPixel, props.x);
@@ -19870,11 +18912,6 @@ var sszvis = _commonjsHelpers.createCommonjsModule(function (module, exports) {
       .style("text-anchor", function (d) {
         return props.flip(d) ? "end" : "start";
       }).text(compose(formatNumber, props.label));
-
-      if (!props.removeStroke) {
-        marks.attr("stroke", "white").attr("stroke-width", 0.5).attr("stroke-opacity", 0.75);
-      }
-
       var total = selection.selectAll(".sszvis-rangeRuler__total").data([last(data)]);
       var newTotal = total.enter().append("text").classed("sszvis-rangeRuler__total", true);
       total.exit().remove();
@@ -19885,10 +18922,6 @@ var sszvis = _commonjsHelpers.createCommonjsModule(function (module, exports) {
       }).attr("y", props.top - 10).style("text-anchor", function (d) {
         return props.flip(d) ? "end" : "start";
       }).text("Total " + formatNumber(props.total));
-
-      if (!props.removeStroke) {
-        total.attr("stroke", "white").attr("stroke-width", 0.5).attr("stroke-opacity", 0.75);
-      }
     });
   }
 
@@ -20223,367 +19256,129 @@ var sszvis = _commonjsHelpers.createCommonjsModule(function (module, exports) {
    * formatTable
    */
 
-
-  function formatTable(rows) {
-    var tableBody = rows.map(function (row) {
-      return "<tr>" + row.map(function (cell) {
-        return "<td>" + cell + "</td>";
-      }).join("") + "</tr>";
-    }).join("");
-    return '<table class="sszvis-tooltip__body__table">' + tableBody + "</table>";
-  }
-  /**
-   * Tooltip background generator
-   *
-   * Generates a path description with a tip on the specified side.
-   *
-   *           top
-   *         ________
-   *   left |        | right
-   *        |___  ___|
-   *            \/
-   *          bottom
-   *
-   * @param  {Vector} a           Top-left corner of the tooltip rectangle (x, y)
-   * @param  {Vector} b           Bottom-right corner of the tooltip rectangle (x, y)
-   * @param  {String} orientation The tip will point in this direction (top, right, bottom, left)
-   *
-   * @return {Path}               SVG path description
-   */
-
-
-  function tooltipBackgroundGenerator(a, b, orientation, radius) {
-    switch (orientation) {
-      case "top":
-        a[1] = a[1] + TIP_SIZE;
-        break;
-
-      case "bottom":
-        b[1] = b[1] - TIP_SIZE;
-        break;
-
-      case "left":
-        a[0] = a[0] + TIP_SIZE;
-        break;
-
-      case "right":
-        b[0] = b[0] - TIP_SIZE;
-        break;
-    }
-
-    function x(d) {
-      return d[0];
-    }
-
-    function y(d) {
-      return d[1];
-    }
-
-    function side(cx, cy, x0, y0, x1, y1, showTip) {
-      var mx = x0 + (x1 - x0) / 2;
-      var my = y0 + (y1 - y0) / 2;
-      var corner = ["Q", cx, cy, x0, y0];
-      var tip = [];
-
-      if (showTip && y0 === y1) {
-        if (x0 < x1) {
-          // Top
-          tip = ["L", mx - TIP_SIZE, my, "L", mx, my - TIP_SIZE, "L", mx + TIP_SIZE, my];
-        } else {
-          // Bottom
-          tip = ["L", mx + TIP_SIZE, my, "L", mx, my + TIP_SIZE, "L", mx - TIP_SIZE, my];
-        }
-      } else if (showTip && x0 === x1) {
-        if (y0 < y1) {
-          // Right
-          tip = ["L", mx, my - TIP_SIZE, "L", mx + TIP_SIZE, my, "L", mx, my + TIP_SIZE];
-        } else {
-          // Left
-          tip = ["L", mx, my + TIP_SIZE, "L", mx - TIP_SIZE, my, "L", mx, my - TIP_SIZE];
-        }
-      }
-
-      var end = ["L", x1, y1];
-      return [].concat(corner, tip, end);
-    }
-
-    return [// Start
-    ["M", x(a), y(a) + radius], // Top side
-    side(x(a), y(a), x(a) + radius, y(a), x(b) - radius, y(a), orientation === "top"), // Right side
-    side(x(b), y(a), x(b), y(a) + radius, x(b), y(b) - radius, orientation === "right"), // Bottom side
-    side(x(b), y(b), x(b) - radius, y(b), x(a) + radius, y(b), orientation === "bottom"), // Left side
-    side(x(a), y(b), x(a), y(b) - radius, x(a), y(a) + radius, orientation === "left")].map(function (d) {
-      return d.join(" ");
-    }).join(" ");
-  }
-  /**
-   * Detect whether the current browser supports SVG filters
-   */
-
-
-  function supportsSVGFilters() {
-    return window["SVGFEColorMatrixElement"] !== undefined && SVGFEColorMatrixElement.SVG_FECOLORMATRIX_TYPE_SATURATE == 2;
-  }
-
-  /**
-   * @function sszvis.tooltipFit
-   *
-   * This is a useful default function for making a tooltip fit within a horizontal space.
-   * You provide a default orientation for the tooltip, but also provide the bounds of the
-   * space within which the tooltip should stay. When the tooltip is too close to the left
-   * or right edge of the bounds, it is oriented away from the edge. Otherwise the default
-   * is used.
-   *
-   * @param {String} defaultValue         The default value for the tooltip orientation
-   * @param {Object} bounds               The bounds object within which the tooltip should stay.
-   *
-   * @returns {Function}                  A function for calculating the orientation of the tooltips.
-   */
-  function fitTooltip (defaultVal, bounds) {
-    var lo = Math.min(bounds.innerWidth * 1 / 4, 100);
-    var hi = Math.max(bounds.innerWidth * 3 / 4, bounds.innerWidth - 100);
-    return function (d) {
-      var x = d.x;
-      return x > hi ? "right" : x < lo ? "left" : defaultVal;
-    };
-  }
-
-  /**
-   * Fallback handling
-   *
-   * Defaults to rendering a fallback image with standard chart proportions.
-   *
-   * @example
-   * if (sszvis.fallback.unsupported()) {
-   *   sszvis.fallback.render('#sszvis-chart', {src: '../fallback.png', height: 300});
-   *   return;
-   * }
-   *
-   * @module sszvis/fallback
-   */
-  var fallbackUnsupported = function fallbackUnsupported() {
-    var supportsSVG = !!document.createElementNS && !!document.createElementNS("http://www.w3.org/2000/svg", "svg").createSVGRect;
-    return !supportsSVG;
-  };
-  var fallbackCanvasUnsupported = function fallbackCanvasUnsupported() {
-    var supportsCanvas = !!document.createElement("canvas").getContext;
-    return !supportsCanvas;
-  };
-  var fallbackRender = function fallbackRender(selector, options) {
-    options || (options = {});
-    options.src || (options.src = "fallback.png");
-    var selection = isSelection(selector) ? selector : d3.select(selector);
-    selection.append("img").attr("class", "sszvis-fallback-image").attr("src", options.src);
-  };
-
-  var nanoThrottle = function (callback, ms, trailing) {
-    var t = 0, call;
-    arguments.length < 3 && (trailing = true);
-    return function () {
-      var args = arguments;
-      var self = this;
-      call = function () {
-        callback.apply(self, args);
-        t = new Date().getTime() + ms;
-        call = null;
-        trailing && setTimeout(function () {
-          call && call();
-        }, ms);
-      };
-      if (new Date().getTime() > t) call();
-    }
-  };
-
-  /**
-   * Viewport Resize watcher
-   *
-   * The resize watcher in the sszvis.viewport module can be used for alerting user code to
-   * changes in the browser window size. This includes window resizing on desktop computers
-   * and browsers, but also orientation changes on mobile browsers. Functions which listen
-   * to the 'resize' event of the sszvis.viewport module will be fired on window resize.
-   * You can add a resize listener to your application very easily:
-   *
-   * sszvis.viewport.on('resize', listenerFunction);
-   *
-   * The listener function will be called once per resize event, but at a slight delay. This is because,
-   * while a user is resizing their browser window, many resize events can fire very quickly. This component
-   * automatically throttles the rate at which the listener function is called, since you probably don't need
-   * to respond to every single resize event. This throttling provides for a smoother user experience as they
-   * resize the browser, and increases performance across the board. The listener function will always be
-   * called after one or more window resize events, it just won't be called as often as the window fires the
-   * events.
-   *
-   * @module sszvis/viewport
-   *
-   * @function {string, function} on      the .on() function is used to listen to the resize event itself.
-   *                                      There is only one event supported by this component at the moment, so
-   *                                      the first argument to .on must be 'resize' for it to have any effect.
-   *                                      Although this is somewhat redundant, it is done to keep this component's
-   *                                      API clear and in line with other components.
-   *
-   * @return {Object}
-   */
-  // sszvis.viewport.on('resize', callback);
-  // While still enabling the user to register multiple callbacks for the 'resize'
-  // event. Multiple callbacks are a feature which simply returning a d3.dispatch('resize')
-  // object would not allow.
-
-  var callbacks = {
-    resize: []
-  };
-
-  if (typeof window !== "undefined") {
-    d3.select(window).on("resize", nanoThrottle(function () {
-      trigger("resize");
-    }, 500));
-  }
-
-  var on$1 = function on(name, cb) {
-    if (!callbacks[name]) {
-      callbacks[name] = [];
-    }
-
-    callbacks[name] = callbacks[name].filter(function (fn) {
-      return fn !== cb;
-    }).concat(cb);
-    return this;
-  };
-
-  var off = function off(name, cb) {
-    if (!callbacks[name]) {
-      return this;
-    }
-
-    callbacks[name] = callbacks[name].filter(function (fn) {
-      return fn !== cb;
-    });
-    return this;
-  };
-
-  var trigger = function trigger(name) {
-    var evtArgs = Array.prototype.slice.call(arguments, 1);
-
-    if (callbacks[name]) {
-      callbacks[name].forEach(function (fn) {
-        fn.apply(null, evtArgs);
-      });
-    }
-
-    return this;
-  };
-
-  var viewport = {
-    on: on$1,
-    off: off,
-    trigger: trigger
-  };
-
+
+  function formatTable(rows) {
+    var tableBody = rows.map(function (row) {
+      return "<tr>" + row.map(function (cell) {
+        return "<td>" + cell + "</td>";
+      }).join("") + "</tr>";
+    }).join("");
+    return '<table class="sszvis-tooltip__body__table">' + tableBody + "</table>";
+  }
   /**
-   * Application loop
-   *
-   * Creates a stateful app that can be interacted with through actions. By providing
-   * a structured approach, this allows us to optimize the render loop and clarifies
-   * the relationship between state and actions.
-   *
-   * Within an app, state can only be modified through actions. During the render phase,
-   * state is immutable and an error will be thrown if it is modified accidentally.
-   *
-   * Conceptually, an app works like this:
-   *
-   *     init
-   *       ⇣
-   *     state ⭢ render
-   *      ⮤ action ⮠
-   *
-   * The basis of an app are the following three types:
-   *
-   * Dispatch can be used to schedule an action after rendering has been completed. In the
-   * render function, dispatch is not directly accessible; instead, an actions object is
-   * provided to dispatch actions by calling them as functions.
-   * @typedef {(action: string, p?: Props) => void} Dispatch
-   *
-   * An effect can be returned from an action to schedule further actions using dispatch.
-   * @typedef {(d: Dispatch, p?: Props) => void} Effect
+   * Tooltip background generator
    *
-   * An action receives an Immer.js Draft that can be mutated within the action. If further
-   * actions should be called after this one, an action can return an Effect.
-   * @typedef {(s: Draft, p?: Props) => Effect | void} Action
-   * @see {@link https://immerjs.github.io/immer/docs/produce/}
+   * Generates a path description with a tip on the specified side.
    *
-   * The app can be configured with the following props:
+   *           top
+   *         ________
+   *   left |        | right
+   *        |___  ___|
+   *            \/
+   *          bottom
    *
-   * @prop {Object} props
-   * @prop {(s: Draft) => Promise<Effect | void>} props.init - Asynchronously create
-   * the initial state and optionally schedule an action
-   * @prop {(s: State, as: Record<keyof props.actions, (p?: Props) => void>)} props.render - Update
-   * the DOM from the state and optionally dispatch actions
-   * @prop {Record<string, Action>} [props.actions] - Functions to transition the
-   * application state
-   * @prop {{element: string, src: string}} [props.fallback] - Render a fallback image
+   * @param  {Vector} a           Top-left corner of the tooltip rectangle (x, y)
+   * @param  {Vector} b           Bottom-right corner of the tooltip rectangle (x, y)
+   * @param  {String} orientation The tip will point in this direction (top, right, bottom, left)
    *
-   * @module sszvis/app
+   * @return {Path}               SVG path description
    */
 
-  var app = function app(_ref) {
-    var init = _ref.init,
-        render = _ref.render,
-        _ref$actions = _ref.actions,
-        actions = _ref$actions === void 0 ? {} : _ref$actions,
-        fallback = _ref.fallback;
-    var doing;
-    var state;
-    invariant(isFunction$1(init), 'An "init" function returning a Promise must be provided.');
-    invariant(isFunction$1(render), 'A "render" function must be provided.');
-    var actionDispatchers = Object.keys(actions).reduce(function (acc, key) {
-      acc[key] = function (args) {
-        dispatch(key, args);
-      };
 
-      return acc;
-    }, {});
+  function tooltipBackgroundGenerator(a, b, orientation, radius) {
+    switch (orientation) {
+      case "top":
+        a[1] = a[1] + TIP_SIZE;
+        break;
 
-    function scheduleUpdate(effect) {
-      if (!doing) {
-        doing = true;
-        requestAnimationFrame(function () {
-          render(state, actionDispatchers);
-          doing = false;
-        });
-      }
+      case "bottom":
+        b[1] = b[1] - TIP_SIZE;
+        break;
+
+      case "left":
+        a[0] = a[0] + TIP_SIZE;
+        break;
+
+      case "right":
+        b[0] = b[0] - TIP_SIZE;
+        break;
+    }
 
-      if (isFunction$1(effect)) effect(dispatch);
+    function x(d) {
+      return d[0];
     }
 
-    function dispatch(action, props) {
-      invariant(actions[action] != null, "Action \"".concat(action, "\" is not defined, add it to \"actions\"."));
-      var draft = pn(state);
-      var effect = actions[action](draft, props);
-      state = ln(draft);
-      scheduleUpdate(effect);
+    function y(d) {
+      return d[1];
     }
 
-    var initialState = pn({});
-    init(initialState).then(function (effect) {
-      state = ln(initialState);
-      scheduleUpdate(effect);
-      viewport.on("resize", scheduleUpdate);
-    }).catch(function (err) {
-      invariant(false, err);
-      fallback && fallbackRender(fallback.element, {
-        src: fallback.src
-      });
-    });
-  }; // -----------------------------------------------------------------------------
-  // Helper functions
+    function side(cx, cy, x0, y0, x1, y1, showTip) {
+      var mx = x0 + (x1 - x0) / 2;
+      var my = y0 + (y1 - y0) / 2;
+      var corner = ["Q", cx, cy, x0, y0];
+      var tip = [];
+
+      if (showTip && y0 === y1) {
+        if (x0 < x1) {
+          // Top
+          tip = ["L", mx - TIP_SIZE, my, "L", mx, my - TIP_SIZE, "L", mx + TIP_SIZE, my];
+        } else {
+          // Bottom
+          tip = ["L", mx + TIP_SIZE, my, "L", mx, my + TIP_SIZE, "L", mx - TIP_SIZE, my];
+        }
+      } else if (showTip && x0 === x1) {
+        if (y0 < y1) {
+          // Right
+          tip = ["L", mx, my - TIP_SIZE, "L", mx + TIP_SIZE, my, "L", mx, my + TIP_SIZE];
+        } else {
+          // Left
+          tip = ["L", mx, my + TIP_SIZE, "L", mx - TIP_SIZE, my, "L", mx, my - TIP_SIZE];
+        }
+      }
 
-  function invariant(condition, message) {
-    if (!condition) {
-      throw new Error("[sszvis.app] ".concat(message));
+      var end = ["L", x1, y1];
+      return [].concat(corner, tip, end);
     }
+
+    return [// Start
+    ["M", x(a), y(a) + radius], // Top side
+    side(x(a), y(a), x(a) + radius, y(a), x(b) - radius, y(a), orientation === "top"), // Right side
+    side(x(b), y(a), x(b), y(a) + radius, x(b), y(b) - radius, orientation === "right"), // Bottom side
+    side(x(b), y(b), x(b) - radius, y(b), x(a) + radius, y(b), orientation === "bottom"), // Left side
+    side(x(a), y(b), x(a), y(b) - radius, x(a), y(a) + radius, orientation === "left")].map(function (d) {
+      return d.join(" ");
+    }).join(" ");
+  }
+  /**
+   * Detect whether the current browser supports SVG filters
+   */
+
+
+  function supportsSVGFilters() {
+    return window["SVGFEColorMatrixElement"] !== undefined && SVGFEColorMatrixElement.SVG_FECOLORMATRIX_TYPE_SATURATE == 2;
   }
 
-  function isFunction$1(x) {
-    return typeof x === "function";
+  /**
+   * @function sszvis.tooltipFit
+   *
+   * This is a useful default function for making a tooltip fit within a horizontal space.
+   * You provide a default orientation for the tooltip, but also provide the bounds of the
+   * space within which the tooltip should stay. When the tooltip is too close to the left
+   * or right edge of the bounds, it is oriented away from the edge. Otherwise the default
+   * is used.
+   *
+   * @param {String} defaultValue         The default value for the tooltip orientation
+   * @param {Object} bounds               The bounds object within which the tooltip should stay.
+   *
+   * @returns {Function}                  A function for calculating the orientation of the tooltips.
+   */
+  function fitTooltip (defaultVal, bounds) {
+    var lo = Math.min(bounds.innerWidth * 1 / 4, 100);
+    var hi = Math.max(bounds.innerWidth * 3 / 4, bounds.innerWidth - 100);
+    return function (d) {
+      var x = d.x;
+      return x > hi ? "right" : x < lo ? "left" : defaultVal;
+    };
   }
 
   /**
@@ -21181,7 +19976,6 @@ var sszvis = _commonjsHelpers.createCommonjsModule(function (module, exports) {
    *
    * @property {boolean} alignOuterLabels                 Whether or not to align the outer labels to the axis extent so that they do not fall outside the axis space.
    * @property {boolean} contour                          Specify a 'contour' background for the axis labels.
-   * @property {boolean} removeStroke                     Removes the default stroke applied to the text
    * @property {number} hideBorderTickThreshold           Specifies the pixel distance threshold for the visible tick correction. Ticks which are closer than
    *                                                      this threshold to the end of the axis (i.e. a tick which is 1 or two pixels from the end) will be
    *                                                      hidden from view. This prevents the display of a tick very close to the ending line.
@@ -21216,7 +20010,7 @@ var sszvis = _commonjsHelpers.createCommonjsModule(function (module, exports) {
   var axis = function axis() {
     // var axisDelegate = d3.axisBottom();
     // axisDelegate.orient = function() { return 'bottom'; };
-    var axisComponent = component().prop("scale").prop("orient").prop("ticks").prop("tickValues").prop("tickSize").prop("tickSizeInner").prop("tickSizeOuter").prop("tickPadding").prop("tickFormat").prop("_scale").prop("orient").orient("bottom").prop("alignOuterLabels").alignOuterLabels(false).prop("contour").prop("removeStroke").prop("hideBorderTickThreshold").hideBorderTickThreshold(TICK_PROXIMITY_THRESHOLD).prop("hideLabelThreshold").hideLabelThreshold(LABEL_PROXIMITY_THRESHOLD).prop("highlightTick", functor).prop("showZeroY").showZeroY(false).prop("slant").prop("textWrap").prop("tickLength").prop("title").prop("titleAnchor") // start, end, or middle
+    var axisComponent = component().prop("scale").prop("orient").prop("ticks").prop("tickValues").prop("tickSize").prop("tickSizeInner").prop("tickSizeOuter").prop("tickPadding").prop("tickFormat").prop("_scale").prop("orient").orient("bottom").prop("alignOuterLabels").alignOuterLabels(false).prop("contour").prop("hideBorderTickThreshold").hideBorderTickThreshold(TICK_PROXIMITY_THRESHOLD).prop("hideLabelThreshold").hideLabelThreshold(LABEL_PROXIMITY_THRESHOLD).prop("highlightTick", functor).prop("showZeroY").showZeroY(false).prop("slant").prop("textWrap").prop("tickLength").prop("title").prop("titleAnchor") // start, end, or middle
     .prop("titleCenter") // a boolean value - whether to center the title
     .prop("dxTitle") // a numeric value for the left offset of the title
     .prop("dyTitle") // a numeric value for the top offset of the title
@@ -21460,14 +20254,6 @@ var sszvis = _commonjsHelpers.createCommonjsModule(function (module, exports) {
           textContour.text(textNode.textContent);
         });
       }
-
-      if (!props.removeStroke) {
-        tickGroups.each(function () {
-          var g = d3.select(this);
-          var textNode = g.select("text");
-          textNode.attr("stroke", "white").attr("stroke-width", 0.5).attr("stroke-opacity", 0.75);
-        });
-      }
     }); // axisComponent.__delegate__ = axisDelegate;
 
     return axisComponent;
@@ -22860,7 +21646,6 @@ var sszvis = _commonjsHelpers.createCommonjsModule(function (module, exports) {
     return component().prop("radius").prop("fill").prop("stroke").prop("angle", functor).render(function (data) {
       var selection = d3.select(this);
       var props = selection.props();
-      var stroke = props.stroke || "#FFFFFF";
       var angle = 0;
       data.forEach(function (value) {
         // In order for an angle transition to work correctly in d3, the transition must be done in data space.
@@ -22891,7 +21676,7 @@ var sszvis = _commonjsHelpers.createCommonjsModule(function (module, exports) {
           data[i].a1 = d.a1;
         }
       }).data(data);
-      var newSegments = segments.enter().append("path").classed("sszvis-path", true).attr("transform", "translate(" + props.radius + "," + props.radius + ")").attr("fill", props.fill).attr("stroke", stroke);
+      var newSegments = segments.enter().append("path").classed("sszvis-path", true).attr("transform", "translate(" + props.radius + "," + props.radius + ")").attr("fill", props.fill).attr("stroke", props.stroke);
       segments.exit().remove();
       segments = segments.merge(newSegments);
       segments.transition(defaultTransition()).attr("transform", "translate(" + props.radius + "," + props.radius + ")").attrTween("d", function (d) {
@@ -22902,7 +21687,7 @@ var sszvis = _commonjsHelpers.createCommonjsModule(function (module, exports) {
           d.a1 = angle1Interp(t);
           return arcGen(d);
         };
-      }).attr("fill", props.fill).attr("stroke", stroke);
+      }).attr("fill", props.fill).attr("stroke", props.stroke);
       var ta = tooltipAnchor().position(function (d) {
         // The correction by - Math.PI / 2 is necessary because d3 automatically (and with brief, buried documentation!)
         // makes the same correction to svg.arc() angles :o
@@ -23263,7 +22048,7 @@ var sszvis = _commonjsHelpers.createCommonjsModule(function (module, exports) {
         paths = paths.transition(defaultTransition());
       }
 
-      paths.attr("d", areaGen).attr("fill", props.fill).attr("stroke", props.stroke || "#ffffff");
+      paths.attr("d", areaGen).attr("fill", props.fill).attr("stroke", props.stroke);
     });
   }
 
@@ -23392,7 +22177,7 @@ var sszvis = _commonjsHelpers.createCommonjsModule(function (module, exports) {
     return component().prop("xScale", functor).prop("width", functor).prop("yScale", functor).prop("height", functor).prop("fill").prop("stroke").render(function (data) {
       var selection = d3.select(this);
       var props = selection.props();
-      var barGen = bar().x(config.x(props)).y(config.y(props)).width(config.width(props)).height(config.height(props)).fill(props.fill).stroke(props.stroke || "#FFFFFF");
+      var barGen = bar().x(config.x(props)).y(config.y(props)).width(config.width(props)).height(config.height(props)).fill(props.fill).stroke(props.stroke);
       var groups = selection.selectAll(".sszvis-stack").data(data);
       var newGroups = groups.enter().append("g").classed("sszvis-stack", true);
       groups.exit().remove();
@@ -24092,6 +22877,34 @@ var sszvis = _commonjsHelpers.createCommonjsModule(function (module, exports) {
     return viewport.merge(viewportEnter);
   }
 
+  /**
+   * Fallback handling
+   *
+   * Defaults to rendering a fallback image with standard chart proportions.
+   *
+   * @example
+   * if (sszvis.fallback.unsupported()) {
+   *   sszvis.fallback.render('#sszvis-chart', {src: '../fallback.png', height: 300});
+   *   return;
+   * }
+   *
+   * @module sszvis/fallback
+   */
+  var fallbackUnsupported = function fallbackUnsupported() {
+    var supportsSVG = !!document.createElementNS && !!document.createElementNS("http://www.w3.org/2000/svg", "svg").createSVGRect;
+    return !supportsSVG;
+  };
+  var fallbackCanvasUnsupported = function fallbackCanvasUnsupported() {
+    var supportsCanvas = !!document.createElement("canvas").getContext;
+    return !supportsCanvas;
+  };
+  var fallbackRender = function fallbackRender(selector, options) {
+    options || (options = {});
+    options.src || (options.src = "fallback.png");
+    var selection = isSelection(selector) ? selector : d3.select(selector);
+    selection.append("img").attr("class", "sszvis-fallback-image").attr("src", options.src);
+  };
+
   /**
    * Ordinal Color Scale Legend
    *
@@ -25534,44 +24347,44 @@ var sszvis = _commonjsHelpers.createCommonjsModule(function (module, exports) {
    *
    * @return {sszvis.component}
    */
-  var datumAcc = prop("datum");
+  var datumAcc = prop('datum');
   function bubble () {
-    var event = d3.dispatch("over", "out", "click");
-    var anchoredCirclesComponent = component().prop("mergedData").prop("mapPath").prop("radius", functor).prop("fill", functor).prop("strokeColor", functor).strokeColor("#ffffff").prop("strokeWidth", functor).strokeWidth(1).prop("transition").transition(true).render(function () {
+    var event = d3.dispatch('over', 'out', 'click');
+    var anchoredCirclesComponent = component().prop('mergedData').prop('mapPath').prop('radius', functor).prop('fill', functor).prop('strokeColor', functor).strokeColor('#ffffff').prop('strokeWidth', functor).strokeWidth(1).prop('transition').transition(true).render(function () {
       var selection = d3.select(this);
       var props = selection.props();
       var radiusAcc = compose(props.radius, datumAcc);
-      var anchoredCircles = selection.selectGroup("anchoredCircles").selectAll(".sszvis-anchored-circle").data(props.mergedData, function (d) {
+      var anchoredCircles = selection.selectGroup('anchoredCircles').selectAll('.sszvis-anchored-circle').data(props.mergedData, function (d) {
         return d.geoJson.id;
       });
-      anchoredCircles.enter().append("circle").attr("class", "sszvis-anchored-circle sszvis-anchored-circle--entering").attr("r", radiusAcc).on("mouseover", function (d) {
-        event.call("over", this, d.datum);
-      }).on("mouseout", function (d) {
-        event.call("out", this, d.datum);
-      }).on("click", function (d) {
-        event.call("click", this, d.datum);
-      }).merge(anchoredCircles).attr("transform", function (d) {
+      anchoredCircles.enter().append('circle').attr('class', 'sszvis-anchored-circle sszvis-anchored-circle--entering').attr('r', radiusAcc).on('mouseover', function (d) {
+        event.call('over', this, d.datum);
+      }).on('mouseout', function (d) {
+        event.call('out', this, d.datum);
+      }).on('click', function (d) {
+        event.call('click', this, d.datum);
+      }).merge(anchoredCircles).attr('transform', function (d) {
         var position = props.mapPath.projection()(getGeoJsonCenter(d.geoJson));
         return translateString(position[0], position[1]);
-      }).style("fill", function (d) {
+      }).style('fill', function (d) {
         return props.fill(d.datum);
-      }).style("stroke", function (d) {
+      }).style('stroke', function (d) {
         return props.strokeColor(d.datum);
-      }).style("stroke-width", function (d) {
+      }).style('stroke-width', function (d) {
         return props.strokeWidth(d.datum);
       }).sort(function (a, b) {
         return props.radius(b.datum) - props.radius(a.datum);
       }); // Remove the --entering modifier from the updating circles
 
-      anchoredCircles.classed("sszvis-anchored-circle--entering", false);
+      anchoredCircles.classed('sszvis-anchored-circle--entering', false);
 
       if (props.transition) {
         var t = defaultTransition();
-        anchoredCircles.exit().transition(t).attr("r", 0).remove();
-        anchoredCircles.transition(t).attr("r", radiusAcc);
+        anchoredCircles.exit().transition(t).attr('r', 0).remove();
+        anchoredCircles.transition(t).attr('r', radiusAcc);
       } else {
         anchoredCircles.exit().remove();
-        anchoredCircles.attr("r", radiusAcc);
+        anchoredCircles.attr('r', radiusAcc);
       }
     });
 
@@ -25606,45 +24419,45 @@ var sszvis = _commonjsHelpers.createCommonjsModule(function (module, exports) {
    * @return {sszvis.component}
    */
   function mapRendererBase () {
-    return component().prop("mergedData").prop("geoJson").prop("mapPath").prop("defined", functor).defined(true) // a predicate function to determine whether a datum has a defined value
-    .prop("fill", functor).fill(function () {
-      return "black";
+    return component().prop('mergedData').prop('geoJson').prop('mapPath').prop('defined', functor).defined(true) // a predicate function to determine whether a datum has a defined value
+    .prop('fill', functor).fill(function () {
+      return 'black';
     }) // a function for the entity fill color. default is black
-    .prop("transitionColor").transitionColor(true).render(function () {
+    .prop('transitionColor').transitionColor(true).render(function () {
       var selection = d3.select(this);
       var props = selection.props(); // render the missing value pattern
 
-      ensureDefsElement(selection, "pattern", "missing-pattern").call(mapMissingValuePattern); // map fill function - returns the missing value pattern if the datum doesn't exist or fails the props.defined test
+      ensureDefsElement(selection, 'pattern', 'missing-pattern').call(mapMissingValuePattern); // map fill function - returns the missing value pattern if the datum doesn't exist or fails the props.defined test
 
       function getMapFill(d) {
-        return props.defined(d.datum) ? props.fill(d.datum) : "url(#missing-pattern)";
+        return props.defined(d.datum) ? props.fill(d.datum) : 'url(#missing-pattern)';
       }
 
-      var mapAreas = selection.selectAll(".sszvis-map__area").data(props.mergedData); // add the base map paths - these are filled according to the map fill function
+      var mapAreas = selection.selectAll('.sszvis-map__area').data(props.mergedData); // add the base map paths - these are filled according to the map fill function
 
-      var newMapAreas = mapAreas.enter().append("path").classed("sszvis-map__area", true).classed("sszvis-map__area--entering", true).attr("data-event-target", "").attr("fill", getMapFill);
-      mapAreas.classed("sszvis-map__area--entering", false);
+      var newMapAreas = mapAreas.enter().append('path').classed('sszvis-map__area', true).classed('sszvis-map__area--entering', true).attr('data-event-target', '').attr('fill', getMapFill);
+      mapAreas.classed('sszvis-map__area--entering', false);
       mapAreas.exit().remove();
       mapAreas = mapAreas.merge(newMapAreas);
-      selection.selectAll(".sszvis-map__area--undefined").attr("fill", getMapFill); // change the fill if necessary
+      selection.selectAll('.sszvis-map__area--undefined').attr('fill', getMapFill); // change the fill if necessary
 
-      mapAreas.classed("sszvis-map__area--undefined", function (d) {
+      mapAreas.classed('sszvis-map__area--undefined', function (d) {
         return !defined(d.datum) || !props.defined(d.datum);
-      }).attr("d", function (d) {
+      }).attr('d', function (d) {
         return props.mapPath(d.geoJson);
       });
 
       if (props.transitionColor) {
-        mapAreas.transition().call(slowTransition).attr("fill", getMapFill);
+        mapAreas.transition().call(slowTransition).attr('fill', getMapFill);
       } else {
-        mapAreas.attr("fill", getMapFill);
+        mapAreas.attr('fill', getMapFill);
       } // the tooltip anchor generator
 
 
       var ta = tooltipAnchor().position(function (d) {
         return props.mapPath.projection()(getGeoJsonCenter(d.geoJson));
       });
-      var tooltipGroup = selection.selectGroup("tooltipAnchors").datum(props.mergedData); // attach tooltip anchors
+      var tooltipGroup = selection.selectGroup('tooltipAnchors').datum(props.mergedData); // attach tooltip anchors
 
       tooltipGroup.call(ta);
     });
@@ -25673,12 +24486,12 @@ var sszvis = _commonjsHelpers.createCommonjsModule(function (module, exports) {
    * @return {sszvis.component}
    */
   function geojson () {
-    var event = d3.dispatch("over", "out", "click");
-    var geojsonComponent = component().prop("dataKeyName").dataKeyName(GEO_KEY_DEFAULT).prop("geoJsonKeyName").geoJsonKeyName("id").prop("geoJson").prop("mapPath").prop("defined", functor).defined(true).prop("fill", functor).fill("black").prop("stroke", functor).stroke("black").prop("strokeWidth", functor).strokeWidth(1.25).prop("transitionColor").transitionColor(true).render(function (data) {
+    var event = d3.dispatch('over', 'out', 'click');
+    var geojsonComponent = component().prop('dataKeyName').dataKeyName(GEO_KEY_DEFAULT).prop('geoJsonKeyName').geoJsonKeyName('id').prop('geoJson').prop('mapPath').prop('defined', functor).defined(true).prop('fill', functor).fill('black').prop('stroke', functor).stroke('black').prop('strokeWidth', functor).strokeWidth(1.25).prop('transitionColor').transitionColor(true).render(function (data) {
       var selection = d3.select(this);
       var props = selection.props(); // render the missing value pattern
 
-      ensureDefsElement(selection, "pattern", "missing-pattern").call(mapMissingValuePattern); // getDataKeyName will be called on data values. It should return a map entity id.
+      ensureDefsElement(selection, 'pattern', 'missing-pattern').call(mapMissingValuePattern); // getDataKeyName will be called on data values. It should return a map entity id.
       // getMapKeyName will be called on the 'properties' of each map feature. It should
       // return a map entity id. Data values are matched with corresponding map features using
       // these entity ids.
@@ -25697,36 +24510,36 @@ var sszvis = _commonjsHelpers.createCommonjsModule(function (module, exports) {
       });
 
       function getMapFill(d) {
-        return defined(d.datum) && props.defined(d.datum) ? props.fill(d.datum) : "url(#missing-pattern)";
+        return defined(d.datum) && props.defined(d.datum) ? props.fill(d.datum) : 'url(#missing-pattern)';
       }
 
       function getMapStroke(d) {
-        return defined(d.datum) && props.defined(d.datum) ? props.stroke(d.datum) : "";
+        return defined(d.datum) && props.defined(d.datum) ? props.stroke(d.datum) : '';
       }
 
-      var geoElements = selection.selectAll(".sszvis-map__geojsonelement").data(mergedData);
-      var newGeoElements = geoElements.enter().append("path").classed("sszvis-map__geojsonelement", true).attr("data-event-target", "").attr("fill", getMapFill);
+      var geoElements = selection.selectAll('.sszvis-map__geojsonelement').data(mergedData);
+      var newGeoElements = geoElements.enter().append('path').classed('sszvis-map__geojsonelement', true).attr('data-event-target', '').attr('fill', getMapFill);
       geoElements.exit().remove();
       geoElements = geoElements.merge(newGeoElements);
-      selection.selectAll(".sszvis-map__geojsonelement--undefined").attr("fill", getMapFill);
-      geoElements.classed("sszvis-map__geojsonelement--undefined", function (d) {
+      selection.selectAll('.sszvis-map__geojsonelement--undefined').attr('fill', getMapFill);
+      geoElements.classed('sszvis-map__geojsonelement--undefined', function (d) {
         return !defined(d.datum) || !props.defined(d.datum);
-      }).attr("d", function (d) {
+      }).attr('d', function (d) {
         return props.mapPath(d.geoJson);
       });
 
       if (props.transitionColor) {
-        geoElements.transition().call(slowTransition).attr("fill", getMapFill);
+        geoElements.transition().call(slowTransition).attr('fill', getMapFill);
       } else {
-        geoElements.attr("fill", getMapFill);
+        geoElements.attr('fill', getMapFill);
       }
 
-      geoElements.attr("stroke", getMapStroke).attr("stroke-width", props.strokeWidth);
-      selection.selectAll("[data-event-target]").on("mouseover", function (d) {
+      geoElements.attr('stroke', getMapStroke).attr('stroke-width', props.strokeWidth);
+      selection.selectAll('[data-event-target]').on('mouseover', function (d) {
         event.over(d.datum);
-      }).on("mouseout", function (d) {
+      }).on('mouseout', function (d) {
         event.out(d.datum);
-      }).on("click", function (d) {
+      }).on('click', function (d) {
         event.click(d.datum);
       }); // the tooltip anchor generator
 
@@ -25740,7 +24553,7 @@ var sszvis = _commonjsHelpers.createCommonjsModule(function (module, exports) {
 
         return props.mapPath.projection()(sphericalCentroid);
       });
-      var tooltipGroup = selection.selectGroup("tooltipAnchors").datum(mergedData); // attach tooltip anchors
+      var tooltipGroup = selection.selectGroup('tooltipAnchors').datum(mergedData); // attach tooltip anchors
 
       tooltipGroup.call(ta);
     });
@@ -25771,13 +24584,13 @@ var sszvis = _commonjsHelpers.createCommonjsModule(function (module, exports) {
    * @return {sszvis.component}
    */
   function mapRendererHighlight () {
-    return component().prop("keyName").keyName(GEO_KEY_DEFAULT) // the name of the data key that identifies which map entity it belongs to
-    .prop("geoJson").prop("mapPath").prop("highlight").highlight([]) // an array of data values to highlight
-    .prop("highlightStroke", functor).highlightStroke("white") // a function for highlighted entity stroke colors (default: white)
-    .prop("highlightStrokeWidth", functor).highlightStrokeWidth(2).render(function () {
+    return component().prop('keyName').keyName(GEO_KEY_DEFAULT) // the name of the data key that identifies which map entity it belongs to
+    .prop('geoJson').prop('mapPath').prop('highlight').highlight([]) // an array of data values to highlight
+    .prop('highlightStroke', functor).highlightStroke('white') // a function for highlighted entity stroke colors (default: white)
+    .prop('highlightStrokeWidth', functor).highlightStrokeWidth(2).render(function () {
       var selection = d3.select(this);
       var props = selection.props();
-      var highlightBorders = selection.selectAll(".sszvis-map__highlight");
+      var highlightBorders = selection.selectAll('.sszvis-map__highlight');
 
       if (!props.highlight.length) {
         highlightBorders.remove();
@@ -25800,14 +24613,14 @@ var sszvis = _commonjsHelpers.createCommonjsModule(function (module, exports) {
         return m;
       }, []);
       highlightBorders = highlightBorders.data(mergedHighlight);
-      var newHighlightBorders = highlightBorders.enter().append("path").classed("sszvis-map__highlight", true);
+      var newHighlightBorders = highlightBorders.enter().append('path').classed('sszvis-map__highlight', true);
       highlightBorders.exit().remove();
       highlightBorders = highlightBorders.merge(newHighlightBorders);
-      highlightBorders.attr("d", function (d) {
+      highlightBorders.attr('d', function (d) {
         return props.mapPath(d.geoJson);
-      }).style("stroke", function (d) {
+      }).style('stroke', function (d) {
         return props.highlightStroke(d.datum);
-      }).style("stroke-width", function (d) {
+      }).style('stroke-width', function (d) {
         return props.highlightStrokeWidth(d.datum);
       });
     });
@@ -25841,17 +24654,17 @@ var sszvis = _commonjsHelpers.createCommonjsModule(function (module, exports) {
    * @return {sszvis.component}
    */
   function image () {
-    return component().prop("projection").prop("src").prop("geoBounds").prop("opacity").opacity(1).render(function () {
+    return component().prop('projection').prop('src').prop('geoBounds').prop('opacity').opacity(1).render(function () {
       var selection = d3.select(this);
       var props = selection.props();
-      var image = selection.selectAll(".sszvis-map__image").data([0]); // At the moment, 1 image per container
+      var image = selection.selectAll('.sszvis-map__image').data([0]); // At the moment, 1 image per container
 
-      var newImage = image.enter().append("img").classed("sszvis-map__image", true);
+      var newImage = image.enter().append('img').classed('sszvis-map__image', true);
       image.exit().remove();
       image = image.merge(newImage);
       var topLeft = props.projection(props.geoBounds[0]);
       var bottomRight = props.projection(props.geoBounds[1]);
-      image.attr("src", props.src).style("left", Math.round(topLeft[0]) + "px").style("top", Math.round(topLeft[1]) + "px").style("width", Math.round(bottomRight[0] - topLeft[0]) + "px").style("height", Math.round(bottomRight[1] - topLeft[1]) + "px").style("opacity", props.opacity);
+      image.attr('src', props.src).style('left', Math.round(topLeft[0]) + 'px').style('top', Math.round(topLeft[1]) + 'px').style('width', Math.round(bottomRight[0] - topLeft[0]) + 'px').style('height', Math.round(bottomRight[1] - topLeft[1]) + 'px').style('opacity', props.opacity);
     });
   }
 
@@ -25873,16 +24686,16 @@ var sszvis = _commonjsHelpers.createCommonjsModule(function (module, exports) {
    * @return {sszvis.component}
    */
   function mapRendererMesh () {
-    return component().prop("geoJson").prop("mapPath").prop("borderColor").borderColor("white") // A function or string for the color of all borders. Note: all borders have the same color
-    .prop("strokeWidth").strokeWidth(1.25).render(function () {
+    return component().prop('geoJson').prop('mapPath').prop('borderColor').borderColor('white') // A function or string for the color of all borders. Note: all borders have the same color
+    .prop('strokeWidth').strokeWidth(1.25).render(function () {
       var selection = d3.select(this);
       var props = selection.props(); // add the map borders. These are rendered as one single path element
 
-      var meshLine = selection.selectAll(".sszvis-map__border").data([props.geoJson]);
-      var newMeshLine = meshLine.enter().append("path").classed("sszvis-map__border", true);
+      var meshLine = selection.selectAll('.sszvis-map__border').data([props.geoJson]);
+      var newMeshLine = meshLine.enter().append('path').classed('sszvis-map__border', true);
       meshLine.exit().remove();
       meshLine = meshLine.merge(newMeshLine);
-      meshLine.attr("d", props.mapPath).style("stroke", props.borderColor).style("stroke-width", props.strokeWidth);
+      meshLine.attr('d', props.mapPath).style('stroke', props.borderColor).style('stroke-width', props.strokeWidth);
     });
   }
 
@@ -25903,41 +24716,41 @@ var sszvis = _commonjsHelpers.createCommonjsModule(function (module, exports) {
    * @return {sszvis.component}
    */
   function mapRendererPatternedLakeOverlay () {
-    return component().prop("mapPath").prop("lakeFeature").prop("lakeBounds").prop("lakePathColor").prop("fadeOut").fadeOut(true).render(function () {
+    return component().prop('mapPath').prop('lakeFeature').prop('lakeBounds').prop('lakePathColor').prop('fadeOut').fadeOut(true).render(function () {
       var selection = d3.select(this);
       var props = selection.props(); // the lake texture
 
-      ensureDefsElement(selection, "pattern", "lake-pattern").call(mapLakePattern);
+      ensureDefsElement(selection, 'pattern', 'lake-pattern').call(mapLakePattern);
 
       if (props.fadeOut) {
         // the fade gradient
-        ensureDefsElement(selection, "linearGradient", "lake-fade-gradient").call(mapLakeFadeGradient); // the mask, which uses the fade gradient
+        ensureDefsElement(selection, 'linearGradient', 'lake-fade-gradient').call(mapLakeFadeGradient); // the mask, which uses the fade gradient
 
-        ensureDefsElement(selection, "mask", "lake-fade-mask").call(mapLakeGradientMask);
+        ensureDefsElement(selection, 'mask', 'lake-fade-mask').call(mapLakeGradientMask);
       } // generate the Lake Zurich path
 
 
-      var zurichSee = selection.selectAll(".sszvis-map__lakezurich").data([props.lakeFeature]);
-      var newZurichSee = zurichSee.enter().append("path").classed("sszvis-map__lakezurich", true);
+      var zurichSee = selection.selectAll('.sszvis-map__lakezurich').data([props.lakeFeature]);
+      var newZurichSee = zurichSee.enter().append('path').classed('sszvis-map__lakezurich', true);
       zurichSee.exit().remove();
       zurichSee = zurichSee.merge(newZurichSee);
-      zurichSee.attr("d", props.mapPath).attr("fill", "url(#lake-pattern)");
+      zurichSee.attr('d', props.mapPath).attr('fill', 'url(#lake-pattern)');
 
       if (props.fadeOut) {
         // this mask applies the fade effect
-        zurichSee.attr("mask", "url(#lake-fade-mask)");
+        zurichSee.attr('mask', 'url(#lake-fade-mask)');
       } // add a path for the boundaries of map entities which extend over the lake.
       // This path is rendered as a dotted line over the lake shape
 
 
-      var lakePath = selection.selectAll(".sszvis-map__lakepath").data([props.lakeBounds]);
-      var newLakePath = lakePath.enter().append("path").classed("sszvis-map__lakepath", true);
+      var lakePath = selection.selectAll('.sszvis-map__lakepath').data([props.lakeBounds]);
+      var newLakePath = lakePath.enter().append('path').classed('sszvis-map__lakepath', true);
       lakePath.exit().remove();
       lakePath = lakePath.merge(newLakePath);
-      lakePath.attr("d", props.mapPath);
+      lakePath.attr('d', props.mapPath);
 
       if (props.lakePathColor) {
-        lakePath.style("stroke", props.lakePathColor);
+        lakePath.style('stroke', props.lakePathColor);
       }
     });
   }
@@ -25964,21 +24777,21 @@ var sszvis = _commonjsHelpers.createCommonjsModule(function (module, exports) {
    * @return {sszvis.component}
    */
   function raster () {
-    return component().prop("debug").debug(false).prop("width").prop("height").prop("position").prop("cellSide").cellSide(2).prop("fill", functor).prop("opacity").opacity(1).render(function (data) {
+    return component().prop('debug').debug(false).prop('width').prop('height').prop('position').prop('cellSide').cellSide(2).prop('fill', functor).prop('opacity').opacity(1).render(function (data) {
       var selection = d3.select(this);
       var props = selection.props();
-      var canvas = selection.selectAll(".sszvis-map__rasterimage").data([0]);
-      var newCanvas = canvas.enter().append("canvas").classed("sszvis-map__rasterimage", true);
+      var canvas = selection.selectAll('.sszvis-map__rasterimage').data([0]);
+      var newCanvas = canvas.enter().append('canvas').classed('sszvis-map__rasterimage', true);
       canvas.exit().remove();
       canvas = canvas.merge(newCanvas);
-      canvas.attr("width", props.width).attr("height", props.height).style("opacity", props.opacity);
-      var ctx = canvas.node().getContext("2d");
+      canvas.attr('width', props.width).attr('height', props.height).style('opacity', props.opacity);
+      var ctx = canvas.node().getContext('2d');
       ctx.clearRect(0, 0, props.width, props.height);
 
       if (props.debug) {
         // Displays a rectangle that fills the canvas.
         // Useful for checking alignment with other render layers.
-        ctx.fillStyle = "rgba(255, 0, 0, 0.2)";
+        ctx.fillStyle = 'rgba(255, 0, 0, 0.2)';
         ctx.fillRect(0, 0, props.width, props.height);
       }
 
@@ -26458,6 +25271,127 @@ var sszvis = _commonjsHelpers.createCommonjsModule(function (module, exports) {
   var modularTextHTML = makeTextWithFormat(formatHTML());
   var modularTextSVG = makeTextWithFormat(formatSVG());
 
+  /**
+   * Viewport Resize watcher
+   *
+   * The resize watcher in the sszvis.viewport module can be used for alerting user code to
+   * changes in the browser window size. This includes window resizing on desktop computers
+   * and browsers, but also orientation changes on mobile browsers. Functions which listen
+   * to the 'resize' event of the sszvis.viewport module will be fired on window resize.
+   * You can add a resize listener to your application very easily:
+   *
+   * sszvis.viewport.on('resize', listenerFunction);
+   *
+   * The listener function will be called once per resize event, but at a slight delay. This is because,
+   * while a user is resizing their browser window, many resize events can fire very quickly. This component
+   * automatically throttles the rate at which the listener function is called, since you probably don't need
+   * to respond to every single resize event. This throttling provides for a smoother user experience as they
+   * resize the browser, and increases performance across the board. The listener function will always be
+   * called after one or more window resize events, it just won't be called as often as the window fires the
+   * events.
+   *
+   * @module sszvis/viewport
+   *
+   * @function {string, function} on      the .on() function is used to listen to the resize event itself.
+   *                                      There is only one event supported by this component at the moment, so
+   *                                      the first argument to .on must be 'resize' for it to have any effect.
+   *                                      Although this is somewhat redundant, it is done to keep this component's
+   *                                      API clear and in line with other components.
+   *
+   * @return {Object}
+   */
+
+  function throttle(wait, func) {
+    var context, args, result;
+    var timeout = null;
+    var previous = 0;
+
+    var lastCall = function lastCall() {
+      previous = 0;
+      result = func.apply(context, args);
+      timeout = context = args = null;
+    };
+
+    return function () {
+      var now = Date.now();
+      if (!previous) previous = now; // Sets up so that the function isn't called immediately
+
+      var remaining = wait - (now - previous);
+      context = this;
+      args = arguments;
+
+      if (remaining <= 0 || remaining > wait) {
+        if (timeout) {
+          clearTimeout(timeout);
+          timeout = null;
+        }
+
+        previous = now;
+        result = func.apply(context, args);
+        if (!timeout) context = args = null;
+      } else if (!timeout) {
+        timeout = setTimeout(lastCall, remaining);
+      }
+
+      return result;
+    };
+  } // This rather strange set of functions is designed to support the API:
+  // sszvis.viewport.on('resize', callback);
+  // While still enabling the user to register multiple callbacks for the 'resize'
+  // event. Multiple callbacks are a feature which simply returning a d3.dispatch('resize')
+  // object would not allow.
+
+
+  var callbacks = {
+    resize: []
+  };
+
+  if (typeof window !== "undefined") {
+    d3.select(window).on("resize", throttle(500, function () {
+      trigger("resize");
+    }));
+  }
+
+  var on = function on(name, cb) {
+    if (!callbacks[name]) {
+      callbacks[name] = [];
+    }
+
+    callbacks[name] = callbacks[name].filter(function (fn) {
+      return fn !== cb;
+    }).concat(cb);
+    return this;
+  };
+
+  var off = function off(name, cb) {
+    if (!callbacks[name]) {
+      return this;
+    }
+
+    callbacks[name] = callbacks[name].filter(function (fn) {
+      return fn !== cb;
+    });
+    return this;
+  };
+
+  var trigger = function trigger(name) {
+    var evtArgs = Array.prototype.slice.call(arguments, 1);
+
+    if (callbacks[name]) {
+      callbacks[name].forEach(function (fn) {
+        fn.apply(null, evtArgs);
+      });
+    }
+
+    return this;
+  };
+
+  var viewport = {
+    on: on,
+    off: off,
+    trigger: trigger
+  };
+
   exports.AGGLOMERATION_2012_KEY = AGGLOMERATION_2012_KEY;
   exports.DEFAULT_LEGEND_COLOR_ORDINAL_ROW_HEIGHT = DEFAULT_LEGEND_COLOR_ORDINAL_ROW_HEIGHT;
   exports.DEFAULT_WIDTH = DEFAULT_WIDTH;
@@ -26474,7 +25408,6 @@ var sszvis = _commonjsHelpers.createCommonjsModule(function (module, exports) {
   exports.annotationRangeRuler = rangeRuler;
   exports.annotationRectangle = rectangle;
   exports.annotationRuler = ruler;
-  exports.app = app;
   exports.arity = arity;
   exports.aspectRatio = aspectRatio;
   exports.aspectRatio12to5 = aspectRatio12to5;
@@ -27156,7 +26089,7 @@ const topojson = /*#__PURE__*/Object.freeze({
   untransform: untransform
 });
 
-const stzhChartCss = "@charset \"UTF-8\";:host{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}:host[hidden]{display:none}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sszvis-outer-container{clear:both;position:relative}.sszvis-svg-layer{position:relative}.sszvis-html-layer{position:absolute}.sszvis-fallback-image{display:block;margin:0 auto;max-width:32.25rem;width:100%}.sszvis-interactive{cursor:default;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);-webkit-touch-callout:none}.sszvis-interactive.sszvis-interactive--draggable{cursor:pointer;cursor:grab;cursor:-webkit-grab}.sszvis-interactive.sszvis-interactive--draggable:active{cursor:grabbing;cursor:-webkit-grabbing}:root{--stzh-font:var(--stzh-font-family-regular, \"Helvetica Neue\", Helvetica, Arial, sans-serif)}.sszvis-axis text{fill:#767676;font-family:\"Helvetica Neue\", Helvetica, Arial, sans-serif;font-family:var(--stzh-font);font-size:0.625rem;font-style:normal;font-weight:normal}.sszvis-axis path,.sszvis-axis line{fill:none;stroke:#b8b8b8;shape-rendering:crispEdges}.sszvis-axis .tick text.active{fill:#545454}.sszvis-axis .tick text.hidden{display:none}.sszvis-axis .tick line.hidden{display:none}.sszvis-axis.sszvis-axis--top path{display:none}.sszvis-axis.sszvis-axis--vertical path{display:none}.sszvis-axis.sszvis-axis--slider path{stroke:none}.sszvis-axis__label-contour{fill:#ffffff;opacity:0.8;stroke:#ffffff;stroke-width:3}.sszvis-bar--missing{stroke:#a4a4a4}.sszvis-line{fill:none;stroke-width:1.1}.sszvis-pyramid__referenceline{fill:none;stroke:#aaa;stroke-width:2;stroke-dasharray:3 3}.sszvis-sankey-label{alignment-baseline:central;dominant-baseline:central;font-family:\"Helvetica Neue\", Helvetica, Arial, sans-serif;font-family:var(--stzh-font);font-size:0.625rem;font-style:normal;font-weight:normal}.sszvis-sankey-strong-label{fill:#545454}.sszvis-sankey-weak-label{fill:#767676}.sszvis-sankey-column-label{text-anchor:middle}.sszvis-sankey-column-label-tick{stroke:#b8b8b8}.sszvis-sankey-link-source-label{text-anchor:start}.sszvis-sankey-link-target-label{text-anchor:end}.sszvis-map__area{stroke:none}.sszvis-map__border{fill:none;pointer-events:none;stroke-linejoin:round;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}.sszvis-map__highlight{fill:none;pointer-events:none;stroke-linejoin:round;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}.sszvis-map__lakezurich{pointer-events:none;stroke:none;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}.sszvis-map__lakepath{fill:none;pointer-events:none;stroke:#d3d3d3;stroke-width:1.25;stroke-dasharray:3 3;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}.sszvis-map__geojsonelement{pointer-events:none;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}.sszvis-map__image{display:block;position:absolute;pointer-events:none;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}.sszvis-map__rasterimage{display:block;position:absolute;pointer-events:none;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}.sszvis-control-buttonGroup{display:inline-block;position:absolute;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}.sszvis-control-buttonGroup__item{background-color:#ffffff;border:0.0625rem solid #767676;border-left:none;-webkit-box-sizing:border-box;box-sizing:border-box;color:#767676;cursor:pointer;display:table-cell;font-family:\"Helvetica Neue\", Helvetica, Arial, sans-serif;font-family:var(--stzh-font);font-size:0.75rem;line-height:normal;padding:0.5625rem 0.75rem;text-align:center;vertical-align:middle}.sszvis-control-buttonGroup__item.selected{background-color:#767676;color:#ffffff}.sszvis-control-buttonGroup__item:first-child{border-left:0.0625rem solid #767676;border-top-left-radius:0.1875rem;border-bottom-left-radius:0.1875rem}.sszvis-control-buttonGroup__item:last-child{border-top-right-radius:0.1875rem;border-bottom-right-radius:0.1875rem}.sszvis-control-select{border:0.0625rem solid #767676;border-radius:0.1875rem;background-color:#ffffff;background-image:url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAABQElEQVR4nO3TzW2DUBDEcZdACSnBpe1lVhzdCSXZnaQE55JJSOJgMO9rH/OTOK70/iNxOomIiIiIiMi3cRzfar8hlc0tAM4A3gFMeZ5UDoDps+W86sDMBgBXd7+7+z3yCACmWcfVzIbFg9/xkUeYx68a4b/4iCM8in86wlJ8pBGW4ucj/Dhy98uzowgjrImffZevQzMb3P0WeYSN8bc/v0HkEXbHU8QRksVTpBGSx1OEEbLFU8sjZI+nFkcoFk8tjVA8nloYoVo81RyhejzVGKGZeCo5QnPxVGKEZuMp5wjNx1OOEcLEU8oRwsVTihHCxtOeEcLH0ysjdBNPW0foKp4yjBAnnhKOEC+eEowQN552jBA/nl4YoZ942jBCf/G0YoR+42lhhP7j6cEIx4mn2QjHiyczGw4bLyIiIiIiUtMHjJmBk7uXEiAAAAAASUVORK5CYII=\");background-position:96% 51%;background-repeat:no-repeat;background-size:0.75rem 0.75rem;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;height:2.125rem;overflow:hidden}.sszvis-control-select__element{background:transparent;border:0.0625rem solid #ffffff;color:#767676;font-family:\"Helvetica Neue\", Helvetica, Arial, sans-serif;font-family:var(--stzh-font);font-size:1rem;height:2.125rem;outline:0}.sszvis-control-select__element:-moz-focusring{color:transparent;text-shadow:0 0 0 #000}.sszvis-control-select__metrics{font-family:\"Helvetica Neue\", Helvetica, Arial, sans-serif;font-family:var(--stzh-font);font-size:0.75rem;height:auto;position:absolute;visibility:hidden;width:auto;white-space:nowrap}.sszvis-control-slider__handle{cursor:pointer}.sszvis-control-slider--label{fill:#545454;font-family:\"Helvetica Neue\", Helvetica, Arial, sans-serif;font-family:var(--stzh-font);font-size:0.625rem;text-anchor:middle}.sszvis-control-slider__handlebox{fill:#fff;stroke:#545454}.sszvis-control-slider__handleline{stroke:#545454}.sszvis-handleRuler__handle{fill:#ffffff;stroke:#808184}.sszvis-handleRuler__handle-mark{stroke:#a6a8ab}.sszvis-ruler__rule{shape-rendering:crispEdges;stroke:#cccccc}.sszvis-ruler__dot{stroke:#ffffff;stroke-width:1.5}.sszvis-ruler__label,.sszvis-ruler__label-outline{font-family:\"Helvetica Neue\", Helvetica, Arial, sans-serif;font-family:var(--stzh-font);font-size:0.75rem;font-style:normal;font-weight:normal}.sszvis-ruler__label{fill:#545454}.sszvis-ruler__label-outline{stroke:#ffffff;stroke-width:3}.sszvis-rangeFlag__mark{fill:#efefef;stroke:#7c7c7c;stroke-width:1.5}.sszvis-rangeRuler__rule{opacity:0.25;shape-rendering:crispEdges;stroke:#000000}.sszvis-rangeRuler__p1,.sszvis-rangeRuler__p2{fill:#000000;opacity:0.25}.sszvis-rangeRuler__label,.sszvis-rangeRuler__total{font-size:0.625rem;fill:#545454;font-family:\"Helvetica Neue\", Helvetica, Arial, sans-serif;font-family:var(--stzh-font);font-style:normal}.sszvis-tooltip{min-width:3.75rem;position:absolute}.sszvis-tooltip__background{position:absolute}.sszvis-tooltip__background path{fill:rgba(255, 255, 255, 0.9)}.sszvis-tooltip__background.sszvis-tooltip__background--fallback path{stroke:#ddd;stroke-width:1}.sszvis-tooltip__content{font-family:Arial;padding:0.625rem 0.625rem 0.4375rem 0.625rem;position:relative;white-space:nowrap;z-index:1}.sszvis-tooltip__content strong{font-weight:bold}.sszvis-tooltip__content em{font-weight:bold}.sszvis-tooltip__header{color:#545454;font-size:0.75rem;line-height:1.3333;vertical-align:middle}.sszvis-tooltip__body{color:#7c7c7c;font-size:0.6875rem;line-height:1.4545;vertical-align:middle}.sszvis-tooltip--small .sszvis-tooltip__content{padding:0.375rem 0.625rem 0.25rem 0.625rem;text-align:center}.sszvis-tooltip__body__table,.sszvis-tooltip__body__table td{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:top}.sszvis-tooltip__body__table{border:none !important;border-collapse:collapse;border-spacing:0;min-width:7.5rem;margin-top:0.375rem;width:100%}.sszvis-tooltip__body__table tr{border-top:0.0625rem solid #e5e6e7}.sszvis-tooltip__body__table td{border:none !important;padding:0.4375rem 0.5em 0.4375rem 0 !important;text-align:left;vertical-align:top}.sszvis-tooltip__body__table tr:last-child td{padding-bottom:0.1875rem}.sszvis-tooltip__body__table td:last-child{color:#545454;font-weight:bold;padding-right:0;text-align:right}.sszvis-tooltipAnchor{pointer-events:none;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}.sszvis-referenceline{stroke-width:1.5;stroke:#aaa;stroke-dasharray:3 3}.sszvis-referenceline__caption{fill:#7c7c7c;font-family:\"Helvetica Neue\", Helvetica, Arial, sans-serif;font-family:var(--stzh-font);font-size:0.6875rem;text-anchor:middle;-webkit-backface-visibility:hidden}.sszvis-dataareacircle__caption{fill:#7c7c7c;font-family:\"Helvetica Neue\", Helvetica, Arial, sans-serif;font-family:var(--stzh-font);font-size:0.6875rem;text-anchor:middle}.sszvis-dataarearectangle__caption{fill:#7c7c7c;font-family:\"Helvetica Neue\", Helvetica, Arial, sans-serif;font-family:var(--stzh-font);font-size:0.6875rem;text-anchor:middle}.sszvis-legend__label{fill:#767676;font-family:\"Helvetica Neue\", Helvetica, Arial, sans-serif;font-family:var(--stzh-font);font-size:0.75rem;font-style:normal;font-weight:normal;text-anchor:start}.sszvis-legend__label--small{fill:#767676;font-size:0.625rem}.sszvis-legend__axislabel{fill:#767676;font-family:\"Helvetica Neue\", Helvetica, Arial, sans-serif;font-family:var(--stzh-font);font-size:0.625rem;font-style:normal;font-weight:normal}.sszvis-legend__crispmark{shape-rendering:crispEdges}.sszvis-legend__greyline{fill:none;stroke:#b8b8b8;stroke-width:1.1}.sszvis-legend__dashedline{stroke:#cccccc;stroke-dasharray:2 3;stroke-width:1}stzh-chart{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}stzh-chart[hidden]{display:none}stzh-chart *,stzh-chart *::before,stzh-chart *::after{-webkit-box-sizing:border-box;box-sizing:border-box}";
+const stzhChartCss = "@charset \"UTF-8\";:host{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}:host[hidden]{display:none}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sszvis-outer-container{clear:both;position:relative}.sszvis-svg-layer{position:relative}.sszvis-html-layer{position:absolute}.sszvis-fallback-image{display:block;margin:0 auto;max-width:32.25rem;width:100%}.sszvis-interactive{cursor:default;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);-webkit-touch-callout:none}.sszvis-interactive.sszvis-interactive--draggable{cursor:pointer;cursor:grab;cursor:-webkit-grab}.sszvis-interactive.sszvis-interactive--draggable:active{cursor:grabbing;cursor:-webkit-grabbing}.sszvis-axis text{fill:#767676;font-family:Arial, sans-serif;font-size:0.625rem;font-style:normal;font-weight:normal}.sszvis-axis path,.sszvis-axis line{fill:none;stroke:#B8B8B8;shape-rendering:crispEdges}.sszvis-axis .tick text.active{fill:#545454}.sszvis-axis .tick text.hidden{display:none}.sszvis-axis .tick line.hidden{display:none}.sszvis-axis.sszvis-axis--top path{display:none}.sszvis-axis.sszvis-axis--vertical path{display:none}.sszvis-axis.sszvis-axis--slider path{stroke:none}.sszvis-axis__label-contour{fill:#FFFFFF;opacity:0.8;stroke:#FFFFFF;stroke-width:3}.sszvis-bar--missing{stroke:#A4A4A4}.sszvis-line{fill:none;stroke-width:1.1}.sszvis-pyramid__referenceline{fill:none;stroke:#aaa;stroke-width:2;stroke-dasharray:3 3}.sszvis-sankey-label{alignment-baseline:central;dominant-baseline:central;font-family:Arial, sans-serif;font-size:0.625rem;font-style:normal;font-weight:normal}.sszvis-sankey-strong-label{fill:#545454}.sszvis-sankey-weak-label{fill:#767676}.sszvis-sankey-column-label{text-anchor:middle}.sszvis-sankey-column-label-tick{stroke:#B8B8B8}.sszvis-sankey-link-source-label{text-anchor:start}.sszvis-sankey-link-target-label{text-anchor:end}.sszvis-map__area{stroke:none}.sszvis-map__border{fill:none;pointer-events:none;stroke-linejoin:round;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}.sszvis-map__highlight{fill:none;pointer-events:none;stroke-linejoin:round;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}.sszvis-map__lakezurich{pointer-events:none;stroke:none;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}.sszvis-map__lakepath{fill:none;pointer-events:none;stroke:#d3d3d3;stroke-width:1.25;stroke-dasharray:3 3;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}.sszvis-map__geojsonelement{pointer-events:none;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}.sszvis-map__image{display:block;position:absolute;pointer-events:none;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}.sszvis-map__rasterimage{display:block;position:absolute;pointer-events:none;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}.sszvis-control-buttonGroup{display:inline-block;position:absolute;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}.sszvis-control-buttonGroup__item{background-color:#FFFFFF;border:0.0625rem solid #767676;border-left:none;-webkit-box-sizing:border-box;box-sizing:border-box;color:#767676;cursor:pointer;display:table-cell;font-family:Arial, sans-serif;font-size:0.75rem;line-height:normal;padding:0.5625rem 0.75rem;text-align:center;vertical-align:middle}.sszvis-control-buttonGroup__item.selected{background-color:#767676;color:#FFFFFF}.sszvis-control-buttonGroup__item:first-child{border-left:0.0625rem solid #767676;border-top-left-radius:0.1875rem;border-bottom-left-radius:0.1875rem}.sszvis-control-buttonGroup__item:last-child{border-top-right-radius:0.1875rem;border-bottom-right-radius:0.1875rem}.sszvis-control-select{border:0.0625rem solid #767676;border-radius:0.1875rem;background-color:#FFFFFF;background-image:url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAABQElEQVR4nO3TzW2DUBDEcZdACSnBpe1lVhzdCSXZnaQE55JJSOJgMO9rH/OTOK70/iNxOomIiIiIiMi3cRzfar8hlc0tAM4A3gFMeZ5UDoDps+W86sDMBgBXd7+7+z3yCACmWcfVzIbFg9/xkUeYx68a4b/4iCM8in86wlJ8pBGW4ucj/Dhy98uzowgjrImffZevQzMb3P0WeYSN8bc/v0HkEXbHU8QRksVTpBGSx1OEEbLFU8sjZI+nFkcoFk8tjVA8nloYoVo81RyhejzVGKGZeCo5QnPxVGKEZuMp5wjNx1OOEcLEU8oRwsVTihHCxtOeEcLH0ysjdBNPW0foKp4yjBAnnhKOEC+eEowQN552jBA/nl4YoZ942jBCf/G0YoR+42lhhP7j6cEIx4mn2QjHiyczGw4bLyIiIiIiUtMHjJmBk7uXEiAAAAAASUVORK5CYII=\");background-position:96% 51%;background-repeat:no-repeat;background-size:0.75rem 0.75rem;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;height:2.125rem;overflow:hidden}.sszvis-control-select__element{background:transparent;border:0.0625rem solid #FFFFFF;color:#767676;font-family:Arial, sans-serif;font-size:1rem;height:2.125rem;outline:0}.sszvis-control-select__element:-moz-focusring{color:transparent;text-shadow:0 0 0 #000}.sszvis-control-select__metrics{font-family:Arial, sans-serif;font-size:0.75rem;height:auto;position:absolute;visibility:hidden;width:auto;white-space:nowrap}.sszvis-control-slider__handle{cursor:pointer}.sszvis-control-slider--label{fill:#545454;font-family:Arial, sans-serif;font-size:0.625rem;text-anchor:middle}.sszvis-control-slider__handlebox{fill:#fff;stroke:#545454}.sszvis-control-slider__handleline{stroke:#545454}.sszvis-handleRuler__handle{fill:#FFFFFF;stroke:#808184}.sszvis-handleRuler__handle-mark{stroke:#A6A8AB}.sszvis-ruler__rule{shape-rendering:crispEdges;stroke:#CCCCCC}.sszvis-ruler__dot{stroke:#FFFFFF;stroke-width:1.5}.sszvis-ruler__label,.sszvis-ruler__label-outline{font-family:Arial, sans-serif;font-size:0.75rem;font-style:normal;font-weight:normal}.sszvis-ruler__label{fill:#545454}.sszvis-ruler__label-outline{stroke:#FFFFFF;stroke-width:3}.sszvis-rangeFlag__mark{fill:#EFEFEF;stroke:#7C7C7C;stroke-width:1.5}.sszvis-rangeRuler__rule{opacity:0.25;shape-rendering:crispEdges;stroke:#000000}.sszvis-rangeRuler__p1,.sszvis-rangeRuler__p2{fill:#000000;opacity:0.25}.sszvis-rangeRuler__label,.sszvis-rangeRuler__total{font-size:0.625rem;fill:#545454;font-family:Arial, sans-serif;font-style:normal}.sszvis-tooltip{min-width:3.75rem;position:absolute}.sszvis-tooltip__background{position:absolute}.sszvis-tooltip__background path{fill:rgba(255, 255, 255, 0.9)}.sszvis-tooltip__background.sszvis-tooltip__background--fallback path{stroke:#ddd;stroke-width:1}.sszvis-tooltip__content{font-family:Arial;padding:0.625rem 0.625rem 0.4375rem 0.625rem;position:relative;white-space:nowrap;z-index:1}.sszvis-tooltip__content strong{font-weight:bold}.sszvis-tooltip__content em{font-weight:bold}.sszvis-tooltip__header{color:#545454;font-size:0.75rem;line-height:1.3333;vertical-align:middle}.sszvis-tooltip__body{color:#7C7C7C;font-size:0.6875rem;line-height:1.4545;vertical-align:middle}.sszvis-tooltip--small .sszvis-tooltip__content{padding:0.375rem 0.625rem 0.25rem 0.625rem;text-align:center}.sszvis-tooltip__body__table,.sszvis-tooltip__body__table td{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:top}.sszvis-tooltip__body__table{border:none !important;border-collapse:collapse;border-spacing:0;min-width:7.5rem;margin-top:0.375rem;width:100%}.sszvis-tooltip__body__table tr{border-top:0.0625rem solid #E5E6E7}.sszvis-tooltip__body__table td{border:none !important;padding:0.4375rem 0.5em 0.4375rem 0 !important;text-align:left;vertical-align:top}.sszvis-tooltip__body__table tr:last-child td{padding-bottom:0.1875rem}.sszvis-tooltip__body__table td:last-child{color:#545454;font-weight:bold;padding-right:0;text-align:right}.sszvis-tooltipAnchor{pointer-events:none;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}.sszvis-referenceline{stroke-width:1.5;stroke:#aaa;stroke-dasharray:3 3}.sszvis-referenceline__caption{fill:#7C7C7C;font-family:Arial, sans-serif;font-size:0.6875rem;text-anchor:middle;-webkit-backface-visibility:hidden}.sszvis-dataareacircle__caption{fill:#7C7C7C;font-family:Arial, sans-serif;font-size:0.6875rem;text-anchor:middle}.sszvis-dataarearectangle__caption{fill:#7C7C7C;font-family:Arial, sans-serif;font-size:0.6875rem;text-anchor:middle}.sszvis-legend__label{fill:#767676;font-family:Arial, sans-serif;font-size:0.75rem;font-style:normal;font-weight:normal;text-anchor:start}.sszvis-legend__label--small{fill:#767676;font-size:0.625rem}.sszvis-legend__axislabel{fill:#767676;font-family:Arial, sans-serif;font-size:0.625rem;font-style:normal;font-weight:normal}.sszvis-legend__crispmark{shape-rendering:crispEdges}.sszvis-legend__greyline{fill:none;stroke:#B8B8B8;stroke-width:1.1}.sszvis-legend__dashedline{stroke:#CCCCCC;stroke-dasharray:2 3;stroke-width:1}stzh-chart{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}stzh-chart[hidden]{display:none}stzh-chart *,stzh-chart *::before,stzh-chart *::after{-webkit-box-sizing:border-box;box-sizing:border-box}";
 
 const StzhChart = class {
   constructor(hostRef) {