diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 4af52a3..848b95f 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -2808,6 +2808,15 @@
                 "@types/react": "*"
             }
         },
+        "@types/react-vis": {
+            "version": "1.11.15",
+            "resolved": "https://registry.npmjs.org/@types/react-vis/-/react-vis-1.11.15.tgz",
+            "integrity": "sha512-0feNthHy/GnkCRPagPKkAnZmKQY1rI+OelD/ASdI7z+PMCfcmPLTi7nLrduIojxGAOWBiIgyH3YX1Ix7GWpAag==",
+            "dev": true,
+            "requires": {
+                "@types/react": "*"
+            }
+        },
         "@types/resolve": {
             "version": "1.17.1",
             "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -4537,6 +4546,148 @@
             "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
             "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
         },
+        "d3-array": {
+            "version": "3.2.4",
+            "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+            "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+            "requires": {
+                "internmap": "1 - 2"
+            }
+        },
+        "d3-collection": {
+            "version": "1.0.7",
+            "resolved": "https://registry.npmjs.org/d3-collection/-/d3-collection-1.0.7.tgz",
+            "integrity": "sha512-ii0/r5f4sjKNTfh84Di+DpztYwqKhEyUlKoPrzUFfeSkWxjW49xU2QzO9qrPrNkpdI0XJkfzvmTu8V2Zylln6A=="
+        },
+        "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=="
+        },
+        "d3-contour": {
+            "version": "4.0.2",
+            "resolved": "https://registry.npmjs.org/d3-contour/-/d3-contour-4.0.2.tgz",
+            "integrity": "sha512-4EzFTRIikzs47RGmdxbeUvLWtGedDUNkTcmzoeyg4sP/dvCexO47AaQL7VKy/gul85TOxw+IBgA8US2xwbToNA==",
+            "requires": {
+                "d3-array": "^3.2.0"
+            }
+        },
+        "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=="
+        },
+        "d3-geo": {
+            "version": "3.1.1",
+            "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-3.1.1.tgz",
+            "integrity": "sha512-637ln3gXKXOwhalDzinUgY83KzNWZRKbYubaG+fGVuc/dxO64RRljtCTnf5ecMyE1RIdtqpkVcq0IbtU2S8j2Q==",
+            "requires": {
+                "d3-array": "2.5.0 - 3"
+            }
+        },
+        "d3-hexbin": {
+            "version": "0.2.2",
+            "resolved": "https://registry.npmjs.org/d3-hexbin/-/d3-hexbin-0.2.2.tgz",
+            "integrity": "sha512-KS3fUT2ReD4RlGCjvCEm1RgMtp2NFZumdMu4DBzQK8AZv3fXRM6Xm8I4fSU07UXvH4xxg03NwWKWdvxfS/yc4w=="
+        },
+        "d3-hierarchy": {
+            "version": "3.1.2",
+            "resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-3.1.2.tgz",
+            "integrity": "sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA=="
+        },
+        "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==",
+            "requires": {
+                "d3-color": "1 - 3"
+            }
+        },
+        "d3-path": {
+            "version": "1.0.9",
+            "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz",
+            "integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg=="
+        },
+        "d3-sankey": {
+            "version": "0.12.3",
+            "resolved": "https://registry.npmjs.org/d3-sankey/-/d3-sankey-0.12.3.tgz",
+            "integrity": "sha512-nQhsBRmM19Ax5xEIPLMY9ZmJ/cDvd1BG3UVvt5h3WRxKg5zGRbvnteTyWAbzeSvlh3tW7ZEmq4VwR5mB3tutmQ==",
+            "requires": {
+                "d3-array": "1 - 2",
+                "d3-shape": "^1.2.0"
+            },
+            "dependencies": {
+                "d3-array": {
+                    "version": "2.12.1",
+                    "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz",
+                    "integrity": "sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==",
+                    "requires": {
+                        "internmap": "^1.0.0"
+                    }
+                },
+                "d3-shape": {
+                    "version": "1.3.7",
+                    "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.7.tgz",
+                    "integrity": "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==",
+                    "requires": {
+                        "d3-path": "1"
+                    }
+                },
+                "internmap": {
+                    "version": "1.0.1",
+                    "resolved": "https://registry.npmjs.org/internmap/-/internmap-1.0.1.tgz",
+                    "integrity": "sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw=="
+                }
+            }
+        },
+        "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==",
+            "requires": {
+                "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"
+            }
+        },
+        "d3-shape": {
+            "version": "3.2.0",
+            "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+            "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+            "requires": {
+                "d3-path": "^3.1.0"
+            },
+            "dependencies": {
+                "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=="
+                }
+            }
+        },
+        "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==",
+            "requires": {
+                "d3-array": "2 - 3"
+            }
+        },
+        "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==",
+            "requires": {
+                "d3-time": "1 - 3"
+            }
+        },
+        "d3-voronoi": {
+            "version": "1.1.4",
+            "resolved": "https://registry.npmjs.org/d3-voronoi/-/d3-voronoi-1.1.4.tgz",
+            "integrity": "sha512-dArJ32hchFsrQ8uMiTBLq256MpnZjeuBtdHpaDlYuQyjU0CVzCJl/BVW+SkszaAeH95D/8gxqAhgx0ouAWAfRg=="
+        },
         "damerau-levenshtein": {
             "version": "1.0.8",
             "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -4613,6 +4764,16 @@
                 "execa": "^5.0.0"
             }
         },
