diff --git a/package-lock.json b/package-lock.json
index e8b3628..568db58 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,8 @@
       "dependencies": {
         "@mdi/font": "^7.4.47",
         "@protobuf-ts/runtime": "^2.9.3",
+        "vega": "^5.27.0",
+        "vega-embed": "^6.24.0",
         "vite-plugin-css-injected-by-js": "^3.3.1",
         "vite-plugin-static-copy": "^1.0.1",
         "vue": "^3.3.11",
@@ -5871,6 +5873,11 @@
       "integrity": "sha512-frsJrz2t/CeGifcu/6uRo4b+SzAwT4NYCVPu1GN8IB9XTzrpPkGuV0tmh9mN+/L0PklAlsC3u5Fxt0ju00LXIw==",
       "dev": true
     },
+    "node_modules/@types/geojson": {
+      "version": "7946.0.4",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.4.tgz",
+      "integrity": "sha512-MHmwBtCb7OCv1DSivz2UNJXPGU/1btAWRKlqJ2saEhVJkpkvqHMMaOpKg0v4sAbDWSQekHGvPVMM8nQ+Jen03Q=="
+    },
     "node_modules/@types/graceful-fs": {
       "version": "4.1.9",
       "resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.9.tgz",
@@ -7132,7 +7139,6 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
       "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -7141,7 +7147,6 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
       "dependencies": {
         "color-convert": "^2.0.1"
       },
@@ -8110,6 +8115,37 @@
         "@colors/colors": "1.5.0"
       }
     },
+    "node_modules/cliui": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
+      "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
+      "peer": true,
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.1",
+        "wrap-ansi": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/cliui/node_modules/wrap-ansi": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "peer": true,
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
     "node_modules/clone": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz",
@@ -8143,7 +8179,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
       "dependencies": {
         "color-name": "~1.1.4"
       },
@@ -8154,8 +8189,7 @@
     "node_modules/color-name": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
     },
     "node_modules/colors": {
       "version": "1.2.5",
@@ -8475,6 +8509,238 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
+    "node_modules/d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-delaunay": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/d3-delaunay/-/d3-delaunay-6.0.4.tgz",
+      "integrity": "sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==",
+      "dependencies": {
+        "delaunator": "5"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dispatch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dsv": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dsv/-/d3-dsv-3.0.1.tgz",
+      "integrity": "sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==",
+      "dependencies": {
+        "commander": "7",
+        "iconv-lite": "0.6",
+        "rw": "1"
+      },
+      "bin": {
+        "csv2json": "bin/dsv2json.js",
+        "csv2tsv": "bin/dsv2dsv.js",
+        "dsv2dsv": "bin/dsv2dsv.js",
+        "dsv2json": "bin/dsv2json.js",
+        "json2csv": "bin/json2dsv.js",
+        "json2dsv": "bin/json2dsv.js",
+        "json2tsv": "bin/json2dsv.js",
+        "tsv2csv": "bin/dsv2dsv.js",
+        "tsv2json": "bin/dsv2json.js"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dsv/node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/d3-dsv/node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/d3-force": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-3.0.0.tgz",
+      "integrity": "sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-quadtree": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-format": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz",
+      "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-geo": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-3.1.0.tgz",
+      "integrity": "sha512-JEo5HxXDdDYXCaWdwLRt79y7giK8SbhZJbFWXqbRTolCHFI5jRqteLzCsq51NKbUoX0PjBVSohxrx+NoOUujYA==",
+      "dependencies": {
+        "d3-array": "2.5.0 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-geo-projection": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/d3-geo-projection/-/d3-geo-projection-4.0.0.tgz",
+      "integrity": "sha512-p0bK60CEzph1iqmnxut7d/1kyTmm3UWtPlwdkM31AU+LW+BXazd5zJdoCn7VFxNCHXRngPHRnsNn5uGjLRGndg==",
+      "dependencies": {
+        "commander": "7",
+        "d3-array": "1 - 3",
+        "d3-geo": "1.12.0 - 3"
+      },
+      "bin": {
+        "geo2svg": "bin/geo2svg.js",
+        "geograticule": "bin/geograticule.js",
+        "geoproject": "bin/geoproject.js",
+        "geoquantize": "bin/geoquantize.js",
+        "geostitch": "bin/geostitch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-geo-projection/node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/d3-hierarchy": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-3.1.2.tgz",
+      "integrity": "sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-quadtree": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-3.0.1.tgz",
+      "integrity": "sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "dependencies": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "dependencies": {
+        "d3-path": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "dependencies": {
+        "d3-time": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/data-urls": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-5.0.0.tgz",
@@ -8686,6 +8952,14 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/delaunator": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/delaunator/-/delaunator-5.0.1.tgz",
+      "integrity": "sha512-8nvh+XBe96aCESrGOqMp/84b13H9cdKbG5P2ejQCh4d4sK9RL4371qou9drQjMhvnPmhWl5hnmqbEE0fXr9Xnw==",
+      "dependencies": {
+        "robust-predicates": "^3.0.2"
+      }
+    },
     "node_modules/delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -9005,8 +9279,7 @@
     "node_modules/emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "dev": true
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
     },
     "node_modules/encodeurl": {
       "version": "1.0.2",
@@ -9236,7 +9509,6 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
       "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==",
-      "dev": true,
       "engines": {
         "node": ">=6"
       }
@@ -10399,6 +10671,11 @@
         "node": ">= 6"
       }
     },
+    "node_modules/fast-json-patch": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/fast-json-patch/-/fast-json-patch-3.1.1.tgz",
+      "integrity": "sha512-vf6IHUX2SBcA+5/+4883dsIjpBTqmfBjmYiWK1savxQmFk4JfBMLa7ynTYOs1Rolp/T1betJxHiGD3g1Mn8lUQ=="
+    },
     "node_modules/fast-json-stable-stringify": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
@@ -10852,6 +11129,15 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "peer": true,
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
     "node_modules/get-func-name": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/get-func-name/-/get-func-name-2.0.2.tgz",
@@ -11444,6 +11730,14 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/invariant": {
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
@@ -11686,7 +11980,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
       "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -12558,6 +12851,11 @@
       "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
       "dev": true
     },
+    "node_modules/json-stringify-pretty-compact": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/json-stringify-pretty-compact/-/json-stringify-pretty-compact-3.0.0.tgz",
+      "integrity": "sha512-Rc2suX5meI0S3bfdZuA7JMFBGkJ875ApfVyq2WHELjBiiG22My/l7/8zPpH/CfFVQHuVLd8NLR0nv6vi0BYYKA=="
+    },
     "node_modules/json5": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
@@ -14471,7 +14769,6 @@
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
       "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
-      "dev": true,
       "dependencies": {
         "whatwg-url": "^5.0.0"
       },
@@ -14496,20 +14793,17 @@
     "node_modules/node-fetch/node_modules/tr46": {
       "version": "0.0.3",
       "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
-      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
-      "dev": true
+      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
     },
     "node_modules/node-fetch/node_modules/webidl-conversions": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
-      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
-      "dev": true
+      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
     },
     "node_modules/node-fetch/node_modules/whatwg-url": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
       "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
-      "dev": true,
       "dependencies": {
         "tr46": "~0.0.3",
         "webidl-conversions": "^3.0.0"
@@ -16615,6 +16909,15 @@
         "@types/unist": "*"
       }
     },
+    "node_modules/require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/requireindex": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/requireindex/-/requireindex-1.2.0.tgz",
@@ -16735,6 +17038,11 @@
         "node": "*"
       }
     },
