@oiz/stzh-components 2.2.0 → 2.3.0-alpha

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, a as Host, g as getElement } from './index-011c84fe.js';
+import { r as registerInstance, h, c as Host, g as getElement } from './index-319b7c49.js';
 import { g as getAugmentedNamespace, c as createCommonjsModule, a as getDefaultExportFromCjs, b as commonjsGlobal } from './_commonjsHelpers-f9dc4873.js';
 
 var version = "4.13.0";
@@ -5032,10 +5032,10 @@ function ribbon() {
 
 var prefix = "$";
 
-function Map() {}
+function Map$1() {}
 
-Map.prototype = map$1.prototype = {
-  constructor: Map,
+Map$1.prototype = map$1.prototype = {
+  constructor: Map$1,
   has: function(key) {
     return (prefix + key) in this;
   },
@@ -5083,10 +5083,10 @@ Map.prototype = map$1.prototype = {
 };
 
 function map$1(object, f) {
-  var map = new Map;
+  var map = new Map$1;
 
   // Copy constructor.
-  if (object instanceof Map) object.each(function(value, key) { map.set(key, value); });
+  if (object instanceof Map$1) object.each(function(value, key) { map.set(key, value); });
 
   // Index array by numeric index or specified key function.
   else if (Array.isArray(object)) {
@@ -5176,12 +5176,12 @@ function setMap(map, key, value) {
   map.set(key, value);
 }
 
-function Set() {}
+function Set$1() {}
 
 var proto = map$1.prototype;
 
-Set.prototype = set.prototype = {
-  constructor: Set,
+Set$1.prototype = set.prototype = {
+  constructor: Set$1,
   has: proto.has,
   add: function(value) {
     value += "";
@@ -5197,10 +5197,10 @@ Set.prototype = set.prototype = {
 };
 
 function set(object, f) {
-  var set = new Set;
+  var set = new Set$1;
 
   // Copy constructor.
-  if (object instanceof Set) object.each(function(value) { set.add(value); });
+  if (object instanceof Set$1) object.each(function(value) { set.add(value); });
 
   // Otherwise, assume it’s an array.
   else if (object) {
@@ -17155,46 +17155,945 @@ const d3 = /*#__PURE__*/Object.freeze({
 const require$$0 = /*@__PURE__*/getAugmentedNamespace(d3);
 
 var sszvis = createCommonjsModule(function (module, exports) {
-/*! sszvis v2.1.1, Copyright 2014-present Statistik Stadt Zürich */
+/*! sszvis v2.4.1, Copyright 2014-present Statistik Stadt Zürich */
 (function (global, factory) {
   factory(exports, require$$0) ;
 }(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);
+
   /**
-   * 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}
+   * @this {Promise}
    */
+  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);
+        });
+      }
+    );
+  }
 
-  d3.selection.prototype.selectDiv = function (key) {
-    var div = this.selectAll('[data-d3-selectdiv="' + key + '"]').data(function (d) {
-      return [d];
+  // 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);
     });
-    var newDiv = div.enter().append("div").attr("data-d3-selectdiv", key).style("position", "absolute");
-    return div.merge(newDiv);
-  };
+  }
+
+  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;
+  }
 
   /**
-   * d3.selection plugin to simplify creating idempotent groups that are not
-   * recreated when rendered again.
-   *
-   * @see https://github.com/mbostock/d3/wiki/Selections
+   * @constructor
+   */
+  function Handler(onFulfilled, onRejected, promise) {
+    this.onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : null;
+    this.onRejected = typeof onRejected === 'function' ? onRejected : null;
+    this.promise = promise;
+  }
+
+  /**
+   * Take a potentially misbehaving resolver function and make sure
+   * onFulfilled and onRejected are only called once.
    *
-   * @param  {String} key The name of the group
-   * @return {d3.selection}
+   * Makes no guarantees about asynchrony.
    */
+  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);
+    }
+  }
 
-  d3.selection.prototype.selectGroup = function (key) {
-    var group = this.selectAll('[data-d3-selectgroup="' + key + '"]').data(function (d) {
-      return [d];
+  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);
     });
-    var newGroup = group.enter().append("g").attr("data-d3-selectgroup", key);
-    return group.merge(newGroup);
   };
 
+  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 commonjsGlobal !== 'undefined') {
+      return 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);
+      }
+    });
+    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 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 */
 
   /**
@@ -17297,15 +18196,62 @@ var sszvis = createCommonjsModule(function (module, exports) {
       }
     }); // The innerSVG DOM property for SVGElement.
 
-    Object.defineProperty(SVGElement.prototype, "innerSVG", {
-      get: function get() {
-        return this.innerHTML;
-      },
-      set: function set(markupText) {
-        this.innerHTML = markupText;
-      }
+    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];
     });
-  })();
+    var newGroup = group.enter().append("g").attr("data-d3-selectgroup", key);
+    return group.merge(newGroup);
+  };
 
   /**
    * A collection of functional programming helper functions
@@ -17477,7 +18423,7 @@ var sszvis = createCommonjsModule(function (module, exports) {
    */
 
   var defined = function defined(val) {
-    return typeof val !== "undefined" && val != null;
+    return typeof val !== "undefined" && val != null && !Number.isNaN(val);
   };
   /**
    * fn.derivedSet
@@ -17717,7 +18663,7 @@ var sszvis = createCommonjsModule(function (module, exports) {
    */
 
   var isNumber = function isNumber(val) {
-    return Object.prototype.toString.call(val) === "[object Number]";
+    return Object.prototype.toString.call(val) === "[object Number]" && !Number.isNaN(val);
   };
   /**
    * fn.isObject
@@ -17993,10 +18939,22 @@ var sszvis = createCommonjsModule(function (module, exports) {
     };
   }
 
-  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"]);
+  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]);
 
   function seqColorScale(colors) {
     return function () {
@@ -18005,10 +18963,10 @@ var sszvis = createCommonjsModule(function (module, exports) {
     };
   }
 
-  var scaleSeqBlu = seqColorScale(["#DDE9FE", "#3B76B3", "#343F4D"]);
-  var scaleSeqRed = seqColorScale(["#FEECEC", "#CC6171", "#4D353A"]);
-  var scaleSeqGrn = seqColorScale(["#D2DFDE", "#4A807C", "#2C3C3F"]);
-  var scaleSeqBrn = seqColorScale(["#E9DFD6", "#A67D5A", "#4C3735"]);
+  var scaleSeqBlu = seqColorScale(["#CADEFF", "#5B6EFF", "#211A8A"]);
+  var scaleSeqRed = seqColorScale(["#FED2EE", "#ED408D", "#7D0044"]);
+  var scaleSeqGrn = seqColorScale(["#CFEED8", "#34B446", "#0C4B1F"]);
+  var scaleSeqBrn = seqColorScale(["#FCDDBB", "#EA5D00", "#611F00"]);
 
   function divColorScale(colors) {
     return function () {
@@ -18017,10 +18975,10 @@ var sszvis = createCommonjsModule(function (module, exports) {
     };
   }
 
-  var scaleDivVal = divColorScale(["#CC6171", "#FFFFFF", "#3B76B3"]);
-  var scaleDivValGry = divColorScale(["#CC6171", "#F3F3F3", "#3B76B3"]);
-  var scaleDivNtr = divColorScale(["#A67D5A", "#FFFFFF", "#4A807C"]);
-  var scaleDivNtrGry = divColorScale(["#A67D5A", "#F3F3F3", "#4A807C"]);
+  var scaleDivVal = divColorScale(["#782600", "#FFFFFF", "#2F2ABB"]);
+  var scaleDivValGry = divColorScale(["#782600", "#F3F3F3", "#2F2ABB"]);
+  var scaleDivNtr = divColorScale(["#A30059", "#FFFFFF", "#10652A"]);
+  var scaleDivNtrGry = divColorScale(["#A30059", "#F3F3F3", "#10652A"]);
 
   function greyColorScale(colors) {
     return function () {
@@ -18869,7 +19827,7 @@ var sszvis = 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").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").prop("removeStroke").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);
@@ -18908,6 +19866,11 @@ var sszvis = 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();
@@ -18918,6 +19881,10 @@ var sszvis = 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);
+      }
     });
   }
 
@@ -19253,128 +20220,366 @@ var sszvis = createCommonjsModule(function (module, exports) {
    */
 
 