+        "define-data-property": {
+            "version": "1.1.4",
+            "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
+            "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
+            "requires": {
+                "es-define-property": "^1.0.0",
+                "es-errors": "^1.3.0",
+                "gopd": "^1.0.1"
+            }
+        },
         "define-lazy-prop": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz",
@@ -4763,6 +4924,11 @@
                 }
             }
         },
+        "dom-walk": {
+            "version": "0.1.2",
+            "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz",
+            "integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w=="
+        },
         "domelementtype": {
             "version": "1.3.1",
             "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz",
@@ -4957,6 +5123,38 @@
             "resolved": "https://registry.npmjs.org/es-array-method-boxes-properly/-/es-array-method-boxes-properly-1.0.0.tgz",
             "integrity": "sha512-wd6JXUmyHmt8T5a2xreUwKcGPq6f1f+WwIJkijUqiGcJz1qqnZgP6XIK+QyIWU5lT7imeNxUll48bziG+TSYcA=="
         },
+        "es-define-property": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz",
+            "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==",
+            "requires": {
+                "get-intrinsic": "^1.2.4"
+            },
+            "dependencies": {
+                "function-bind": {
+                    "version": "1.1.2",
+                    "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+                    "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA=="
+                },
+                "get-intrinsic": {
+                    "version": "1.2.4",
+                    "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
+                    "integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==",
+                    "requires": {
+                        "es-errors": "^1.3.0",
+                        "function-bind": "^1.1.2",
+                        "has-proto": "^1.0.1",
+                        "has-symbols": "^1.0.3",
+                        "hasown": "^2.0.0"
+                    }
+                }
+            }
+        },
+        "es-errors": {
+            "version": "1.3.0",
+            "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+            "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw=="
+        },
         "es-get-iterator": {
             "version": "1.1.3",
             "resolved": "https://registry.npmjs.org/es-get-iterator/-/es-get-iterator-1.1.3.tgz",
@@ -6065,6 +6263,15 @@
             "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
             "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw=="
         },
+        "global": {
+            "version": "4.4.0",
+            "resolved": "https://registry.npmjs.org/global/-/global-4.4.0.tgz",
+            "integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==",
+            "requires": {
+                "min-document": "^2.19.0",
+                "process": "^0.11.10"
+            }
+        },
         "global-modules": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/global-modules/-/global-modules-2.0.0.tgz",
@@ -6199,6 +6406,21 @@
                 "has-symbols": "^1.0.2"
             }
         },
+        "hasown": {
+            "version": "2.0.2",
+            "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+            "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+            "requires": {
+                "function-bind": "^1.1.2"
+            },
+            "dependencies": {
+                "function-bind": {
+                    "version": "1.1.2",
+                    "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+                    "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA=="
+                }
+            }
+        },
         "he": {
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
@@ -6512,6 +6734,11 @@
                 "side-channel": "^1.0.4"
             }
         },