+    "node_modules/robust-predicates": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-3.0.2.tgz",
+      "integrity": "sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg=="
+    },
     "node_modules/rollup": {
       "version": "4.9.6",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.9.6.tgz",
@@ -16858,6 +17166,11 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/rw": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
+      "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ=="
+    },
     "node_modules/sade": {
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/sade/-/sade-1.8.1.tgz",
@@ -16914,8 +17227,7 @@
     "node_modules/safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-      "dev": true
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
     "node_modules/sass": {
       "version": "1.70.0",
@@ -17313,7 +17625,6 @@
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
       "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "dev": true,
       "dependencies": {
         "emoji-regex": "^8.0.0",
         "is-fullwidth-code-point": "^3.0.0",
@@ -17411,7 +17722,6 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
       "dependencies": {
         "ansi-regex": "^5.0.1"
       },
@@ -17940,6 +18250,24 @@
       "integrity": "sha512-VSsyNPPW74RpHwR8Fc21uubwHY7wMDeJLys2IX5zJNih+OnAnaifKHo+1LHT7DAdloQ7apeaaWg8l7qnf/TnEg==",
       "dev": true
     },
+    "node_modules/topojson-client": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/topojson-client/-/topojson-client-3.1.0.tgz",
+      "integrity": "sha512-605uxS6bcYxGXw9qi62XyrV6Q3xwbndjachmNxu8HWTtVPxZfEJN9fd/SZS1Q54Sn2y0TMyMxFj/cJINqGHrKw==",
+      "dependencies": {
+        "commander": "2"
+      },
+      "bin": {
+        "topo2geo": "bin/topo2geo",
+        "topomerge": "bin/topomerge",
+        "topoquantize": "bin/topoquantize"
+      }
+    },
+    "node_modules/topojson-client/node_modules/commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
+    },
     "node_modules/tough-cookie": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.3.tgz",