-  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>";
-  }
+  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
+  };
+
   /**
-   * Tooltip background generator
+   * Application loop
    *
-   * Generates a path description with a tip on the specified side.
+   * 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.
    *
-   *           top
-   *         ________
-   *   left |        | right
-   *        |___  ___|
-   *            \/
-   *          bottom
+   * 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.
    *
-   * @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)
+   * Conceptually, an app works like this:
    *
-   * @return {Path}               SVG path description
+   *     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
+   *
+   * 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/}
+   *
+   * The app can be configured with the following props:
+   *
+   * @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
+   *
+   * @module sszvis/app
    */
 
+  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);
+      };
 
-  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;
+      return acc;
+    }, {});
 
-      case "right":
-        b[0] = b[0] - TIP_SIZE;
-        break;
-    }
+    function scheduleUpdate(effect) {
+      if (!doing) {
+        doing = true;
+        requestAnimationFrame(function () {
+          render(state, actionDispatchers);
+          doing = false;
+        });
+      }
 
-    function x(d) {
-      return d[0];
+      if (isFunction$1(effect)) effect(dispatch);
     }
 
-    function y(d) {
-      return d[1];
+    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 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 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
 
-      var end = ["L", x1, y1];
-      return [].concat(corner, tip, end);
+  function invariant(condition, message) {
+    if (!condition) {
+      throw new Error("[sszvis.app] ".concat(message));
     }
-
-    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;
-    };
+  function isFunction$1(x) {
+    return typeof x === "function";
   }
 
   /**
@@ -19972,6 +21177,7 @@ var sszvis = 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.
@@ -20006,7 +21212,7 @@ var sszvis = 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("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("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
     .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
@@ -20250,6 +21456,14 @@ var sszvis = 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;
@@ -21642,6 +22856,7 @@ var sszvis = 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.
@@ -21672,7 +22887,7 @@ var sszvis = 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", props.stroke);
+      var newSegments = segments.enter().append("path").classed("sszvis-path", true).attr("transform", "translate(" + props.radius + "," + props.radius + ")").attr("fill", props.fill).attr("stroke", stroke);
       segments.exit().remove();
       segments = segments.merge(newSegments);
       segments.transition(defaultTransition()).attr("transform", "translate(" + props.radius + "," + props.radius + ")").attrTween("d", function (d) {
@@ -21683,7 +22898,7 @@ var sszvis = createCommonjsModule(function (module, exports) {
           d.a1 = angle1Interp(t);
           return arcGen(d);
         };
-      }).attr("fill", props.fill).attr("stroke", props.stroke);
+      }).attr("fill", props.fill).attr("stroke", 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
@@ -22044,7 +23259,7 @@ var sszvis = createCommonjsModule(function (module, exports) {
         paths = paths.transition(defaultTransition());
       }
 
-      paths.attr("d", areaGen).attr("fill", props.fill).attr("stroke", props.stroke);
+      paths.attr("d", areaGen).attr("fill", props.fill).attr("stroke", props.stroke || "#ffffff");
     });
   }
 
@@ -22173,7 +23388,7 @@ var sszvis = 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);
+      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 groups = selection.selectAll(".sszvis-stack").data(data);
       var newGroups = groups.enter().append("g").classed("sszvis-stack", true);
       groups.exit().remove();
@@ -22873,34 +24088,6 @@ var sszvis = 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
    *
@@ -24343,44 +25530,44 @@ var sszvis = 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);
       }
     });
 
@@ -24415,45 +25602,45 @@ var sszvis = 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);
     });
@@ -24482,12 +25669,12 @@ var sszvis = 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.
@@ -24506,36 +25693,36 @@ var sszvis = 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
 
@@ -24549,7 +25736,7 @@ var sszvis = 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);
     });
@@ -24580,13 +25767,13 @@ var sszvis = 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();
@@ -24609,14 +25796,14 @@ var sszvis = 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);
       });
     });
@@ -24650,17 +25837,17 @@ var sszvis = 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);
     });
   }
 
@@ -24682,16 +25869,16 @@ var sszvis = 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);
     });
   }
 
@@ -24712,41 +25899,41 @@ var sszvis = 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);
       }
     });
   }
@@ -24773,21 +25960,21 @@ var sszvis = 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);
       }
 
@@ -25267,127 +26454,6 @@ var sszvis = 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;
@@ -25404,6 +26470,7 @@ var sszvis = 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;
@@ -26085,7 +27152,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}.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 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 StzhChart = class {
   constructor(hostRef) {