+        "internmap": {
+            "version": "2.0.3",
+            "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+            "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg=="
+        },
         "ipaddr.js": {
             "version": "2.1.0",
             "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.1.0.tgz",
@@ -8683,6 +8910,14 @@
             "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
             "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg=="
         },
+        "min-document": {
+            "version": "2.19.0",
+            "resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz",
+            "integrity": "sha512-9Wy1B3m3f66bPPmU5hdA4DR4PB2OfDU/+GS3yAB7IQozE3tqXaVv2zOjgla7MEGSRv95+ILmOuvhLkOK6wJtCQ==",
+            "requires": {
+                "dom-walk": "^0.1.0"
+            }
+        },
         "min-indent": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
@@ -10023,6 +10258,11 @@
                 }
             }
         },
+        "process": {
+            "version": "0.11.10",
+            "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
+            "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A=="
+        },
         "process-nextick-args": {
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
@@ -10289,6 +10529,23 @@
                 "@react-leaflet/core": "^2.1.0"
             }
         },
+        "react-motion": {
+            "version": "0.5.2",
+            "resolved": "https://registry.npmjs.org/react-motion/-/react-motion-0.5.2.tgz",
+            "integrity": "sha512-9q3YAvHoUiWlP3cK0v+w1N5Z23HXMj4IF4YuvjvWegWqNPfLXsOBE/V7UvQGpXxHFKRQQcNcVQE31g9SB/6qgQ==",
+            "requires": {
+                "performance-now": "^0.2.0",
+                "prop-types": "^15.5.8",
+                "raf": "^3.1.0"
+            },
+            "dependencies": {
+                "performance-now": {
+                    "version": "0.2.0",
+                    "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-0.2.0.tgz",
+                    "integrity": "sha512-YHk5ez1hmMR5LOkb9iJkLKqoBlL7WD5M8ljC75ZfzXriuBIVNuecaXuU7e+hOwyqf24Wxhh7Vxgt7Hnw9288Tg=="
+                }
+            }
+        },
         "react-popper": {
             "version": "2.3.0",
             "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz",
@@ -10384,6 +10641,95 @@
                 }
             }
         },
+        "react-vis": {
+            "version": "1.12.1",
+            "resolved": "https://registry.npmjs.org/react-vis/-/react-vis-1.12.1.tgz",
+            "integrity": "sha512-vH7ihTPlBD6wBuzwPoipheyJnx46kKKMXnVqdk4mv5vq+bJVC6JRYdRZSofa2030+kko99rSq/idnYnNWGr6zA==",
+            "requires": {
+                "d3-array": "^3.2.1",
+                "d3-collection": "^1.0.7",
+                "d3-color": "^3.1.0",
+                "d3-contour": "^4.0.0",
+                "d3-format": "^3.1.0",
+                "d3-geo": "^3.1.0",
+                "d3-hexbin": "^0.2.2",
+                "d3-hierarchy": "^3.1.2",
+                "d3-interpolate": "^3.0.1",
+                "d3-sankey": "^0.12.3",
+                "d3-scale": "^4.0.2",
+                "d3-shape": "^3.2.0",
+                "d3-voronoi": "^1.1.4",
+                "deep-equal": "^1.0.1",
+                "global": "^4.3.1",
+                "prop-types": "^15.5.8",
+                "react-motion": "^0.5.2"
+            },
+            "dependencies": {
+                "call-bind": {
+                    "version": "1.0.7",
+                    "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
+                    "integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==",
+                    "requires": {
+                        "es-define-property": "^1.0.0",
+                        "es-errors": "^1.3.0",
+                        "function-bind": "^1.1.2",
+                        "get-intrinsic": "^1.2.4",
+                        "set-function-length": "^1.2.1"
+                    }
+                },
+                "deep-equal": {
+                    "version": "1.1.2",
+                    "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.2.tgz",
+                    "integrity": "sha512-5tdhKF6DbU7iIzrIOa1AOUt39ZRm13cmL1cGEh//aqR8x9+tNfbywRf0n5FD/18OKMdo7DNEtrX2t22ZAkI+eg==",
+                    "requires": {
+                        "is-arguments": "^1.1.1",
+                        "is-date-object": "^1.0.5",
+                        "is-regex": "^1.1.4",
+                        "object-is": "^1.1.5",
+                        "object-keys": "^1.1.1",
+                        "regexp.prototype.flags": "^1.5.1"
+                    }
+                },
+                "define-properties": {
+                    "version": "1.2.1",
+                    "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz",
+                    "integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==",
+                    "requires": {
+                        "define-data-property": "^1.0.1",
+                        "has-property-descriptors": "^1.0.0",
+                        "object-keys": "^1.1.1"
+                    }
+                },
+                "function-bind": {
+                    "version": "1.1.2",
+                    "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+                    "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA=="
+                },
+                "get-intrinsic": {
+                    "version": "1.2.4",
+                    "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
+                    "integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==",
+                    "requires": {
+                        "es-errors": "^1.3.0",
+                        "function-bind": "^1.1.2",
+                        "has-proto": "^1.0.1",
+                        "has-symbols": "^1.0.3",
+                        "hasown": "^2.0.0"
+                    }
+                },
+                "regexp.prototype.flags": {
+                    "version": "1.5.3",
+                    "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.3.tgz",
+                    "integrity": "sha512-vqlC04+RQoFalODCbCumG2xIOvapzVMHwsyIGM/SIE8fRhFFsXeH8/QQ+s0T0kDAhKc4k30s73/0ydkHQz6HlQ==",
+                    "requires": {
+                        "call-bind": "^1.0.7",
+                        "define-properties": "^1.2.1",
+                        "es-errors": "^1.3.0",
+                        "set-function-name": "^2.0.2"
+                    }
+                }
+            }
+        },
         "read-cache": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -10989,6 +11335,67 @@
                 "send": "0.18.0"
             }
         },