@@ -18050,8 +18378,7 @@
     "node_modules/tslib": {
       "version": "2.6.2",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
-      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
-      "dev": true
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
     },
     "node_modules/tsutils": {
       "version": "3.21.0",
@@ -18766,6 +19093,456 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/vega": {
+      "version": "5.27.0",
+      "resolved": "https://registry.npmjs.org/vega/-/vega-5.27.0.tgz",
+      "integrity": "sha512-iYMQZYb2nlJBLCsUZ88pvun2sTcFcLE7GKJWisndLo+KYNMQIRePQ7X2FRuy8yvRRNxfO8XhjImh4OwxZvyYVA==",
+      "dependencies": {
+        "vega-crossfilter": "~4.1.1",
+        "vega-dataflow": "~5.7.5",
+        "vega-encode": "~4.9.2",
+        "vega-event-selector": "~3.0.1",
+        "vega-expression": "~5.1.0",
+        "vega-force": "~4.2.0",
+        "vega-format": "~1.1.1",
+        "vega-functions": "~5.14.0",
+        "vega-geo": "~4.4.1",
+        "vega-hierarchy": "~4.1.1",
+        "vega-label": "~1.2.1",
+        "vega-loader": "~4.5.1",
+        "vega-parser": "~6.2.1",
+        "vega-projection": "~1.6.0",
+        "vega-regression": "~1.2.0",
+        "vega-runtime": "~6.1.4",
+        "vega-scale": "~7.3.1",
+        "vega-scenegraph": "~4.11.2",
+        "vega-statistics": "~1.9.0",
+        "vega-time": "~2.1.1",
+        "vega-transforms": "~4.11.1",
+        "vega-typings": "~1.1.0",
+        "vega-util": "~1.17.2",
+        "vega-view": "~5.12.0",
+        "vega-view-transforms": "~4.5.9",
+        "vega-voronoi": "~4.2.2",
+        "vega-wordcloud": "~4.1.4"
+      }
+    },
+    "node_modules/vega-canvas": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/vega-canvas/-/vega-canvas-1.2.7.tgz",
+      "integrity": "sha512-OkJ9CACVcN9R5Pi9uF6MZBF06pO6qFpDYHWSKBJsdHP5o724KrsgR6UvbnXFH82FdsiTOff/HqjuaG8C7FL+9Q=="
+    },
+    "node_modules/vega-crossfilter": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/vega-crossfilter/-/vega-crossfilter-4.1.1.tgz",
+      "integrity": "sha512-yesvlMcwRwxrtAd9IYjuxWJJuAMI0sl7JvAFfYtuDkkGDtqfLXUcCzHIATqW6igVIE7tWwGxnbfvQLhLNgK44Q==",
+      "dependencies": {
+        "d3-array": "^3.2.2",
+        "vega-dataflow": "^5.7.5",
+        "vega-util": "^1.17.1"
+      }
+    },
+    "node_modules/vega-dataflow": {
+      "version": "5.7.5",
+      "resolved": "https://registry.npmjs.org/vega-dataflow/-/vega-dataflow-5.7.5.tgz",
+      "integrity": "sha512-EdsIl6gouH67+8B0f22Owr2tKDiMPNNR8lEvJDcxmFw02nXd8juimclpLvjPQriqn6ta+3Dn5txqfD117H04YA==",
+      "dependencies": {
+        "vega-format": "^1.1.1",
+        "vega-loader": "^4.5.1",
+        "vega-util": "^1.17.1"
+      }
+    },
+    "node_modules/vega-embed": {
+      "version": "6.24.0",
+      "resolved": "https://registry.npmjs.org/vega-embed/-/vega-embed-6.24.0.tgz",
+      "integrity": "sha512-ANCksO3lXhdLzQn7Mfistm1dsRwQhxTYICVpru7TMc+Ywe7C4vOLWuaVv9Qvem2IgQyuVCal0EoTMKvIVYykFg==",
+      "bundleDependencies": [
+        "yallist"
+      ],
+      "dependencies": {
+        "fast-json-patch": "^3.1.1",
+        "json-stringify-pretty-compact": "^3.0.0",
+        "semver": "^7.5.4",
+        "tslib": "^2.6.2",
+        "vega-interpreter": "^1.0.5",
+        "vega-schema-url-parser": "^2.2.0",
+        "vega-themes": "^2.14.0",
+        "vega-tooltip": "^0.34.0",
+        "yallist": "*"
+      },
+      "peerDependencies": {
+        "vega": "^5.21.0",
+        "vega-lite": "*"
+      }
+    },
+    "node_modules/vega-embed/node_modules/lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/vega-embed/node_modules/semver": {
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
+      "dependencies": {
+        "lru-cache": "^6.0.0"
+      },
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/vega-embed/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "inBundle": true
+    },
+    "node_modules/vega-encode": {
+      "version": "4.9.2",
+      "resolved": "https://registry.npmjs.org/vega-encode/-/vega-encode-4.9.2.tgz",
+      "integrity": "sha512-c3J0LYkgYeXQxwnYkEzL15cCFBYPRaYUon8O2SZ6O4PhH4dfFTXBzSyT8+gh8AhBd572l2yGDfxpEYA6pOqdjg==",
+      "dependencies": {
+        "d3-array": "^3.2.2",
+        "d3-interpolate": "^3.0.1",
+        "vega-dataflow": "^5.7.5",
+        "vega-scale": "^7.3.0",
+        "vega-util": "^1.17.1"
+      }
+    },
+    "node_modules/vega-event-selector": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/vega-event-selector/-/vega-event-selector-3.0.1.tgz",
+      "integrity": "sha512-K5zd7s5tjr1LiOOkjGpcVls8GsH/f2CWCrWcpKy74gTCp+llCdwz0Enqo013ZlGaRNjfgD/o1caJRt3GSaec4A=="
+    },
+    "node_modules/vega-expression": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/vega-expression/-/vega-expression-5.1.0.tgz",
+      "integrity": "sha512-u8Rzja/cn2PEUkhQN3zUj3REwNewTA92ExrcASNKUJPCciMkHJEjESwFYuI6DWMCq4hQElQ92iosOAtwzsSTqA==",
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "vega-util": "^1.17.1"
+      }
+    },
+    "node_modules/vega-force": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/vega-force/-/vega-force-4.2.0.tgz",
+      "integrity": "sha512-aE2TlP264HXM1r3fl58AvZdKUWBNOGkIvn4EWyqeJdgO2vz46zSU7x7TzPG4ZLuo44cDRU5Ng3I1eQk23Asz6A==",
+      "dependencies": {
+        "d3-force": "^3.0.0",
+        "vega-dataflow": "^5.7.5",
+        "vega-util": "^1.17.1"
+      }
+    },
+    "node_modules/vega-format": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/vega-format/-/vega-format-1.1.1.tgz",
+      "integrity": "sha512-Rll7YgpYbsgaAa54AmtEWrxaJqgOh5fXlvM2wewO4trb9vwM53KBv4Q/uBWCLK3LLGeBXIF6gjDt2LFuJAUtkQ==",
+      "dependencies": {
+        "d3-array": "^3.2.2",
+        "d3-format": "^3.1.0",
+        "d3-time-format": "^4.1.0",
+        "vega-time": "^2.1.1",
+        "vega-util": "^1.17.1"
+      }
+    },
+    "node_modules/vega-functions": {
+      "version": "5.14.0",
+      "resolved": "https://registry.npmjs.org/vega-functions/-/vega-functions-5.14.0.tgz",
+      "integrity": "sha512-Q0rocHmJDfQ0tS91kdN8WcEosq1e3HPK1Yf5z36SPYPmTzKw3uxUGE52tLxC832acAYqPmi8R41wAoI/yFQTPg==",
+      "dependencies": {
+        "d3-array": "^3.2.2",
+        "d3-color": "^3.1.0",
+        "d3-geo": "^3.1.0",
+        "vega-dataflow": "^5.7.5",
+        "vega-expression": "^5.1.0",
+        "vega-scale": "^7.3.0",
+        "vega-scenegraph": "^4.10.2",
+        "vega-selections": "^5.4.2",
+        "vega-statistics": "^1.8.1",
+        "vega-time": "^2.1.1",
+        "vega-util": "^1.17.1"
+      }
+    },
+    "node_modules/vega-geo": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/vega-geo/-/vega-geo-4.4.1.tgz",
+      "integrity": "sha512-s4WeZAL5M3ZUV27/eqSD3v0FyJz3PlP31XNSLFy4AJXHxHUeXT3qLiDHoVQnW5Om+uBCPDtTT1ROx1smGIf2aA==",
+      "dependencies": {
+        "d3-array": "^3.2.2",
+        "d3-color": "^3.1.0",
+        "d3-geo": "^3.1.0",
+        "vega-canvas": "^1.2.7",
+        "vega-dataflow": "^5.7.5",
+        "vega-projection": "^1.6.0",
+        "vega-statistics": "^1.8.1",
+        "vega-util": "^1.17.1"
+      }
+    },
+    "node_modules/vega-hierarchy": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/vega-hierarchy/-/vega-hierarchy-4.1.1.tgz",
+      "integrity": "sha512-h5mbrDtPKHBBQ9TYbvEb/bCqmGTlUX97+4CENkyH21tJs7naza319B15KRK0NWOHuhbGhFmF8T0696tg+2c8XQ==",
+      "dependencies": {
+        "d3-hierarchy": "^3.1.2",
+        "vega-dataflow": "^5.7.5",
+        "vega-util": "^1.17.1"
+      }
+    },
+    "node_modules/vega-interpreter": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/vega-interpreter/-/vega-interpreter-1.0.5.tgz",
+      "integrity": "sha512-po6oTOmeQqr1tzTCdD15tYxAQLeUnOVirAysgVEemzl+vfmvcEP7jQmlc51jz0jMA+WsbmE6oJywisQPu/H0Bg=="
+    },
+    "node_modules/vega-label": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/vega-label/-/vega-label-1.2.1.tgz",
+      "integrity": "sha512-n/ackJ5lc0Xs9PInCaGumYn2awomPjJ87EMVT47xNgk2bHmJoZV1Ve/1PUM6Eh/KauY211wPMrNp/9Im+7Ripg==",
+      "dependencies": {
+        "vega-canvas": "^1.2.6",
+        "vega-dataflow": "^5.7.3",
+        "vega-scenegraph": "^4.9.2",
+        "vega-util": "^1.15.2"
+      }
+    },
+    "node_modules/vega-lite": {
+      "version": "5.16.3",
+      "resolved": "https://registry.npmjs.org/vega-lite/-/vega-lite-5.16.3.tgz",
+      "integrity": "sha512-F3HO/BqlyyB1D0tf/+qy1JOmq7bHtG/nvsXcgNVUFjgVgvVKL4sMnxVnYzSsIg10x/6RFxLfwWJSd0cA8MuuUA==",
+      "peer": true,
+      "dependencies": {
+        "json-stringify-pretty-compact": "~3.0.0",
+        "tslib": "~2.6.2",
+        "vega-event-selector": "~3.0.1",
+        "vega-expression": "~5.1.0",
+        "vega-util": "~1.17.2",
+        "yargs": "~17.7.2"
+      },
+      "bin": {
+        "vl2pdf": "bin/vl2pdf",
+        "vl2png": "bin/vl2png",
+        "vl2svg": "bin/vl2svg",
+        "vl2vg": "bin/vl2vg"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "vega": "^5.24.0"
+      }
+    },
+    "node_modules/vega-loader": {
+      "version": "4.5.1",
+      "resolved": "https://registry.npmjs.org/vega-loader/-/vega-loader-4.5.1.tgz",
+      "integrity": "sha512-qy5x32SaT0YkEujQM2yKqvLGV9XWQ2aEDSugBFTdYzu/1u4bxdUSRDREOlrJ9Km3RWIOgFiCkobPmFxo47SKuA==",
+      "dependencies": {
+        "d3-dsv": "^3.0.1",
+        "node-fetch": "^2.6.7",
+        "topojson-client": "^3.1.0",
+        "vega-format": "^1.1.1",
+        "vega-util": "^1.17.1"
+      }
+    },
+    "node_modules/vega-parser": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/vega-parser/-/vega-parser-6.2.1.tgz",
+      "integrity": "sha512-F79bQXt6fMkACR+TfFl7ueehKO26yCR/3iRZxhU7/pgHerx/d8K8pf2onMguu3NAN4eitT+PPuTgkDZtcqo9Qg==",
+      "dependencies": {
+        "vega-dataflow": "^5.7.5",
+        "vega-event-selector": "^3.0.1",
+        "vega-functions": "^5.14.0",
+        "vega-scale": "^7.3.1",
+        "vega-util": "^1.17.2"
+      }
+    },
+    "node_modules/vega-projection": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/vega-projection/-/vega-projection-1.6.0.tgz",
+      "integrity": "sha512-LGUaO/kpOEYuTlul+x+lBzyuL9qmMwP1yShdUWYLW+zXoeyGbs5OZW+NbPPwLYqJr5lpXDr/vGztFuA/6g2xvQ==",
+      "dependencies": {
+        "d3-geo": "^3.1.0",
+        "d3-geo-projection": "^4.0.0",
+        "vega-scale": "^7.3.0"
+      }
+    },
+    "node_modules/vega-regression": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/vega-regression/-/vega-regression-1.2.0.tgz",
+      "integrity": "sha512-6TZoPlhV/280VbxACjRKqlE0Nv48z5g4CSNf1FmGGTWS1rQtElPTranSoVW4d7ET5eVQ6f9QLxNAiALptvEq+g==",
+      "dependencies": {
+        "d3-array": "^3.2.2",
+        "vega-dataflow": "^5.7.3",
+        "vega-statistics": "^1.9.0",
+        "vega-util": "^1.15.2"
+      }
+    },
+    "node_modules/vega-runtime": {
+      "version": "6.1.4",
+      "resolved": "https://registry.npmjs.org/vega-runtime/-/vega-runtime-6.1.4.tgz",
+      "integrity": "sha512-0dDYXyFLQcxPQ2OQU0WuBVYLRZnm+/CwVu6i6N4idS7R9VXIX5581EkCh3pZ20pQ/+oaA7oJ0pR9rJgJ6rukRQ==",
+      "dependencies": {
+        "vega-dataflow": "^5.7.5",
+        "vega-util": "^1.17.1"
+      }
+    },
+    "node_modules/vega-scale": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/vega-scale/-/vega-scale-7.3.1.tgz",
+      "integrity": "sha512-tyTlaaCpHN2Ik/PPKl/j9ThadBDjPtypqW1D7IsUSkzfoZ7RPlI2jwAaoj2C/YW5jFRbEOx3njmjogp48I5CvA==",
+      "dependencies": {
+        "d3-array": "^3.2.2",
+        "d3-interpolate": "^3.0.1",
+        "d3-scale": "^4.0.2",
+        "vega-time": "^2.1.1",
+        "vega-util": "^1.17.1"
+      }
+    },
+    "node_modules/vega-scenegraph": {
+      "version": "4.11.2",
+      "resolved": "https://registry.npmjs.org/vega-scenegraph/-/vega-scenegraph-4.11.2.tgz",
+      "integrity": "sha512-PXSvv/L7Ek+9mwOTPLpzgkXdfGCR+AcWV5aquPGrqCWoiIF49VJkKFNT1HWxj3RZJX0XKo2r7SuXvRBb9EJ1aA==",
+      "dependencies": {
+        "d3-path": "^3.1.0",
+        "d3-shape": "^3.2.0",
+        "vega-canvas": "^1.2.7",
+        "vega-loader": "^4.5.1",
+        "vega-scale": "^7.3.0",
+        "vega-util": "^1.17.1"
+      }
+    },
+    "node_modules/vega-schema-url-parser": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/vega-schema-url-parser/-/vega-schema-url-parser-2.2.0.tgz",
+      "integrity": "sha512-yAtdBnfYOhECv9YC70H2gEiqfIbVkq09aaE4y/9V/ovEFmH9gPKaEgzIZqgT7PSPQjKhsNkb6jk6XvSoboxOBw=="
+    },
+    "node_modules/vega-selections": {
+      "version": "5.4.2",
+      "resolved": "https://registry.npmjs.org/vega-selections/-/vega-selections-5.4.2.tgz",
+      "integrity": "sha512-99FUhYmg0jOJr2/K4TcEURmJRkuibrCDc8KBUX7qcQEITzrZ5R6a4QE+sarCvbb3hi8aA9GV2oyST6MQeA9mgQ==",
+      "dependencies": {
+        "d3-array": "3.2.4",
+        "vega-expression": "^5.0.1",
+        "vega-util": "^1.17.1"
+      }
+    },
+    "node_modules/vega-statistics": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/vega-statistics/-/vega-statistics-1.9.0.tgz",
+      "integrity": "sha512-GAqS7mkatpXcMCQKWtFu1eMUKLUymjInU0O8kXshWaQrVWjPIO2lllZ1VNhdgE0qGj4oOIRRS11kzuijLshGXQ==",
+      "dependencies": {
+        "d3-array": "^3.2.2"
+      }
+    },
+    "node_modules/vega-themes": {
+      "version": "2.14.0",
+      "resolved": "https://registry.npmjs.org/vega-themes/-/vega-themes-2.14.0.tgz",
+      "integrity": "sha512-9dLmsUER7gJrDp8SEYKxBFmXmpyzLlToKIjxq3HCvYjz8cnNrRGyAhvIlKWOB3ZnGvfYV+vnv3ZRElSNL31nkA==",
+      "peerDependencies": {
+        "vega": "*",
+        "vega-lite": "*"
+      }
+    },
+    "node_modules/vega-time": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/vega-time/-/vega-time-2.1.1.tgz",
+      "integrity": "sha512-z1qbgyX0Af2kQSGFbApwBbX2meenGvsoX8Nga8uyWN8VIbiySo/xqizz1KrP6NbB6R+x5egKmkjdnyNThPeEWA==",
+      "dependencies": {
+        "d3-array": "^3.2.2",
+        "d3-time": "^3.1.0",
+        "vega-util": "^1.17.1"
+      }
+    },
+    "node_modules/vega-tooltip": {
+      "version": "0.34.0",
+      "resolved": "https://registry.npmjs.org/vega-tooltip/-/vega-tooltip-0.34.0.tgz",
+      "integrity": "sha512-TtxwkcLZ5aWQTvKGlfWDou8tISGuxmqAW1AgGZjrDpf75qsXvgtbPdRAAls2LZMqDxpr5T1kMEZs9XbSpiI8yw==",
+      "dependencies": {
+        "vega-util": "^1.17.2"
+      }
+    },
+    "node_modules/vega-transforms": {
+      "version": "4.11.1",
+      "resolved": "https://registry.npmjs.org/vega-transforms/-/vega-transforms-4.11.1.tgz",
+      "integrity": "sha512-DDbqEQnvy9/qEvv0bAKPqAuzgaNb7Lh2xKJFom2Yzx4tZHCl8dnKxC1lH9JnJlAMdtZuiNLPARUkf3pCNQ/olw==",
+      "dependencies": {
+        "d3-array": "^3.2.2",
+        "vega-dataflow": "^5.7.5",
+        "vega-statistics": "^1.8.1",
+        "vega-time": "^2.1.1",
+        "vega-util": "^1.17.1"
+      }
+    },
+    "node_modules/vega-typings": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/vega-typings/-/vega-typings-1.1.0.tgz",
+      "integrity": "sha512-uI6RWlMiGRhsgmw/LzJtjCc0kwhw2f0JpyNMTAnOy90kE4e4CiaZN5nJp8S9CcfcBoPEZHc166AOn2SSNrKn3A==",
+      "dependencies": {
+        "@types/geojson": "7946.0.4",
+        "vega-event-selector": "^3.0.1",
+        "vega-expression": "^5.1.0",
+        "vega-util": "^1.17.2"
+      }
+    },
+    "node_modules/vega-util": {
+      "version": "1.17.2",
+      "resolved": "https://registry.npmjs.org/vega-util/-/vega-util-1.17.2.tgz",
+      "integrity": "sha512-omNmGiZBdjm/jnHjZlywyYqafscDdHaELHx1q96n5UOz/FlO9JO99P4B3jZg391EFG8dqhWjQilSf2JH6F1mIw=="
+    },
+    "node_modules/vega-view": {
+      "version": "5.12.0",
+      "resolved": "https://registry.npmjs.org/vega-view/-/vega-view-5.12.0.tgz",
+      "integrity": "sha512-T3GY7UJNVZGrCUrAmE/OCrkoJQyOT/2dCgXgy9EvDMVv/sdrn7o1TMKhSV18nIr0m5A7m4mgKwrmguAfROY85g==",
+      "dependencies": {
+        "d3-array": "^3.2.2",
+        "d3-timer": "^3.0.1",
+        "vega-dataflow": "^5.7.5",
+        "vega-format": "^1.1.1",
+        "vega-functions": "^5.13.1",
+        "vega-runtime": "^6.1.4",
+        "vega-scenegraph": "^4.10.2",
+        "vega-util": "^1.17.1"
+      }
+    },
+    "node_modules/vega-view-transforms": {
+      "version": "4.5.9",
+      "resolved": "https://registry.npmjs.org/vega-view-transforms/-/vega-view-transforms-4.5.9.tgz",
+      "integrity": "sha512-NxEq4ZD4QwWGRrl2yDLnBRXM9FgCI+vvYb3ZC2+nVDtkUxOlEIKZsMMw31op5GZpfClWLbjCT3mVvzO2xaTF+g==",
+      "dependencies": {
+        "vega-dataflow": "^5.7.5",
+        "vega-scenegraph": "^4.10.2",
+        "vega-util": "^1.17.1"
+      }
+    },
+    "node_modules/vega-voronoi": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/vega-voronoi/-/vega-voronoi-4.2.2.tgz",
+      "integrity": "sha512-Bq2YOp2MGphhQnUuLwl3dsyBs6MuEU86muTjDbBJg33+HkZtE1kIoQZr+EUHa46NBsY1NzSKddOTu8wcaFrWiQ==",
+      "dependencies": {
+        "d3-delaunay": "^6.0.2",
+        "vega-dataflow": "^5.7.5",
+        "vega-util": "^1.17.1"
+      }
+    },
+    "node_modules/vega-wordcloud": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/vega-wordcloud/-/vega-wordcloud-4.1.4.tgz",
+      "integrity": "sha512-oeZLlnjiusLAU5vhk0IIdT5QEiJE0x6cYoGNq1th+EbwgQp153t4r026fcib9oq15glHFOzf81a8hHXHSJm1Jw==",
+      "dependencies": {
+        "vega-canvas": "^1.2.7",
+        "vega-dataflow": "^5.7.5",
+        "vega-scale": "^7.3.0",
+        "vega-statistics": "^1.8.1",
+        "vega-util": "^1.17.1"
+      }
+    },
     "node_modules/vfile": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.1.tgz",