+        "set-function-length": {
+            "version": "1.2.2",
+            "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
+            "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
+            "requires": {
+                "define-data-property": "^1.1.4",
+                "es-errors": "^1.3.0",
+                "function-bind": "^1.1.2",
+                "get-intrinsic": "^1.2.4",
+                "gopd": "^1.0.1",
+                "has-property-descriptors": "^1.0.2"
+            },
+            "dependencies": {
+                "function-bind": {
+                    "version": "1.1.2",
+                    "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+                    "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA=="
+                },
+                "get-intrinsic": {
+                    "version": "1.2.4",
+                    "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
+                    "integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==",
+                    "requires": {
+                        "es-errors": "^1.3.0",
+                        "function-bind": "^1.1.2",
+                        "has-proto": "^1.0.1",
+                        "has-symbols": "^1.0.3",
+                        "hasown": "^2.0.0"
+                    }
+                },
+                "has-property-descriptors": {
+                    "version": "1.0.2",
+                    "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
+                    "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
+                    "requires": {
+                        "es-define-property": "^1.0.0"
+                    }
+                }
+            }
+        },
+        "set-function-name": {
+            "version": "2.0.2",
+            "resolved": "https://registry.npmjs.org/set-function-name/-/set-function-name-2.0.2.tgz",
+            "integrity": "sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==",
+            "requires": {
+                "define-data-property": "^1.1.4",
+                "es-errors": "^1.3.0",
+                "functions-have-names": "^1.2.3",
+                "has-property-descriptors": "^1.0.2"
+            },
+            "dependencies": {
+                "has-property-descriptors": {
+                    "version": "1.0.2",
+                    "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
+                    "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
+                    "requires": {
+                        "es-define-property": "^1.0.0"
+                    }
+                }
+            }
+        },
         "setprototypeof": {
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index e845de9..a0da27f 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -17,6 +17,7 @@
         "react-dom": "^18.2.0",
         "react-leaflet": "^4.2.1",
         "react-scripts": "5.0.1",
+        "react-vis": "^1.12.1",
         "typescript": "^4.9.5",
         "web-vitals": "^2.1.4"
     },
@@ -45,5 +46,8 @@
             "last 1 firefox version",
             "last 1 safari version"
         ]
+    },
+    "devDependencies": {
+        "@types/react-vis": "^1.11.15"
     }