@@ -20398,6 +21175,15 @@
         "node": ">=0.4"
       }
     },
+    "node_modules/y18n": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+      "peer": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/yallist": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
@@ -20413,6 +21199,33 @@
         "node": ">= 14"
       }
     },
+    "node_modules/yargs": {
+      "version": "17.7.2",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
+      "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
+      "peer": true,
+      "dependencies": {
+        "cliui": "^8.0.1",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.3",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^21.1.1"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/yargs-parser": {
+      "version": "21.1.1",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+      "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/yauzl": {
       "version": "2.10.0",
       "resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.10.0.tgz",
diff --git a/package.json b/package.json
index 71be6d5..34f67c5 100644
--- a/package.json
+++ b/package.json
@@ -48,6 +48,8 @@
   "dependencies": {
     "@mdi/font": "^7.4.47",
     "@protobuf-ts/runtime": "^2.9.3",
+    "vega": "^5.27.0",
+    "vega-embed": "^6.24.0",
     "vite-plugin-css-injected-by-js": "^3.3.1",
     "vite-plugin-static-copy": "^1.0.1",
     "vue": "^3.3.11",
diff --git a/src/components/GeneExpressionCard/GeneExpressionCard.spec.ts b/src/components/GeneExpressionCard/GeneExpressionCard.spec.ts
new file mode 100644
index 0000000..6741529
--- /dev/null
+++ b/src/components/GeneExpressionCard/GeneExpressionCard.spec.ts
@@ -0,0 +1,107 @@
+import { describe, expect, it, vi } from 'vitest'
+
+import { setupMountedComponents } from '@/lib/testUtils'
+import { GtexTissueRecord } from '@/pbs/annonars/genes/base'
+
+import GeneExpressionCard from './GeneExpressionCard.vue'
+
+// A few GtexTissueRecords as test data
+const fixtureGtexTissueRecords = [
+  {
+    tissue: 'GTEX_TISSUE_ADIPOSE_TISSUE',
+    tissueDetailed: 'GTEX_TISSUE_DETAILED_ADIPOSE_SUBCUTANEOUS',
+    tpms: [7.357, 12.695, 14.5, 16.74, 31.88]
+  },
+  {
+    tissue: 'GTEX_TISSUE_ADIPOSE_TISSUE',
+    tissueDetailed: 'GTEX_TISSUE_DETAILED_ADIPOSE_VISCERAL_OMENTUM',
+    tpms: [1.562, 12.45, 15.63, 19.15, 31.99]
+  },
+  {
+    tissue: 'GTEX_TISSUE_ADRENAL_GLAND',
+    tissueDetailed: 'GTEX_TISSUE_DETAILED_ADRENAL_GLAND',
+    tpms: [2.171, 10.375, 12.23, 14.1975, 32.68]
+  }
+].map((record) => GtexTissueRecord.fromJson(record))
+
+describe.concurrent('GeneExpressionCard', async () => {
+  it('renders the GeneExpressionCard with data', async () => {
+    // arrange:
+    // Disable warinings, because of invalid test data
+    console.warn = vi.fn()
+    const { wrapper } = await setupMountedComponents(
+      { component: GeneExpressionCard },
+      {
+        props: {
+          geneSymbol: 'BRCA1',
+          expressionRecords: fixtureGtexTissueRecords,
+          ensemblGeneId: 'ENSG00000012048'
+        }
+      }
+    )
+
+    // act: nothing, only test rendering
+
+    // assert:
+    expect(wrapper.text()).toContain('Tissue-Specific Gene Expression from GTeX')
+    const vegaPlot = wrapper.findComponent({ name: 'VegaPlot' })
+    expect(vegaPlot.exists()).toBe(true)
+    // Find gtex linkout
+    const gtexLink = wrapper.find('#expression-card-gtex-portal')
+    expect(gtexLink.exists()).toBe(true)
+    expect(gtexLink.attributes('href')).toBe('https://gtexportal.org/home/gene/ENSG00000012048')
+  })
+
+  it('renders skelleton loader if ENSEMBL gene ID is undefined', async () => {
+    // arrange:
+    // Disable warinings, because of invalid test data
+    console.warn = vi.fn()
+    const { wrapper } = await setupMountedComponents(
+      { component: GeneExpressionCard },
+      {
+        props: {
+          geneSymbol: 'BRCA1',
+          expressionRecords: fixtureGtexTissueRecords,
+          ensemblGeneId: undefined
+        }
+      }
+    )
+
+    // act: nothing, only test rendering
+
+    // assert:
+    expect(wrapper.text()).not.toContain('Tissue-Specific Gene Expression from GTeX')
+    const vegaPlot = wrapper.findComponent({ name: 'VegaPlot' })
+    expect(vegaPlot.exists()).toBe(false)
+    // Find VSkeletonLoader
+    const skeletonLoader = wrapper.findComponent({ name: 'VSkeletonLoader' })
+    expect(skeletonLoader.exists()).toBe(true)
+  })
+
+  it('does not blow up with undefined data', async () => {
+    // arrange:
+    // Disable warinings, because of invalid test data
+    console.warn = vi.fn()
+    const { wrapper } = await setupMountedComponents(
+      { component: GeneExpressionCard },
+      {
+        props: {
+          geneSymbol: 'BRCA1',
+          expressionRecords: undefined,
+          ensemblGeneId: 'ENSG00000012048'
+        }
+      }
+    )
+
+    // act: nothing, only test rendering
+
+    // assert:
+    expect(wrapper.text()).toContain('Tissue-Specific Gene Expression from GTeX')
+    const vegaPlot = wrapper.findComponent({ name: 'VegaPlot' })
+    expect(vegaPlot.exists()).toBe(true)
+    // Find gtex linkout
+    const gtexLink = wrapper.find('#expression-card-gtex-portal')
+    expect(gtexLink.exists()).toBe(true)
+    expect(gtexLink.attributes('href')).toBe('https://gtexportal.org/home/gene/ENSG00000012048')
+  })
+})
diff --git a/src/components/GeneExpressionCard/GeneExpressionCard.stories.ts b/src/components/GeneExpressionCard/GeneExpressionCard.stories.ts
new file mode 100644
index 0000000..210802a
--- /dev/null
+++ b/src/components/GeneExpressionCard/GeneExpressionCard.stories.ts
@@ -0,0 +1,56 @@
+import { JsonValue } from '@protobuf-ts/runtime'
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+import { Record as GeneInfoRecord } from '../../pbs/annonars/genes/base'
+import geneInfoBrca1Json from '../GenePathogenicityCard/fixture.geneInfo.BRCA1.json'
+import geneInfoTgdsJson from '../GenePathogenicityCard/fixture.geneInfo.TGDS.json'
+import GeneExpressionCard from './GeneExpressionCard.vue'
+
+// Here, fixture data is loaded via `import` from JSON file.  Reading the file
+// as in the tests fails with "process is not defined" error in the browser.
+
+// @ts-ignore
+const geneInfoTgds = GeneInfoRecord.fromJson(geneInfoTgdsJson as JsonValue)
+// @ts-ignore
+const geneInfoBrca1 = GeneInfoRecord.fromJson(geneInfoBrca1Json as JsonValue)
+
+const meta = {
+  title: 'Gene/GeneExpressionCard',
+  component: GeneExpressionCard,
+  tags: ['autodocs'],
+  argTypes: {
+    geneSymbol: { control: 'text' },
+    expressionRecords: { control: 'object' },
+    ensemblGeneId: { control: 'text' }
+  },
+  args: {
+    geneSymbol: geneInfoBrca1.hgnc!.symbol,
+    expressionRecords: geneInfoBrca1.gtex!.records,
+    ensemblGeneId: geneInfoBrca1.hgnc!.ensemblGeneId
+  }
+} satisfies Meta<typeof GeneExpressionCard>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const TGDS: Story = {
+  args: {
+    geneSymbol: geneInfoTgds.hgnc!.symbol,
+    expressionRecords: geneInfoTgds.gtex!.records,
+    ensemblGeneId: geneInfoTgds.hgnc!.ensemblGeneId
+  }
+}
+
+export const BRCA1: Story = {
+  args: {
+    geneSymbol: geneInfoBrca1.hgnc!.symbol,
+    expressionRecords: geneInfoBrca1.gtex!.records,
+    ensemblGeneId: geneInfoBrca1.hgnc!.ensemblGeneId
+  }
+}
+
+export const UndefinedGeneSymbol: Story = {
+  args: {
+    ensemblGeneId: undefined
+  }
+}
diff --git a/src/components/GeneExpressionCard/GeneExpressionCard.vue b/src/components/GeneExpressionCard/GeneExpressionCard.vue
new file mode 100644
index 0000000..f2f6b3e
--- /dev/null
+++ b/src/components/GeneExpressionCard/GeneExpressionCard.vue
@@ -0,0 +1,192 @@
+<script setup lang="ts">
+/**
+ * This component displays a VCard with gene expression information from GTEx.
+ */
+import { computed, ref } from 'vue'
+
+import { GtexTissueRecord } from '../../pbs/annonars/genes/base'
+import DocsLink from '../DocsLink/DocsLink.vue'
+import VegaPlot from '../VegaPlot/VegaPlot.vue'
+import { TISSUE_DETAILED_LABELS, TISSUE_LABELS } from './constants'
+
+const props = withDefaults(
+  defineProps<{
+    /** Gene symbol */
+    geneSymbol?: string
+    /** Expression records */
+    expressionRecords?: GtexTissueRecord[]
+    /** Ensembl gene ID */
+    ensemblGeneId?: string
+  }>(),
+  {
+    geneSymbol: '',
+    expressionRecords: () => [],
+    ensemblGeneId: ''
+  }
+)
+
+// -- interactive plot configuration -------------------------------------------
+
+/** Sort order. */
+enum SortOrder {
+  /** Sort alphabetically by label */
+  ALPHA = 'alphabetical',
+  /** Sort by TPM metric */
+  TPM = 'tpm'
+}
+
+/** Sort order configuration (currently static) */
+const sortOrder = ref<SortOrder>(SortOrder.TPM)
+
+// -- data for Vega plot -------------------------------------------------------
+
+/** Interface for the plot data. */
+interface VegaData {
+  /** Tissue label */
+  tissue: string
+  /** Detailed tissue label */
+  tissueDetailed: string
+  /** Lower quantile */
+  lower: number
+  /** First quartile */
+  q1: number
+  /** Median */
+  median: number
+  /** Third quartile */
+  q3: number
+  /** Upper quantile */
+  upper: number
+}
+
+/** Compute data values for Vega plot. */
+const vegaData = computed<VegaData[]>(() => {
+  if (!props?.expressionRecords?.length) {
+    return []
+  }
+
+  const expressionRecords = Object.assign([], props?.expressionRecords)
+  if (sortOrder.value === SortOrder.ALPHA) {
+    expressionRecords.sort((a: GtexTissueRecord, b: GtexTissueRecord) => {
+      const aTissue = TISSUE_LABELS[a.tissue]
+      const bTissue = TISSUE_LABELS[b.tissue]
+      if (aTissue < bTissue) {
+        return -1
+      } else if (aTissue > bTissue) {
+        return 1
+      } else {
+        return 0
+      }
+    })
+  } else {
+    expressionRecords.sort((a: GtexTissueRecord, b: GtexTissueRecord) => {
+      if (a.tpms[2] < b.tpms[2]) {
+        return 1
+      } else if (a.tpms[2] > b.tpms[2]) {
+        return -1
+      } else {
+        return 0
+      }
+    })
+  }
+  return expressionRecords.map((record: GtexTissueRecord) => ({
+    tissue: TISSUE_LABELS[record.tissue],
+    tissueDetailed: TISSUE_DETAILED_LABELS[record.tissueDetailed],
+    lower: record.tpms[0],
+    q1: record.tpms[1],
+    median: record.tpms[2],
+    q3: record.tpms[3],
+    upper: record.tpms[4]
+  }))
+})
+
+/** The encoding for the Vega plot. */
+const vegaEncoding = {
+  x: {
+    field: 'tissueDetailed',
+    type: 'nominal',
+    title: null,
+    axis: { labelAngle: 45 }
+  }
+}
+
+/** The layer definition for the Vega plot. */
+const vegaLayer = [
+  {
+    mark: { type: 'rule', tooltip: { content: 'data' } },
+    encoding: {
+      y: {
+        field: 'lower',
+        type: 'quantitative',
+        scale: { zero: false },
+        title: 'TPM'
+      },
+      y2: { field: 'upper' }
+    }
+  },
+  {
+    mark: { type: 'bar', size: 14, tooltip: { content: 'data' } },
+    encoding: {
+      y: { field: 'q1', type: 'quantitative' },
+      y2: { field: 'q3' },
+      color: { field: 'tissue', type: 'nominal', legend: null }
+    }
+  },
+  {
+    mark: {
+      type: 'tick',
+      color: 'white',
+      size: 14,
+      tooltip: { content: 'data' }
+    },
+    encoding: {
+      y: { field: 'median', type: 'quantitative' }
+    }
+  }
+]
+</script>
+
+<template>
+  <!-- no ENSG => display loader -->
+  <template v-if="!ensemblGeneId?.length">
+    <v-skeleton-loader class="mt-3 mx-auto border" type="image,button" />
+  </template>
+
+  <!-- otherwise, display actual card -->
+  <template v-else>
+    <v-card class="mt-3">
+      <v-card-title class="pb-0 pr-2">
+        Expression
+        <DocsLink anchor="expression" />
+      </v-card-title>
+      <v-card-subtitle class="text-overline">
+        Tissue-Specific Gene Expression from GTeX
+      </v-card-subtitle>
+      <v-card-text class="pt-3 pb-0">
+        <v-sheet color="background" class="pa-2">
+          <VegaPlot
+            data-name="expression"
+            :data-values="vegaData"
+            :encoding="vegaEncoding"
+            :layer="vegaLayer"
+            :mark="false"
+            :height="300"
+            :width="1200"
+            background="#eeeeee"
+            renderer="svg"
+          />
+        </v-sheet>
+      </v-card-text>
+      <v-card-actions>
+        <v-btn
+          id="expression-card-gtex-portal"
+          :href="`https://gtexportal.org/home/gene/${ensemblGeneId ?? ''}`"
+          target="_blank"
+          prepend-icon="mdi-launch"
+        >
+          GTeX Portal
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </template>
+</template>
+./constants
diff --git a/src/components/GeneExpressionCard/constants.ts b/src/components/GeneExpressionCard/constants.ts
new file mode 100644
index 0000000..e42c809
--- /dev/null
+++ b/src/components/GeneExpressionCard/constants.ts
@@ -0,0 +1,109 @@
+import { GtexTissue, GtexTissueDetailed } from '../../pbs/annonars/genes/base'
+
+export const TISSUE_LABELS: { [Key in GtexTissue]: string } = {
+  [GtexTissue.GTEX_TISSUE_UNKNOWN]: 'Unknown',
+  [GtexTissue.GTEX_TISSUE_ADIPOSE_TISSUE]: 'Adipose Tissue',
+  [GtexTissue.GTEX_TISSUE_ADRENAL_GLAND]: 'Adrenal Gland',
+  [GtexTissue.GTEX_TISSUE_BLADDER]: 'Bladder',
+  [GtexTissue.GTEX_TISSUE_BLOOD]: 'Blood',
+  [GtexTissue.GTEX_TISSUE_BLOOD_VESSEL]: 'Blood Vessel',
+  [GtexTissue.GTEX_TISSUE_BONE_MARROW]: 'Bone Marrow',
+  [GtexTissue.GTEX_TISSUE_BRAIN]: 'Brain',
+  [GtexTissue.GTEX_TISSUE_BREAST]: 'Breast',
+  [GtexTissue.GTEX_TISSUE_CERVIX_UTERI]: 'Cervix Uteri',
+  [GtexTissue.GTEX_TISSUE_COLON]: 'Colon',
+  [GtexTissue.GTEX_TISSUE_ESOPHAGUS]: 'Esophagus',
+  [GtexTissue.GTEX_TISSUE_FALLOPIAN_TUBE]: 'Fallopian Tube',
+  [GtexTissue.GTEX_TISSUE_HEART]: 'Heart',
+  [GtexTissue.GTEX_TISSUE_KIDNEY]: 'Kidney',
+  [GtexTissue.GTEX_TISSUE_LIVER]: 'Liver',
+  [GtexTissue.GTEX_TISSUE_LUNG]: 'Lung',
+  [GtexTissue.GTEX_TISSUE_MUSCLE]: 'Muscle',
+  [GtexTissue.GTEX_TISSUE_NERVE]: 'Nerve',
+  [GtexTissue.GTEX_TISSUE_OVARY]: 'Ovary',
+  [GtexTissue.GTEX_TISSUE_PANCREAS]: 'Pancreas',
+  [GtexTissue.GTEX_TISSUE_PITUITARY]: 'Pituitary',
+  [GtexTissue.GTEX_TISSUE_PROSTATE]: 'Prostate',
+  [GtexTissue.GTEX_TISSUE_SALIVARY_GLAND]: 'Salivary Gland',
+  [GtexTissue.GTEX_TISSUE_SKIN]: 'Skin',
+  [GtexTissue.GTEX_TISSUE_SMALL_INTESTINE]: 'Small Intestine',
+  [GtexTissue.GTEX_TISSUE_SPLEEN]: 'Spleen',
+  [GtexTissue.GTEX_TISSUE_STOMACH]: 'Stomach',
+  [GtexTissue.GTEX_TISSUE_TESTIS]: 'Testis',
+  [GtexTissue.GTEX_TISSUE_THYROID]: 'Thyroid',
+  [GtexTissue.GTEX_TISSUE_UTERUS]: 'Uterus',
+  [GtexTissue.GTEX_TISSUE_VAGINA]: 'Vagina'
+}
+
+export const TISSUE_DETAILED_LABELS: { [Key in GtexTissueDetailed]: string } = {
+  [GtexTissueDetailed.GTEX_TISSUE_DETAILED_UNKNOWN]: 'Unknown',
+  [GtexTissueDetailed.GTEX_TISSUE_DETAILED_ADIPOSE_SUBCUTANEOUS]: 'Adipose - Subcutaneous',
+  [GtexTissueDetailed.GTEX_TISSUE_DETAILED_ADIPOSE_VISCERAL_OMENTUM]:
+    'Adipose - Visceral (Omentum)',
+  [GtexTissueDetailed.GTEX_TISSUE_DETAILED_ADRENAL_GLAND]: 'Adrenal Gland',
+  [GtexTissueDetailed.GTEX_TISSUE_DETAILED_ARTERY_AORTA]: 'Artery - Aorta',
+  [GtexTissueDetailed.GTEX_TISSUE_DETAILED_ARTERY_CORONARY]: 'Artery - Coronary',
+  [GtexTissueDetailed.GTEX_TISSUE_DETAILED_ARTERY_TIBIAL]: 'Artery - Tibial',
+  [GtexTissueDetailed.GTEX_TISSUE_DETAILED_BLADDER]: 'Bladder',
+  [GtexTissueDetailed.GTEX_TISSUE_DETAILED_BRAIN_AMYGDALA]: 'Brain - Amygdala',
+  [GtexTissueDetailed.GTEX_TISSUE_DETAILED_BRAIN_ANTERIOR_CINGULATE_CORTEX]:
+    'Brain - Anterior cingulate cortex (BA24)',
+  [GtexTissueDetailed.GTEX_TISSUE_DETAILED_BRAIN_CAUDATE_BASAL_GANGLIA]:
+    'Brain - Caudate (basal ganglia)',
+  [GtexTissueDetailed.GTEX_TISSUE_DETAILED_BRAIN_CEREBELLAR_HEMISPHERE]:
+    'Brain - Cerebellar Hemisphere',
+  [GtexTissueDetailed.GTEX_TISSUE_DETAILED_BRAIN_CEREBELLUM]: 'Brain - Cerebellum',
+  [GtexTissueDetailed.GTEX_TISSUE_DETAILED_BRAIN_CORTEX]: 'Brain - Cortex',
+  [GtexTissueDetailed.GTEX_TISSUE_DETAILED_BRAIN_FRONTAL_CORTEX]: 'Brain - Frontal Cortex (BA9)',
+  [GtexTissueDetailed.GTEX_TISSUE_DETAILED_BRAIN_HIPPOCAMPUS]: 'Brain - Hippocampus',
+  [GtexTissueDetailed.GTEX_TISSUE_DETAILED_BRAIN_HYPOTHALAMUS]: 'Brain - Hypothalamus',
+  [GtexTissueDetailed.GTEX_TISSUE_DETAILED_BRAIN_NUCLEUS_ACCUMBENS]:
+    'Brain - Nucleus accumbens (basal ganglia)',
+  [GtexTissueDetailed.GTEX_TISSUE_DETAILED_BRAIN_PUTAMEN_BASAL_GANGLIA]:
+    'Brain - Putamen (basal ganglia)',
+  [GtexTissueDetailed.GTEX_TISSUE_DETAILED_BRAIN_SPINAL_CORD]: 'Brain - Spinal cord (cervical c-1)',
+  [GtexTissueDetailed.GTEX_TISSUE_DETAILED_BRAIN_SUBSTANTIA_NIGRA]: 'Brain - Substantia nigra',
+  [GtexTissueDetailed.GTEX_TISSUE_DETAILED_BREAST_MAMMARY_TISSUE]: 'Breast - Mammary Tissue',
+  [GtexTissueDetailed.GTEX_TISSUE_DETAILED_CELLS_CULTURED_FIBROBLASTS]:
+    'Cells - Cultured fibroblasts',
+  [GtexTissueDetailed.GTEX_TISSUE_DETAILED_CELLS_EBV_TRANSFORMED_LYMPHOCYTES]:
+    'Cells - EBV-transformed lymphocytes',
+  [GtexTissueDetailed.GTEX_TISSUE_DETAILED_CELLS_LEUKEMIA_CELL_LINE]:
+    'Cells - Leukemia cell line (CML)',
+  [GtexTissueDetailed.GTEX_TISSUE_DETAILED_CERVIX_ECTOCERVIX]: 'Cervix - Ectocervix',
+  [GtexTissueDetailed.GTEX_TISSUE_DETAILED_CERVIX_ENDOCERVIX]: 'Cervix - Endocervix',
+  [GtexTissueDetailed.GTEX_TISSUE_DETAILED_COLON_SIGMOID]: 'Colon - Sigmoid',
+  [GtexTissueDetailed.GTEX_TISSUE_DETAILED_COLON_TRANSVERSE]: 'Colon - Transverse',
+  [GtexTissueDetailed.GTEX_TISSUE_DETAILED_ESOPHAGUS_GASTROESOPHAGEAL_JUNCTION]:
+    'Esophagus - Gastroesophageal Junction',
+  [GtexTissueDetailed.GTEX_TISSUE_DETAILED_ESOPHAGUS_MUCOSA]: 'Esophagus - Mucosa',
+  [GtexTissueDetailed.GTEX_TISSUE_DETAILED_ESOPHAGUS_MUSCULARIS]: 'Esophagus - Muscularis',
+  [GtexTissueDetailed.GTEX_TISSUE_DETAILED_FALLOPIAN_TUBE]: 'Fallopian Tube',
+  [GtexTissueDetailed.GTEX_TISSUE_DETAILED_HEART_ATRIAL_APPENDAGE]: 'Heart - Atrial Appendage',
+  [GtexTissueDetailed.GTEX_TISSUE_DETAILED_HEART_LEFT_VENTRICLE]: 'Heart - Left Ventricle',
+  [GtexTissueDetailed.GTEX_TISSUE_DETAILED_KIDNEY_CORTEX]: 'Kidney - Cortex',
+  [GtexTissueDetailed.GTEX_TISSUE_DETAILED_KIDNEY_MEDULLA]: 'Kidney - Medulla',
+  [GtexTissueDetailed.GTEX_TISSUE_DETAILED_LIVER]: 'Liver',
+  [GtexTissueDetailed.GTEX_TISSUE_DETAILED_LUNG]: 'Lung',
+  [GtexTissueDetailed.GTEX_TISSUE_DETAILED_MINOR_SALIVARY_GLAND]: 'Minor Salivary Gland',
+  [GtexTissueDetailed.GTEX_TISSUE_DETAILED_MUSCLE_SKELETAL]: 'Muscle - Skeletal',
+  [GtexTissueDetailed.GTEX_TISSUE_DETAILED_NERVE_TIBIAL]: 'Nerve - Tibial',
+  [GtexTissueDetailed.GTEX_TISSUE_DETAILED_OVARY]: 'Ovary',
+  [GtexTissueDetailed.GTEX_TISSUE_DETAILED_PANCREAS]: 'Pancreas',
+  [GtexTissueDetailed.GTEX_TISSUE_DETAILED_PITUITARY]: 'Pituitary',
+  [GtexTissueDetailed.GTEX_TISSUE_DETAILED_PROSTATE]: 'Prostate',
+  [GtexTissueDetailed.GTEX_TISSUE_DETAILED_SALIVARY_GLAND]: 'Salivary Gland',
+  [GtexTissueDetailed.GTEX_TISSUE_DETAILED_SKIN_NOT_SUN_EXPOSED_SUPRAPUBIC]:
+    'Skin - Not Sun Exposed (Suprapubic)',
+  [GtexTissueDetailed.GTEX_TISSUE_DETAILED_SKIN_SUN_EXPOSED_LOWER_LEG]:
+    'Skin - Sun Exposed (Lower leg)',
+  [GtexTissueDetailed.GTEX_TISSUE_DETAILED_SMALL_INTESTINE_TERMINAL_ILEUM]:
+    'Small Intestine - Terminal Ileum',
+  [GtexTissueDetailed.GTEX_TISSUE_DETAILED_SPLEEN]: 'Spleen',
+  [GtexTissueDetailed.GTEX_TISSUE_DETAILED_STOMACH]: 'Stomach',
+  [GtexTissueDetailed.GTEX_TISSUE_DETAILED_TESTIS]: 'Testis',
+  [GtexTissueDetailed.GTEX_TISSUE_DETAILED_THYROID]: 'Thyroid',
+  [GtexTissueDetailed.GTEX_TISSUE_DETAILED_UTERUS]: 'Uterus',
+  [GtexTissueDetailed.GTEX_TISSUE_DETAILED_VAGINA]: 'Vagina',
+  [GtexTissueDetailed.GTEX_TISSUE_DETAILED_WHOLE_BLOOD]: 'Whole Blood'
+}
diff --git a/src/components/GenePathogenicityCard/GenePathogenicityCard.vue b/src/components/GenePathogenicityCard/GenePathogenicityCard.vue
index 9a47dcf..07c9109 100644
--- a/src/components/GenePathogenicityCard/GenePathogenicityCard.vue
+++ b/src/components/GenePathogenicityCard/GenePathogenicityCard.vue
@@ -1,4 +1,7 @@
 <script setup lang="ts">
+/**
+ * This component displays a VCard with gene pathogenicity information.
+ */
 import { roundIt } from '../../lib/utils'
 import { Record as GeneInfoRecord } from '../../pbs/annonars/genes/base'
 import DocsLink from '../DocsLink/DocsLink.vue'
diff --git a/src/components/VegaPlot/VegaPlot.spec.ts b/src/components/VegaPlot/VegaPlot.spec.ts
new file mode 100644
index 0000000..e2b38a5
--- /dev/null
+++ b/src/components/VegaPlot/VegaPlot.spec.ts
@@ -0,0 +1,83 @@
+import { describe, expect, it } from 'vitest'
+
+import { setupMountedComponents } from '../../lib/testUtils'
+import VegaPlot from './VegaPlot.vue'
+
+/** Example Vega plot data */
+const vegaData = [
+  {
+    tissue: 'Adipose Tissue',
+    tissueDetailed: 'Adipose - Subcutaneous',
+    lower: 0.2209,
+    q1: 1.101,
+    median: 1.482,
+    q3: 1.9555,
+    upper: 4.207
+  },
+  {
+    tissue: 'Adipose Tissue',
+    tissueDetailed: 'Adipose - Visceral (Omentum)',
+    lower: 0.1854,
+    q1: 0.809,
+    median: 1.122,
+    q3: 1.497,
+    upper: 3.968
+  }
+]
+
+/** Example Vega plot encoding */
+const vegaEncoding = {
+  x: { field: 'tissueDetailed', type: 'nominal', title: null, axis: { labelAngle: 45 } }
+}
+
+/** Example Vega plot layer */
+const vegaLayer = [
+  {
+    mark: { type: 'rule', tooltip: { content: 'data' } },
+    encoding: {
+      y: { field: 'lower', type: 'quantitative', scale: { zero: false }, title: 'TPM' },
+      y2: { field: 'upper' }
+    }
+  },
+  {
+    mark: { type: 'bar', size: 14, tooltip: { content: 'data' } },
+    encoding: {
+      y: { field: 'q1', type: 'quantitative' },
+      y2: { field: 'q3' },
+      color: { field: 'tissue', type: 'nominal', legend: null }
+    }
+  },
+  {
+    mark: { type: 'tick', color: 'white', size: 14, tooltip: { content: 'data' } },
+    encoding: { y: { field: 'median', type: 'quantitative' } }
+  }
+]
+
+describe.concurrent('VegaPlot', async () => {
+  it('renders the VegaPlot info', async () => {
+    // arrange:
+    const { wrapper } = await setupMountedComponents(
+      { component: VegaPlot },
+      {
+        props: {
+          description: 'Example description',
+          dataValues: vegaData,
+          dataName: 'clinvar',
+          encoding: vegaEncoding,
+          layer: vegaLayer,
+          width: 500,
+          height: 500,
+          mark: true,
+          renderer: 'canvas',
+          transform: []
+        }
+      }
+    )
+    // act: nothing to do
+
+    // assert:
+    expect(wrapper.text()).toContain('Save as PNG')
+    expect(wrapper.text()).toContain('View Source')
+    expect(wrapper.text()).toContain('Open in Vega Editor')
+  })
+})
diff --git a/src/components/VegaPlot/VegaPlot.vue b/src/components/VegaPlot/VegaPlot.vue
new file mode 100644
index 0000000..b824df1
--- /dev/null
+++ b/src/components/VegaPlot/VegaPlot.vue
@@ -0,0 +1,143 @@
+<script setup lang="ts">
+/** Simple wrapper around vega for plotting data.
+ *
+ * The "vue-vega" library has not been updated for a long time.
+ */
+import * as vega from 'vega'
+import vegaEmbed from 'vega-embed'
+import { type Ref, computed, onMounted, ref, watch } from 'vue'
+
+/* istanbul ignore if  */
+const widthPlot = computed(() => {
+  const windowWidth = window.innerWidth
+  if (windowWidth < 1264) {
+    return windowWidth - 210
+  } else {
+    return windowWidth - 600
+  }
+})
+
+/** Define the props. */
+const props = defineProps<{
+  description?: string
+  dataValues?: any[]
+  dataName?: string
+  encoding?: any
+  params?: any
+  layer?: any
+  width?: number | string | null
+  height?: number | string | null
+  mark?: boolean
+  renderer?: string
+  transform?: any[]
+  background?: string
+}>()
+
+/** The <div> with the plot. */
+const plotDivRef = ref(null)
+/** The vega plot once initialized. */
+const vegaViewRef = ref(null)
+
+/** The vega specification. */
+const vegaLiteSpec = computed(() => {
+  const res = {
+    $schema: 'https://vega.github.io/schema/vega-lite/v5.json',
+    width: props.width === null ? widthPlot.value : props.width,
+    height: props.height,
+    description: props.description,
+    params: props.params,
+    background: props.background ?? 'transparent',
+    data: {
+      values: props.dataValues,
+      name: props.dataName
+    },
+    encoding: props.encoding,
+    transform: props.transform,
+    mark: true,
+    layer: []
+  }
+  if (props.mark !== undefined && props.mark !== null && props.mark !== false) {
+    res.mark = props.mark as any
+  }
+  if (props.layer !== undefined && props.layer !== null) {
+    res.layer = props.layer as any
+  }
+  return res
+})
+
+/** Make component reactive to props.data changes. */
+watch(
+  () => props.dataValues,
+  (newValue) => {
+    if (vegaViewRef.value !== null) {
+      const changeset = vega
+        .changeset()
+        .remove(() => true)
+        .insert(newValue)
+
+      ;(vegaViewRef.value as any).change(props.dataName, changeset).run()
+      ;(vegaViewRef.value as any).resize()
+    }
+  }
+)
+
+/** `ref` to `vegaEmbed()` result so we can `await` the rendering. */
+const vegaEmbedPromiseRef: Ref<Promise<{ view: any }> | null> = ref(null)
+
+/** Create vega-embed plot on mounting. */
+onMounted(() => {
+  const vegaOpts = {
+    renderer: props.renderer
+  }
+  vegaEmbedPromiseRef.value = vegaEmbed(
+    plotDivRef.value as any,
+    vegaLiteSpec.value as any,
+    vegaOpts as any
+  )
+  vegaEmbedPromiseRef.value!.then(({ view }: { view: any }) => {
+    vegaViewRef.value = view
+  })
+})
+
+/** Return vegaEmbedPromise. */
+const getVegaEmbedPromise = () => vegaEmbedPromiseRef.value
+
+defineExpose({
+  // exposed to be used in testing (only)
+  getVegaEmbedPromise
+})
+</script>
+
+<template>
+  <div ref="plotDivRef" class="vega-embed" />
+</template>
+
+<style>
+.vega-embed {
+  padding-top: 2px;
+  padding-left: 2px;
+  border-radius: 8px;
+  background-color: #eeeeee;
+}
+/* .vega-embed summary {
+  top: -25px !important;
+  left: -5px;
+  right: unset !important;
+}
+.vega-embed.has-actions {
+  padding-right: 10px !important;
+}
+.vega-embed .vega-actions {
+  right: unset !important;
+  top: 10px !important;
+  left: -5px !important;
+}
+.vega-embed .vega-actions::before {
+  left: 5px !important;
+  right: unset !important;
+}
+.vega-embed .vega-actions::after {
+  left: 6px !important;
+  right: unset !important;
+} */
+</style>