-}
\ No newline at end of file
+}
diff --git a/frontend/public/index.html b/frontend/public/index.html
index 86696cf..73e74b6 100644
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -18,6 +18,8 @@
       integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
       crossorigin=""></script>
 
+    <link rel="stylesheet" href="https://unpkg.com/react-vis/dist/style.css">
+
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
diff --git a/frontend/src/App.css b/frontend/src/App.css
index 9748b43..8174e9d 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -68,4 +68,25 @@ img.gridImage {
 
 div.restrictedSlider > .bp5-slider-track > .bp5-slider-progress:first-child {
     background-color: #888;
+}
+
+.heightPlotButton {
+    position: absolute;
+    bottom: 10px;
+    z-index: 5000;
+    left: calc(50% - 75px);
+    width: 150px;
+}
+
+.heightPlotDrawer {
+    z-index: 5001;
+}
+
+.heightPlotDrawerBody {
+    display: flex;
+    justify-content: center;
+}
+
+.invisibleCrosshair > .rv-crosshair__line {
+    stroke-width: 0;
 }
\ No newline at end of file
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index f222b45..c026496 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -8,11 +8,12 @@ import {
 import { LatLng } from "leaflet";
 import { Spinner, Intent, OverlaysProvider } from "@blueprintjs/core";
 import { InfoPanel } from "./components/InfoPanel";
-import { GridState, GridTile, ImageState, Settings } from "./utils/types";
+import { GridState, GridTile, HeightPoint, ImageState, Settings } from "./utils/types";
 import { SettingsCard } from "./components/SettingsCard";
 import { ImageOverlays } from "./components/ImageOverlay";
 import { SearchComponent } from "./components/SearchComponent";
 import { CurrenLocationPane } from "./components/CurrentLocation";
+import { HeightPlotCard } from "./components/HeightPlotCard";
 
 
 
@@ -43,8 +44,10 @@ function App() {
     const [path, setPath] = useState<LatLng[] | undefined>();
     const [fixed, setFixed] = useState<boolean>(false);
     const [node, setNode] = useState<GridTile | undefined>();
+    const [heightPoints, setHeightPoints] = useState<HeightPoint[] | undefined>();
+    const [cursorNode, setCursorNode] = useState<HeightPoint | undefined>();
     const pathAndNode = {
-        path, setPath, node, setNode, fixed, setFixed
+        path, setPath, node, setNode, fixed, setFixed, heightPoints, setHeightPoints, cursorNode, setCursorNode
     };
     const [isInfoOpen, setIsisInfoOpen] = useState<boolean>(false);
 
@@ -71,6 +74,7 @@ function App() {
                     setImageState={setImageState}
                     pathAndNode={pathAndNode}
                     setIsInfoOpen={setIsisInfoOpen}></SettingsCard>
+                <HeightPlotCard pathAndNode={pathAndNode} />
                 <MapContainer center={[lastLocationLat, lastLocationLon]} zoom={13} scrollWheelZoom={true}>
                     <LayersControl position="bottomright">
                         <LayersControl.BaseLayer checked name="OpenTopoMap">
diff --git a/frontend/src/components/Grid.tsx b/frontend/src/components/Grid.tsx
index 07e6d2a..8923dd6 100644
--- a/frontend/src/components/Grid.tsx
+++ b/frontend/src/components/Grid.tsx
@@ -1,4 +1,4 @@
-import { Polyline, useMapEvents } from "react-leaflet";
+import { Polyline, useMapEvents, CircleMarker, useMap } from "react-leaflet";
 import { CurrentNode } from "./CurrentNode";
 import { PathOptions } from "leaflet";
 import { nodeInGrid, setPath } from "../utils/utils";
@@ -10,6 +10,8 @@ interface GridProps {
 }
 
 export function Grid({ grid, pathAndNode }: GridProps) {
+    const map = useMap();
+
     useMapEvents({
         mousemove(ev) {
             if (grid.response === undefined || grid.grid === undefined || pathAndNode.fixed) {
@@ -34,6 +36,14 @@ export function Grid({ grid, pathAndNode }: GridProps) {
         lineJoin: "round",
     };
 
+    const blackOptions = {
+        color: "black",
+        weight: 1.0,
+        opacity: 1.0,
+        fillColor: "black",
+        fillOpacity: 1.0,
+    };
+
     return (
         <>
             {pathAndNode.path !== undefined ? (
@@ -46,6 +56,13 @@ export function Grid({ grid, pathAndNode }: GridProps) {
             ) : (
                 <></>
             )}
+            {pathAndNode.cursorNode !== undefined ? (<>
+                <CircleMarker
+                    center={pathAndNode.cursorNode.location}
+                    radius={(map.getZoom() / 20) * 10}
+                    pathOptions={blackOptions}
+                ></CircleMarker>
+            </>) : <></>}
         </>
     );
 }
\ No newline at end of file
diff --git a/frontend/src/components/HeightPlotCard.tsx b/frontend/src/components/HeightPlotCard.tsx
new file mode 100644
index 0000000..7ea7b6d
--- /dev/null
+++ b/frontend/src/components/HeightPlotCard.tsx
@@ -0,0 +1,117 @@
+import { Button, Drawer } from "@blueprintjs/core";
+import { PathAndNode } from "../utils/types";
+import { useState } from "react";
+
+import { Crosshair, HorizontalGridLines, LineSeries, LineSeriesPoint, MarkSeries, VerticalGridLines, XAxis, XYPlot, YAxis } from "react-vis";
+
+interface HeightPlotCardProps {
+    pathAndNode: PathAndNode;
+}
+
+export function HeightPlotCard({ pathAndNode }: HeightPlotCardProps) {
+    let [drawerOpen, setDrawerOpen] = useState(false);
+    let [groundHeight, setGroundHeight] = useState<LineSeriesPoint | undefined>(undefined);
+    let [flightHeight, setFlightHeight] = useState<LineSeriesPoint | undefined>(undefined);
+
+    const setFlightHeigthItem = (d: LineSeriesPoint) => {
+        setFlightHeight(d);
+        pathAndNode.setCursorNode(d.node);
+    };
+
+    const close = () => {
+        setDrawerOpen(false);
+        setGroundHeight(undefined);
+        setFlightHeight(undefined);
+        pathAndNode.setCursorNode(undefined);
+    }
+
+    if (pathAndNode.heightPoints === undefined) {
+        return (<></>);
+    }
+
+    const flightData = [];
+    const groundData = [];
+    for (let point of pathAndNode.heightPoints) {
+        flightData.push({ x: point.distance, y: point.height, node: point });
+        groundData.push({ x: point.distance, y: point.groundHeight });
+    }
+
+    let flightMarks = [];
+    let groundMarks = [];
+    let aglData = []
+    if (flightHeight !== undefined && groundHeight !== undefined) {
+        flightMarks.push({
+            x: flightHeight.x,
+            y: flightHeight.y,
+            size: 1
+        });
+        groundMarks.push({
+            x: groundHeight.x,
+            y: groundHeight.y,
+            size: 1
+        });
+        aglData.push({ x: groundHeight.x, y: groundHeight.y });
+        aglData.push({ x: flightHeight.x, y: flightHeight.y });
+    }
+
+    return (
+        <>
+            <div className="heightPlotButton">
+                <Button onClick={() => setDrawerOpen(true)} icon={"arrow-up"}>Height Plot</Button>
+            </div>
+            <Drawer
+                icon="info-sign"
+                onClose={close}
+                title="Path height plot"
+                size={"default"}
+                isOpen={drawerOpen}
+                className="heightPlotDrawer"
+                canEscapeKeyClose={true}
+                canOutsideClickClose={false}
+                hasBackdrop={false}
+                position={"bottom"}>
+                <div className={"heightPlotDrawerBody"}>
+                    <XYPlot height={400} width={window.innerWidth * 0.8} >
+                        <VerticalGridLines />
+                        <HorizontalGridLines />
+                        <XAxis />
+                        <YAxis />
+                        <LineSeries data={flightData} color={"green"} fill={0}
+                            onNearestX={setFlightHeigthItem} />
+                        <LineSeries data={groundData}
+                            color={"red"}
+                            curve={"curveMonotoneX"}
+                            onNearestX={d => setGroundHeight(d)} />
+                        {
+                            groundHeight !== undefined && flightHeight !== undefined ? (
+                                <Crosshair values={[groundHeight, flightHeight]} className={'invisibleCrosshair'}>
+                                    <div style={{ background: 'black', minWidth: '80px', maxWidth: '110px' }}>
+                                        Height: {Math.round(flightHeight.y)}m<br />
+                                        Ground: {Math.round(groundHeight.y)}m<br />
+                                        AGL: {Math.round(flightHeight.y - groundHeight.y)}m
+                                    </div>
+                                </Crosshair>) : <></>
+                        }
+                        <MarkSeries
+                            strokeWidth={1}
+                            data={flightMarks}
+                            color={"green"}
+                            opacity={0.8}
+                            sizeRange={[0, 5]}
+                        />
+                        <MarkSeries
+                            strokeWidth={1}
+                            data={groundMarks}
+                            color={"red"}
+                            opacity={0.8}
+                            sizeRange={[0, 5]}
+                        />
+                        <LineSeries data={aglData}
+                            color={"blue"}
+                            stroke={3} />
+                    </XYPlot>
+                </div>
+            </Drawer>
+        </>
+    )
+}
\ No newline at end of file
diff --git a/frontend/src/components/SearchComponent.tsx b/frontend/src/components/SearchComponent.tsx
index 4a2fb6f..f06c90c 100644
--- a/frontend/src/components/SearchComponent.tsx
+++ b/frontend/src/components/SearchComponent.tsx
@@ -1,5 +1,5 @@
 import { LatLng } from "leaflet";
-import { doSearchFromLocation, nodeInGrid, setPath } from "../utils/utils";
+import { computeHeights, doSearchFromLocation, nodeInGrid, setPath } from "../utils/utils";
 import { useMap, useMapEvents } from "react-leaflet";
 import { GridState, ImageState, PathAndNode, Settings } from "../utils/types";
 import { Grid } from "./Grid";
@@ -29,8 +29,10 @@ export function SearchComponent({ setImageState, settings, setSettings, grid, se
 
             let node = nodeInGrid(e.latlng, grid);
             if (node !== undefined) {
-                setPath(node, grid, pathAndNode);
+                let nodes = setPath(node, grid, pathAndNode);
                 pathAndNode.setFixed(true);
+                let heights = computeHeights(nodes, grid);
+                pathAndNode.setHeightPoints(heights);
                 return;
             }
 
diff --git a/frontend/src/components/SettingsCard.tsx b/frontend/src/components/SettingsCard.tsx
index 08763a2..a44edb5 100644
--- a/frontend/src/components/SettingsCard.tsx
+++ b/frontend/src/components/SettingsCard.tsx
@@ -122,6 +122,8 @@ export function SettingsCard({ settings, setSettings, setImageState, setGrid, gr
         pathAndNode.setNode(undefined);
         pathAndNode.setPath(undefined);
         pathAndNode.setFixed(false);
+        pathAndNode.setHeightPoints(undefined);
+        pathAndNode.setCursorNode(undefined);
         const newSettings = {
             ...settings,
             minGridSize: 30,
diff --git a/frontend/src/utils/types.ts b/frontend/src/utils/types.ts
index 3715993..8888f7e 100644
--- a/frontend/src/utils/types.ts
+++ b/frontend/src/utils/types.ts
@@ -50,7 +50,19 @@ export interface PathAndNode {
   path: LatLng[] | undefined;
   node: GridTile | undefined;
   fixed: boolean;
+  heightPoints: HeightPoint[] | undefined;
+  cursorNode: HeightPoint | undefined;
   setPath: (path: LatLng[] | undefined) => void;
   setNode: (node: GridTile | undefined) => void;
   setFixed: (fixed: boolean) => void;
+  setHeightPoints: (heightPoints: HeightPoint[] | undefined) => void;
+  setCursorNode: (cursorNode: HeightPoint | undefined) => void;
+}
+
+export interface HeightPoint {
+  location: LatLng;
+  height: number;
+  groundHeight: number;
+  distance: number;
+  closest_node: GridTile;
 }
diff --git a/frontend/src/utils/utils.ts b/frontend/src/utils/utils.ts
index c51069c..eaa3d2c 100644
--- a/frontend/src/utils/utils.ts
+++ b/frontend/src/utils/utils.ts
@@ -3,6 +3,7 @@ import {
   ConeSearchResponse,
   GridState,
   GridTile,
+  HeightPoint,
   ImageState,
   PathAndNode,
   Settings,
@@ -85,6 +86,8 @@ export async function doSearchFromLocation(
   pathAndNode.setNode(undefined);
   pathAndNode.setPath(undefined);
   pathAndNode.setFixed(false);
+  pathAndNode.setHeightPoints(undefined);
+  pathAndNode.setCursorNode(undefined);
 
   let url = new URL(window.location.origin + "/flight_cone_bounds");
   url.search = getSearchParams(latLng, settings).toString();
@@ -255,11 +258,13 @@ export function setPath(
   node: GridTile,
   grid: GridState,
   pathAndNode: PathAndNode
-) {
+): GridTile[] {
   if (grid.grid === undefined) {
-    return;
+    return [];
   }
 
+  let nodes = [];
+
   let current = node;
   let path = [];
   while (current.reference !== null) {
@@ -270,6 +275,8 @@ export function setPath(
 
     latlng.alt = current.height;
     path.push(latlng);
+    nodes.push(current);
+
     current = grid.grid[current.reference[0]][current.reference[1]];
   }
   let latlng = new LatLng(0, 0);
@@ -278,7 +285,92 @@ export function setPath(
     latlng = ixToLatLon(current.index, grid.response);
   }
   path.push(latlng);
+  nodes.push(current);
   path.reverse();
   pathAndNode.setPath(path);
   pathAndNode.setNode(node);
+
+  return nodes;
+}
+
+function heightsBetweenNodes(
+  a: GridTile,
+  b: GridTile,
+  grid: GridState
+): HeightPoint[] {
+  if (grid.response === undefined || grid.grid === undefined) {
+    return [];
+  }
+
+  let diff = [b.index[0] - a.index[0], b.index[1] - a.index[1]];
+  let length = Math.sqrt(diff[0] * diff[0] + diff[1] * diff[1]);
+  let nPoints = Math.ceil(length);
+
+  let distance_diff = b.distance - a.distance;
+  let height_diff = b.height - a.height;
+
+  let points = [
+    {
+      location: ixToLatLon(a.index, grid.response),
+      height: a.height,
+      groundHeight: a.height - a.agl,
+      distance: a.distance,
+      closest_node: a,
+    },
+  ];
+
+  for (let i = 1; i < nPoints; i++) {
+    let fraction = i / nPoints;
+    let ix = [a.index[0] + fraction * diff[0], a.index[1] + fraction * diff[1]];
+    let rounded_ix = [Math.floor(ix[0]), Math.floor(ix[1])];
+    if (
+      grid.grid[rounded_ix[0]] !== undefined &&
+      grid.grid[rounded_ix[0]][rounded_ix[1]] !== undefined
+    ) {
+      let closest_node = grid.grid[rounded_ix[0]][rounded_ix[1]];
+
+      points.push({
+        location: ixToLatLon(ix, grid.response),
+        height: a.height + height_diff * fraction,
+        groundHeight: closest_node.height - closest_node.agl,
+        distance: a.distance + distance_diff * fraction,
+        closest_node: closest_node,
+      });
+    }
+  }
+
+  return points;
+}
+
+export function computeHeights(
+  nodes: GridTile[],
+  grid: GridState
+): HeightPoint[] {
+  if (grid.response === undefined || grid.grid === undefined) {
+    return [];
+  }
+
+  nodes.reverse();
+
+  let height_arr: HeightPoint[] = [];
+
+  for (let i = 0; i < nodes.length - 1; i++) {
+    let a = nodes[i];
+    let b = nodes[i + 1];
+
+    height_arr = height_arr.concat(heightsBetweenNodes(a, b, grid));
+  }
+
+  if (nodes.length > 1) {
+    let a = nodes[nodes.length - 1];
+    height_arr.push({
+      location: ixToLatLon(a.index, grid.response),
+      height: a.height,
+      groundHeight: a.height - a.agl,
+      distance: a.distance,
+      closest_node: a,
+    });
+  }
+
+  return height_arr;
 }