From 32d9adf1d2d7de21aeaa0f4925e1520007f9bdf3 Mon Sep 17 00:00:00 2001
From: Etienne Boileau <boileau@uni-heidelberg.de>
Date: Wed, 7 Aug 2024 18:25:29 +0200
Subject: [PATCH 1/2] WIP chart first try

---
 client/package-lock.json                      | 445 +++++++++++++++++-
 client/package.json                           |   1 +
 client/public/data.json                       | 224 +++++++++
 client/src/components/chart/SunburstChart.vue | 167 +++++++
 client/src/components/home/HomeRelease.vue    |  16 +
 client/src/views/HomeView.vue                 |   2 +
 6 files changed, 852 insertions(+), 3 deletions(-)
 create mode 100644 client/public/data.json
 create mode 100644 client/src/components/chart/SunburstChart.vue
 create mode 100644 client/src/components/home/HomeRelease.vue

diff --git a/client/package-lock.json b/client/package-lock.json
index cd1aa61f..775ccd18 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "axios": "^1.7.2",
+        "d3": "^7.9.0",
         "jwt-decode": "^4.0.0",
         "pinia": "^2.1.7",
         "primeicons": "^7.0.0",
@@ -1496,6 +1497,416 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
+    "node_modules/d3": {
+      "version": "7.9.0",
+      "resolved": "https://registry.npmjs.org/d3/-/d3-7.9.0.tgz",
+      "integrity": "sha512-e1U46jVP+w7Iut8Jt8ri1YsPOvFpg46k+K8TpCb0P+zjCkjkPnV7WzfDJzMHy1LnA+wj5pLT1wjO901gLXeEhA==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "3",
+        "d3-axis": "3",
+        "d3-brush": "3",
+        "d3-chord": "3",
+        "d3-color": "3",
+        "d3-contour": "4",
+        "d3-delaunay": "6",
+        "d3-dispatch": "3",
+        "d3-drag": "3",
+        "d3-dsv": "3",
+        "d3-ease": "3",
+        "d3-fetch": "3",
+        "d3-force": "3",
+        "d3-format": "3",
+        "d3-geo": "3",
+        "d3-hierarchy": "3",
+        "d3-interpolate": "3",
+        "d3-path": "3",
+        "d3-polygon": "3",
+        "d3-quadtree": "3",
+        "d3-random": "3",
+        "d3-scale": "4",
+        "d3-scale-chromatic": "3",
+        "d3-selection": "3",
+        "d3-shape": "3",
+        "d3-time": "3",
+        "d3-time-format": "4",
+        "d3-timer": "3",
+        "d3-transition": "3",
+        "d3-zoom": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "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==",
+      "license": "ISC",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-axis": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-3.0.0.tgz",
+      "integrity": "sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-brush": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-brush/-/d3-brush-3.0.0.tgz",
+      "integrity": "sha512-ALnjWlVYkXsVIGlOsuWH1+3udkYFI48Ljihfnh8FZPF2QS9o+PzGLBslO0PjzVoHLZ2KCVgAM8NVkXPJB2aNnQ==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "3",
+        "d3-transition": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-chord": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-chord/-/d3-chord-3.0.1.tgz",
+      "integrity": "sha512-VE5S6TNa+j8msksl7HwjxMHDM2yNK3XCkusIlpX5kwauBfXuyLAtNg9jCp/iHH61tgI4sb6R/EIMWCqEIdjT/g==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-path": "1 - 3"
+      },
+      "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==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/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==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "^3.2.0"
+      },
+      "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==",
+      "license": "ISC",
+      "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==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-drag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz",
+      "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-selection": "3"
+      },
+      "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==",
+      "license": "ISC",
+      "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==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-fetch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-fetch/-/d3-fetch-3.0.1.tgz",
+      "integrity": "sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dsv": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "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==",
+      "license": "ISC",
+      "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==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-geo": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-3.1.1.tgz",
+      "integrity": "sha512-637ln3gXKXOwhalDzinUgY83KzNWZRKbYubaG+fGVuc/dxO64RRljtCTnf5ecMyE1RIdtqpkVcq0IbtU2S8j2Q==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2.5.0 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "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==",
+      "license": "ISC",
+      "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==",
+      "license": "ISC",
+      "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==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-polygon": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-polygon/-/d3-polygon-3.0.1.tgz",
+      "integrity": "sha512-3vbA7vXYwfe1SYhED++fPUQlWSYTTGmFmQiany/gdbiWgU/iEyQzyymwL9SkJjFFuCS4902BSzewVGsHHmHtXg==",
+      "license": "ISC",
+      "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==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-random": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-random/-/d3-random-3.0.1.tgz",
+      "integrity": "sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ==",
+      "license": "ISC",
+      "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==",
+      "license": "ISC",
+      "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-scale-chromatic": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz",
+      "integrity": "sha512-A3s5PWiZ9YCXFye1o246KoscMWqf8BsD9eRiJ3He7C9OBaxKhAd5TFCdEx/7VbKtxxTsu//1mMJFrEt572cEyQ==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-interpolate": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-selection": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
+      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
+      "license": "ISC",
+      "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==",
+      "license": "ISC",
+      "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==",
+      "license": "ISC",
+      "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==",
+      "license": "ISC",
+      "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==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-transition": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
+      "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-dispatch": "1 - 3",
+        "d3-ease": "1 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "d3-selection": "2 - 3"
+      }
+    },
+    "node_modules/d3-zoom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz",
+      "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "2 - 3",
+        "d3-transition": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/data-urls": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-4.0.0.tgz",
@@ -1551,6 +1962,15 @@
       "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
       "dev": true
     },
+    "node_modules/delaunator": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/delaunator/-/delaunator-5.0.1.tgz",
+      "integrity": "sha512-8nvh+XBe96aCESrGOqMp/84b13H9cdKbG5P2ejQCh4d4sK9RL4371qou9drQjMhvnPmhWl5hnmqbEE0fXr9Xnw==",
+      "license": "ISC",
+      "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",
@@ -2385,7 +2805,6 @@
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
       "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
-      "dev": true,
       "dependencies": {
         "safer-buffer": ">= 2.1.2 < 3.0.0"
       },
@@ -2450,6 +2869,15 @@
       "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
       "dev": true
     },
+    "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==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/is-binary-path": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -3601,6 +4029,12 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/robust-predicates": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-3.0.2.tgz",
+      "integrity": "sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg==",
+      "license": "Unlicense"
+    },
     "node_modules/rollup": {
       "version": "3.29.4",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.4.tgz",
@@ -3646,11 +4080,16 @@
         "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==",
+      "license": "BSD-3-Clause"
+    },
     "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/saxes": {
       "version": "6.0.0",
diff --git a/client/package.json b/client/package.json
index 0c455e21..a2e80371 100644
--- a/client/package.json
+++ b/client/package.json
@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "axios": "^1.7.2",
+    "d3": "^7.9.0",
     "jwt-decode": "^4.0.0",
     "pinia": "^2.1.7",
     "primeicons": "^7.0.0",
diff --git a/client/public/data.json b/client/public/data.json
new file mode 100644
index 00000000..d44efb21
--- /dev/null
+++ b/client/public/data.json
@@ -0,0 +1,224 @@
+[
+  {
+    "name": "Modification",
+    "color": "#FFFFFF",
+    "children": [
+      {
+        "name": "Y",
+        "color": "#e6194b",
+        "children": [
+          {
+            "name": "H.sapiens",
+            "size": 60,
+            "color": "#3cb44b",
+            "children": [
+              { "name": "Tech1", "size": 20, "color": "#ff9999" },
+              { "name": "Tech2", "size": 20, "color": "#ff6666" },
+              { "name": "Tech3", "size": 20, "color": "#ff3333" }
+            ]
+          },
+          {
+            "name": "M.musculus",
+            "size": 60,
+            "color": "#ffe119",
+            "children": [
+              { "name": "Tech1", "size": 20, "color": "#ff9999" },
+              { "name": "Tech2", "size": 20, "color": "#ff6666" },
+              { "name": "Tech3", "size": 20, "color": "#ff3333" }
+            ]
+          },
+          {
+            "name": "S.cerevisiae",
+            "size": 60,
+            "color": "#4363d8",
+            "children": [
+              { "name": "Tech1", "size": 20, "color": "#ff9999" },
+              { "name": "Tech2", "size": 20, "color": "#ff6666" },
+              { "name": "Tech3", "size": 20, "color": "#ff3333" }
+            ]
+          }
+        ]
+      },
+      {
+        "name": "Am",
+        "color": "#f58231",
+        "children": [
+          {
+            "name": "H.sapiens",
+            "size": 60,
+            "color": "#911eb4",
+            "children": [
+              { "name": "Tech1", "size": 20, "color": "#ff9999" },
+              { "name": "Tech2", "size": 20, "color": "#ff6666" },
+              { "name": "Tech3", "size": 20, "color": "#ff3333" }
+            ]
+          },
+          {
+            "name": "M.musculus",
+            "size": 60,
+            "color": "#46f0f0",
+            "children": [
+              { "name": "Tech1", "size": 20, "color": "#ff9999" },
+              { "name": "Tech2", "size": 20, "color": "#ff6666" },
+              { "name": "Tech3", "size": 20, "color": "#ff3333" }
+            ]
+          },
+          {
+            "name": "S.cerevisiae",
+            "size": 60,
+            "color": "#f032e6",
+            "children": [
+              { "name": "Tech1", "size": 20, "color": "#ff9999" },
+              { "name": "Tech2", "size": 20, "color": "#ff6666" },
+              { "name": "Tech3", "size": 20, "color": "#ff3333" }
+            ]
+          }
+        ]
+      },
+      {
+        "name": "Gm",
+        "color": "#bcf60c",
+        "children": [
+          {
+            "name": "H.sapiens",
+            "size": 60,
+            "color": "#fabebe",
+            "children": [
+              { "name": "Tech1", "size": 20, "color": "#ff9999" },
+              { "name": "Tech2", "size": 20, "color": "#ff6666" },
+              { "name": "Tech3", "size": 20, "color": "#ff3333" }
+            ]
+          },
+          {
+            "name": "M.musculus",
+            "size": 60,
+            "color": "#008080",
+            "children": [
+              { "name": "Tech1", "size": 20, "color": "#ff9999" },
+              { "name": "Tech2", "size": 20, "color": "#ff6666" },
+              { "name": "Tech3", "size": 20, "color": "#ff3333" }
+            ]
+          },
+          {
+            "name": "S.cerevisiae",
+            "size": 60,
+            "color": "#e6beff",
+            "children": [
+              { "name": "Tech1", "size": 20, "color": "#ff9999" },
+              { "name": "Tech2", "size": 20, "color": "#ff6666" },
+              { "name": "Tech3", "size": 20, "color": "#ff3333" }
+            ]
+          }
+        ]
+      },
+      {
+        "name": "Um",
+        "color": "#9a6324",
+        "children": [
+          {
+            "name": "H.sapiens",
+            "size": 60,
+            "color": "#fffac8",
+            "children": [
+              { "name": "Tech1", "size": 20, "color": "#ff9999" },
+              { "name": "Tech2", "size": 20, "color": "#ff6666" },
+              { "name": "Tech3", "size": 20, "color": "#ff3333" }
+            ]
+          },
+          {
+            "name": "M.musculus",
+            "size": 60,
+            "color": "#800000",
+            "children": [
+              { "name": "Tech1", "size": 20, "color": "#ff9999" },
+              { "name": "Tech2", "size": 20, "color": "#ff6666" },
+              { "name": "Tech3", "size": 20, "color": "#ff3333" }
+            ]
+          },
+          {
+            "name": "S.cerevisiae",
+            "size": 60,
+            "color": "#aaffc3",
+            "children": [
+              { "name": "Tech1", "size": 20, "color": "#ff9999" },
+              { "name": "Tech2", "size": 20, "color": "#ff6666" },
+              { "name": "Tech3", "size": 20, "color": "#ff3333" }
+            ]
+          }
+        ]
+      },
+      {
+        "name": "Cm",
+        "color": "#808000",
+        "children": [
+          {
+            "name": "H.sapiens",
+            "size": 60,
+            "color": "#ffd8b1",
+            "children": [
+              { "name": "Tech1", "size": 20, "color": "#ff9999" },
+              { "name": "Tech2", "size": 20, "color": "#ff6666" },
+              { "name": "Tech3", "size": 20, "color": "#ff3333" }
+            ]
+          },
+          {
+            "name": "M.musculus",
+            "size": 60,
+            "color": "#000075",
+            "children": [
+              { "name": "Tech1", "size": 20, "color": "#ff9999" },
+              { "name": "Tech2", "size": 20, "color": "#ff6666" },
+              { "name": "Tech3", "size": 20, "color": "#ff3333" }
+            ]
+          },
+          {
+            "name": "S.cerevisiae",
+            "size": 60,
+            "color": "#808080",
+            "children": [
+              { "name": "Tech1", "size": 20, "color": "#ff9999" },
+              { "name": "Tech2", "size": 20, "color": "#ff6666" },
+              { "name": "Tech3", "size": 20, "color": "#ff3333" }
+            ]
+          }
+        ]
+      },
+      {
+        "name": "m5C",
+        "color": "#a7d8de",
+        "children": [
+          {
+            "name": "H.sapiens",
+            "size": 60,
+            "color": "#b2ff02",
+            "children": [
+              { "name": "Tech1", "size": 20, "color": "#ff9999" },
+              { "name": "Tech2", "size": 20, "color": "#ff6666" },
+              { "name": "Tech3", "size": 20, "color": "#ff3333" }
+            ]
+          },
+          {
+            "name": "M.musculus",
+            "size": 60,
+            "color": "#e6194b",
+            "children": [
+              { "name": "Tech1", "size": 20, "color": "#ff9999" },
+              { "name": "Tech2", "size": 20, "color": "#ff6666" },
+              { "name": "Tech3", "size": 20, "color": "#ff3333" }
+            ]
+          },
+          {
+            "name": "S.cerevisiae",
+            "size": 60,
+            "color": "#3cb44b",
+            "children": [
+              { "name": "Tech1", "size": 20, "color": "#ff9999" },
+              { "name": "Tech2", "size": 20, "color": "#ff6666" },
+              { "name": "Tech3", "size": 20, "color": "#ff3333" }
+            ]
+          }
+        ]
+      }
+    ]
+  }
+]
diff --git a/client/src/components/chart/SunburstChart.vue b/client/src/components/chart/SunburstChart.vue
new file mode 100644
index 00000000..31ee8fa3
--- /dev/null
+++ b/client/src/components/chart/SunburstChart.vue
@@ -0,0 +1,167 @@
+<template>
+  <div ref="chart" class="chart"></div>
+  <div
+    ref="tooltip"
+    class="tooltip"
+    style="position: absolute; opacity: 0; pointer-events: none; transition: opacity 0.3s"
+  ></div>
+</template>
+
+<script>
+import * as d3 from 'd3'
+
+export default {
+  name: 'SunburstChart',
+  data() {
+    return {
+      data: null
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    async fetchData() {
+      try {
+        const response = await fetch('http://localhost:5173/public/data.json')
+        if (!response.ok) {
+          throw new Error('Network response was not ok ' + response.statusText)
+        }
+        const data = await response.json()
+        this.data = data[0]
+        console.log('Fetched data:', this.data) // Log fetched data for verification
+        this.createChart()
+      } catch (error) {
+        console.error('Error fetching data:', error)
+      }
+    },
+    createChart() {
+      const width = 700
+      const radius = width / 2
+
+      const svg = d3
+        .select(this.$refs.chart)
+        .append('svg')
+        .attr('width', width)
+        .attr('height', width)
+        .append('g')
+        .attr('transform', `translate(${radius},${radius})`)
+
+      const tooltip = d3.select(this.$refs.tooltip) // Correctly define tooltip within D3 context
+
+      const partition = d3.partition().size([2 * Math.PI, radius])
+
+      const root = d3
+        .hierarchy(this.data)
+        .sum((d) => (d.size && !d.children ? d.size : 0))
+        .sort((a, b) => b.value - a.value)
+
+      partition(root)
+
+      const arc = d3
+        .arc()
+        .startAngle((d) => d.x0)
+        .endAngle((d) => d.x1)
+        .innerRadius((d) => d.y0)
+        .outerRadius((d) => d.y1)
+
+      const path = svg
+        .selectAll('path')
+        .data(root.descendants())
+        .enter()
+        .append('path')
+        .attr('d', arc)
+        .style('fill', (d) => d.data.color || '#ccc')
+        .on('mouseover', function (event, d) {
+          const color = d3.select(this).style('fill')
+          tooltip
+            .style('opacity', 1)
+            .html(`Name: ${d.data.name}<br>Size: ${d.value}`)
+            .style('left', event.pageX + 10 + 'px')
+            .style('top', event.pageY - 20 + 'px')
+            .style('background-color', color)
+        })
+        .on('mouseout', function () {
+          tooltip.style('opacity', 0)
+        })
+        .on('click', clicked)
+        .append('title')
+        .text((d) => `${d.data.name}\n${d.value}`)
+
+      function clicked(event, p) {
+        console.log('Clicked on:', p.data.name) // Log click event for verification
+        root.each((d) => (d.current = d.target || d))
+
+        const parent = p.parent
+        const depth = p.depth
+
+        // Rescale
+        root.each((d) => {
+          d.target = {
+            x0: Math.max(0, Math.min(1, (d.x0 - p.x0) / (p.x1 - p.x0))) * 2 * Math.PI,
+            x1: Math.max(0, Math.min(1, (d.x1 - p.x0) / (p.x1 - p.x0))) * 2 * Math.PI,
+            y0: Math.max(0, d.y0 - p.y0),
+            y1: Math.max(0, d.y1 - p.y0)
+          }
+        })
+
+        const t = svg.transition().duration(750)
+
+        path
+          .transition(t)
+          .tween('data', (d) => {
+            const i = d3.interpolate(d.current, d.target)
+            return (t) => (d.current = i(t))
+          })
+          .attrTween('d', (d) => () => arc(d.current))
+      }
+
+      // Add labels
+      svg
+        .selectAll('text')
+        .data(root.descendants())
+        .enter()
+        .append('text')
+        .attr('transform', function (d) {
+          const x = (((d.x0 + d.x1) / 2) * 180) / Math.PI
+          if (d.depth === 0) {
+            return `translate(0, 0)`
+          } else if (d.data.name === 'Y') {
+            // Specific adjustment for 'Y'
+            return `rotate(${x - 90}) translate(${(d.y0 + d.y1) / 2},0) rotate(${
+              x < 270 && x > 90 ? 180 : 0
+            })`
+          } else {
+            return `rotate(${x - 90}) translate(${(d.y0 + d.y1) / 2},0) rotate(${
+              x < 180 ? 0 : 180
+            })`
+          }
+        })
+        .attr('dy', '0.35em')
+        .attr('dx', '0.5em')
+        .text((d) => d.data.name)
+        .style('text-anchor', 'middle')
+        .style('font-size', '10px')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chart {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+}
+
+.tooltip {
+  background-color: white;
+  border: 1px solid #d3d3d3;
+  border-radius: 5px;
+  padding: 10px;
+  color: black;
+  font-size: 12px;
+  max-width: 200px;
+}
+</style>
diff --git a/client/src/components/home/HomeRelease.vue b/client/src/components/home/HomeRelease.vue
new file mode 100644
index 00000000..199ae792
--- /dev/null
+++ b/client/src/components/home/HomeRelease.vue
@@ -0,0 +1,16 @@
+<script setup>
+import SunburstChart from '@/components/chart/SunburstChart.vue'
+</script>
+
+<template>
+  <SectionLayout :secondary="true">
+    <div>
+      <div class="px-4 py-8 md:px-6 lg:px-8 text-center">
+        <h1 class="font-ham text-4xl font-semibold m-auto p-4 dark:text-white/80">
+          <span>Release</span>
+        </h1>
+        <SunburstChart />
+      </div>
+    </div>
+  </SectionLayout>
+</template>
diff --git a/client/src/views/HomeView.vue b/client/src/views/HomeView.vue
index b26bff33..76bab38a 100644
--- a/client/src/views/HomeView.vue
+++ b/client/src/views/HomeView.vue
@@ -4,6 +4,7 @@ import HomeViews from '@/components/home/HomeViews.vue'
 import HomeIntro from '@/components/home/HomeIntro.vue'
 import HomeFeatures from '@/components/home/HomeFeatures.vue'
 import HomeRoadmap from '@/components/home/HomeRoadmap.vue'
+import HomeRelease from '@/components/home/HomeRelease.vue'
 </script>
 
 <template>
@@ -12,6 +13,7 @@ import HomeRoadmap from '@/components/home/HomeRoadmap.vue'
     <HomeViews />
     <HomeIntro />
     <HomeFeatures />
+    <HomeRelease />
     <HomeRoadmap />
   </DefaultLayout>
 </template>

From da8c8569a1c3bd9a887d66a07c85ca3dcc53b40d Mon Sep 17 00:00:00 2001
From: Etienne Boileau <boileau@uni-heidelberg.de>
Date: Fri, 9 Aug 2024 13:12:21 +0200
Subject: [PATCH 2/2] ADD 2 charts and release, fetch via API no cache

---
 client/package-lock.json                      | 452 +-----------------
 client/package.json                           |   2 +-
 client/public/data.json                       | 224 ---------
 client/src/components/chart/SunburstChart.vue | 281 +++++------
 client/src/components/home/HomeRelease.vue    |  32 +-
 server/src/scimodom/api/utilities.py          |  16 +
 server/src/scimodom/services/utilities.py     | 104 +++-
 7 files changed, 305 insertions(+), 806 deletions(-)
 delete mode 100644 client/public/data.json

diff --git a/client/package-lock.json b/client/package-lock.json
index 775ccd18..973bed02 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -9,9 +9,9 @@
       "version": "0.0.0",
       "dependencies": {
         "axios": "^1.7.2",
-        "d3": "^7.9.0",
         "jwt-decode": "^4.0.0",
         "pinia": "^2.1.7",
+        "plotly.js-dist": "^2.34.0",
         "primeicons": "^7.0.0",
         "primevue": "^3.52.0",
         "vee-validate": "^4.13.1",
@@ -1497,416 +1497,6 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
-    "node_modules/d3": {
-      "version": "7.9.0",
-      "resolved": "https://registry.npmjs.org/d3/-/d3-7.9.0.tgz",
-      "integrity": "sha512-e1U46jVP+w7Iut8Jt8ri1YsPOvFpg46k+K8TpCb0P+zjCkjkPnV7WzfDJzMHy1LnA+wj5pLT1wjO901gLXeEhA==",
-      "license": "ISC",
-      "dependencies": {
-        "d3-array": "3",
-        "d3-axis": "3",
-        "d3-brush": "3",
-        "d3-chord": "3",
-        "d3-color": "3",
-        "d3-contour": "4",
-        "d3-delaunay": "6",
-        "d3-dispatch": "3",
-        "d3-drag": "3",
-        "d3-dsv": "3",
-        "d3-ease": "3",
-        "d3-fetch": "3",
-        "d3-force": "3",
-        "d3-format": "3",
-        "d3-geo": "3",
-        "d3-hierarchy": "3",
-        "d3-interpolate": "3",
-        "d3-path": "3",
-        "d3-polygon": "3",
-        "d3-quadtree": "3",
-        "d3-random": "3",
-        "d3-scale": "4",
-        "d3-scale-chromatic": "3",
-        "d3-selection": "3",
-        "d3-shape": "3",
-        "d3-time": "3",
-        "d3-time-format": "4",
-        "d3-timer": "3",
-        "d3-transition": "3",
-        "d3-zoom": "3"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "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==",
-      "license": "ISC",
-      "dependencies": {
-        "internmap": "1 - 2"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-axis": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-3.0.0.tgz",
-      "integrity": "sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw==",
-      "license": "ISC",
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-brush": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/d3-brush/-/d3-brush-3.0.0.tgz",
-      "integrity": "sha512-ALnjWlVYkXsVIGlOsuWH1+3udkYFI48Ljihfnh8FZPF2QS9o+PzGLBslO0PjzVoHLZ2KCVgAM8NVkXPJB2aNnQ==",
-      "license": "ISC",
-      "dependencies": {
-        "d3-dispatch": "1 - 3",
-        "d3-drag": "2 - 3",
-        "d3-interpolate": "1 - 3",
-        "d3-selection": "3",
-        "d3-transition": "3"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-chord": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/d3-chord/-/d3-chord-3.0.1.tgz",
-      "integrity": "sha512-VE5S6TNa+j8msksl7HwjxMHDM2yNK3XCkusIlpX5kwauBfXuyLAtNg9jCp/iHH61tgI4sb6R/EIMWCqEIdjT/g==",
-      "license": "ISC",
-      "dependencies": {
-        "d3-path": "1 - 3"
-      },
-      "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==",
-      "license": "ISC",
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/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==",
-      "license": "ISC",
-      "dependencies": {
-        "d3-array": "^3.2.0"
-      },
-      "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==",
-      "license": "ISC",
-      "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==",
-      "license": "ISC",
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-drag": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz",
-      "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
-      "license": "ISC",
-      "dependencies": {
-        "d3-dispatch": "1 - 3",
-        "d3-selection": "3"
-      },
-      "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==",
-      "license": "ISC",
-      "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==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/d3-ease": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
-      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
-      "license": "BSD-3-Clause",
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-fetch": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/d3-fetch/-/d3-fetch-3.0.1.tgz",
-      "integrity": "sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw==",
-      "license": "ISC",
-      "dependencies": {
-        "d3-dsv": "1 - 3"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "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==",
-      "license": "ISC",
-      "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==",
-      "license": "ISC",
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-geo": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-3.1.1.tgz",
-      "integrity": "sha512-637ln3gXKXOwhalDzinUgY83KzNWZRKbYubaG+fGVuc/dxO64RRljtCTnf5ecMyE1RIdtqpkVcq0IbtU2S8j2Q==",
-      "license": "ISC",
-      "dependencies": {
-        "d3-array": "2.5.0 - 3"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "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==",
-      "license": "ISC",
-      "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==",
-      "license": "ISC",
-      "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==",
-      "license": "ISC",
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-polygon": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/d3-polygon/-/d3-polygon-3.0.1.tgz",
-      "integrity": "sha512-3vbA7vXYwfe1SYhED++fPUQlWSYTTGmFmQiany/gdbiWgU/iEyQzyymwL9SkJjFFuCS4902BSzewVGsHHmHtXg==",
-      "license": "ISC",
-      "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==",
-      "license": "ISC",
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-random": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/d3-random/-/d3-random-3.0.1.tgz",
-      "integrity": "sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ==",
-      "license": "ISC",
-      "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==",
-      "license": "ISC",
-      "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-scale-chromatic": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz",
-      "integrity": "sha512-A3s5PWiZ9YCXFye1o246KoscMWqf8BsD9eRiJ3He7C9OBaxKhAd5TFCdEx/7VbKtxxTsu//1mMJFrEt572cEyQ==",
-      "license": "ISC",
-      "dependencies": {
-        "d3-color": "1 - 3",
-        "d3-interpolate": "1 - 3"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-selection": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
-      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
-      "license": "ISC",
-      "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==",
-      "license": "ISC",
-      "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==",
-      "license": "ISC",
-      "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==",
-      "license": "ISC",
-      "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==",
-      "license": "ISC",
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-transition": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
-      "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
-      "license": "ISC",
-      "dependencies": {
-        "d3-color": "1 - 3",
-        "d3-dispatch": "1 - 3",
-        "d3-ease": "1 - 3",
-        "d3-interpolate": "1 - 3",
-        "d3-timer": "1 - 3"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "peerDependencies": {
-        "d3-selection": "2 - 3"
-      }
-    },
-    "node_modules/d3-zoom": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz",
-      "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
-      "license": "ISC",
-      "dependencies": {
-        "d3-dispatch": "1 - 3",
-        "d3-drag": "2 - 3",
-        "d3-interpolate": "1 - 3",
-        "d3-selection": "2 - 3",
-        "d3-transition": "2 - 3"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/data-urls": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-4.0.0.tgz",
@@ -1962,15 +1552,6 @@
       "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
       "dev": true
     },
-    "node_modules/delaunator": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/delaunator/-/delaunator-5.0.1.tgz",
-      "integrity": "sha512-8nvh+XBe96aCESrGOqMp/84b13H9cdKbG5P2ejQCh4d4sK9RL4371qou9drQjMhvnPmhWl5hnmqbEE0fXr9Xnw==",
-      "license": "ISC",
-      "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",
@@ -2805,6 +2386,7 @@
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
       "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "dev": true,
       "dependencies": {
         "safer-buffer": ">= 2.1.2 < 3.0.0"
       },
@@ -2869,15 +2451,6 @@
       "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
       "dev": true
     },
-    "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==",
-      "license": "ISC",
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/is-binary-path": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -3643,6 +3216,12 @@
         "pathe": "^1.1.2"
       }
     },
+    "node_modules/plotly.js-dist": {
+      "version": "2.34.0",
+      "resolved": "https://registry.npmjs.org/plotly.js-dist/-/plotly.js-dist-2.34.0.tgz",
+      "integrity": "sha512-FZR9QT60vtE1ocdSIfop+zDIJEoy1lejwOvAjTSy+AmE4GZ//rW1nnIXwCRv4o9ejfzWq++lQMu6FJf9G+NtFg==",
+      "license": "MIT"
+    },
     "node_modules/postcss": {
       "version": "8.4.38",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
@@ -4029,12 +3608,6 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/robust-predicates": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-3.0.2.tgz",
-      "integrity": "sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg==",
-      "license": "Unlicense"
-    },
     "node_modules/rollup": {
       "version": "3.29.4",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.4.tgz",
@@ -4080,16 +3653,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==",
-      "license": "BSD-3-Clause"
-    },
     "node_modules/safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "dev": true
     },
     "node_modules/saxes": {
       "version": "6.0.0",
diff --git a/client/package.json b/client/package.json
index a2e80371..76d9026c 100644
--- a/client/package.json
+++ b/client/package.json
@@ -12,9 +12,9 @@
   },
   "dependencies": {
     "axios": "^1.7.2",
-    "d3": "^7.9.0",
     "jwt-decode": "^4.0.0",
     "pinia": "^2.1.7",
+    "plotly.js-dist": "^2.34.0",
     "primeicons": "^7.0.0",
     "primevue": "^3.52.0",
     "vee-validate": "^4.13.1",
diff --git a/client/public/data.json b/client/public/data.json
deleted file mode 100644
index d44efb21..00000000
--- a/client/public/data.json
+++ /dev/null
@@ -1,224 +0,0 @@
-[
-  {
-    "name": "Modification",
-    "color": "#FFFFFF",
-    "children": [
-      {
-        "name": "Y",
-        "color": "#e6194b",
-        "children": [
-          {
-            "name": "H.sapiens",
-            "size": 60,
-            "color": "#3cb44b",
-            "children": [
-              { "name": "Tech1", "size": 20, "color": "#ff9999" },
-              { "name": "Tech2", "size": 20, "color": "#ff6666" },
-              { "name": "Tech3", "size": 20, "color": "#ff3333" }
-            ]
-          },
-          {
-            "name": "M.musculus",
-            "size": 60,
-            "color": "#ffe119",
-            "children": [
-              { "name": "Tech1", "size": 20, "color": "#ff9999" },
-              { "name": "Tech2", "size": 20, "color": "#ff6666" },
-              { "name": "Tech3", "size": 20, "color": "#ff3333" }
-            ]
-          },
-          {
-            "name": "S.cerevisiae",
-            "size": 60,
-            "color": "#4363d8",
-            "children": [
-              { "name": "Tech1", "size": 20, "color": "#ff9999" },
-              { "name": "Tech2", "size": 20, "color": "#ff6666" },
-              { "name": "Tech3", "size": 20, "color": "#ff3333" }
-            ]
-          }
-        ]
-      },
-      {
-        "name": "Am",
-        "color": "#f58231",
-        "children": [
-          {
-            "name": "H.sapiens",
-            "size": 60,
-            "color": "#911eb4",
-            "children": [
-              { "name": "Tech1", "size": 20, "color": "#ff9999" },
-              { "name": "Tech2", "size": 20, "color": "#ff6666" },
-              { "name": "Tech3", "size": 20, "color": "#ff3333" }
-            ]
-          },
-          {
-            "name": "M.musculus",
-            "size": 60,
-            "color": "#46f0f0",
-            "children": [
-              { "name": "Tech1", "size": 20, "color": "#ff9999" },
-              { "name": "Tech2", "size": 20, "color": "#ff6666" },
-              { "name": "Tech3", "size": 20, "color": "#ff3333" }
-            ]
-          },
-          {
-            "name": "S.cerevisiae",
-            "size": 60,
-            "color": "#f032e6",
-            "children": [
-              { "name": "Tech1", "size": 20, "color": "#ff9999" },
-              { "name": "Tech2", "size": 20, "color": "#ff6666" },
-              { "name": "Tech3", "size": 20, "color": "#ff3333" }
-            ]
-          }
-        ]
-      },
-      {
-        "name": "Gm",
-        "color": "#bcf60c",
-        "children": [
-          {
-            "name": "H.sapiens",
-            "size": 60,
-            "color": "#fabebe",
-            "children": [
-              { "name": "Tech1", "size": 20, "color": "#ff9999" },
-              { "name": "Tech2", "size": 20, "color": "#ff6666" },
-              { "name": "Tech3", "size": 20, "color": "#ff3333" }
-            ]
-          },
-          {
-            "name": "M.musculus",
-            "size": 60,
-            "color": "#008080",
-            "children": [
-              { "name": "Tech1", "size": 20, "color": "#ff9999" },
-              { "name": "Tech2", "size": 20, "color": "#ff6666" },
-              { "name": "Tech3", "size": 20, "color": "#ff3333" }
-            ]
-          },
-          {
-            "name": "S.cerevisiae",
-            "size": 60,
-            "color": "#e6beff",
-            "children": [
-              { "name": "Tech1", "size": 20, "color": "#ff9999" },
-              { "name": "Tech2", "size": 20, "color": "#ff6666" },
-              { "name": "Tech3", "size": 20, "color": "#ff3333" }
-            ]
-          }
-        ]
-      },
-      {
-        "name": "Um",
-        "color": "#9a6324",
-        "children": [
-          {
-            "name": "H.sapiens",
-            "size": 60,
-            "color": "#fffac8",
-            "children": [
-              { "name": "Tech1", "size": 20, "color": "#ff9999" },
-              { "name": "Tech2", "size": 20, "color": "#ff6666" },
-              { "name": "Tech3", "size": 20, "color": "#ff3333" }
-            ]
-          },
-          {
-            "name": "M.musculus",
-            "size": 60,
-            "color": "#800000",
-            "children": [
-              { "name": "Tech1", "size": 20, "color": "#ff9999" },
-              { "name": "Tech2", "size": 20, "color": "#ff6666" },
-              { "name": "Tech3", "size": 20, "color": "#ff3333" }
-            ]
-          },
-          {
-            "name": "S.cerevisiae",
-            "size": 60,
-            "color": "#aaffc3",
-            "children": [
-              { "name": "Tech1", "size": 20, "color": "#ff9999" },
-              { "name": "Tech2", "size": 20, "color": "#ff6666" },
-              { "name": "Tech3", "size": 20, "color": "#ff3333" }
-            ]
-          }
-        ]
-      },
-      {
-        "name": "Cm",
-        "color": "#808000",
-        "children": [
-          {
-            "name": "H.sapiens",
-            "size": 60,
-            "color": "#ffd8b1",
-            "children": [
-              { "name": "Tech1", "size": 20, "color": "#ff9999" },
-              { "name": "Tech2", "size": 20, "color": "#ff6666" },
-              { "name": "Tech3", "size": 20, "color": "#ff3333" }
-            ]
-          },
-          {
-            "name": "M.musculus",
-            "size": 60,
-            "color": "#000075",
-            "children": [
-              { "name": "Tech1", "size": 20, "color": "#ff9999" },
-              { "name": "Tech2", "size": 20, "color": "#ff6666" },
-              { "name": "Tech3", "size": 20, "color": "#ff3333" }
-            ]
-          },
-          {
-            "name": "S.cerevisiae",
-            "size": 60,
-            "color": "#808080",
-            "children": [
-              { "name": "Tech1", "size": 20, "color": "#ff9999" },
-              { "name": "Tech2", "size": 20, "color": "#ff6666" },
-              { "name": "Tech3", "size": 20, "color": "#ff3333" }
-            ]
-          }
-        ]
-      },
-      {
-        "name": "m5C",
-        "color": "#a7d8de",
-        "children": [
-          {
-            "name": "H.sapiens",
-            "size": 60,
-            "color": "#b2ff02",
-            "children": [
-              { "name": "Tech1", "size": 20, "color": "#ff9999" },
-              { "name": "Tech2", "size": 20, "color": "#ff6666" },
-              { "name": "Tech3", "size": 20, "color": "#ff3333" }
-            ]
-          },
-          {
-            "name": "M.musculus",
-            "size": 60,
-            "color": "#e6194b",
-            "children": [
-              { "name": "Tech1", "size": 20, "color": "#ff9999" },
-              { "name": "Tech2", "size": 20, "color": "#ff6666" },
-              { "name": "Tech3", "size": 20, "color": "#ff3333" }
-            ]
-          },
-          {
-            "name": "S.cerevisiae",
-            "size": 60,
-            "color": "#3cb44b",
-            "children": [
-              { "name": "Tech1", "size": 20, "color": "#ff9999" },
-              { "name": "Tech2", "size": 20, "color": "#ff6666" },
-              { "name": "Tech3", "size": 20, "color": "#ff3333" }
-            ]
-          }
-        ]
-      }
-    ]
-  }
-]
diff --git a/client/src/components/chart/SunburstChart.vue b/client/src/components/chart/SunburstChart.vue
index 31ee8fa3..247472b5 100644
--- a/client/src/components/chart/SunburstChart.vue
+++ b/client/src/components/chart/SunburstChart.vue
@@ -1,17 +1,13 @@
-<template>
-  <div ref="chart" class="chart"></div>
-  <div
-    ref="tooltip"
-    class="tooltip"
-    style="position: absolute; opacity: 0; pointer-events: none; transition: opacity 0.3s"
-  ></div>
-</template>
-
 <script>
-import * as d3 from 'd3'
+import Plotly from 'plotly.js-dist'
+import { HTTP } from '@/services/API.js'
 
 export default {
   name: 'SunburstChart',
+  props: ['chart'],
+  setup(props) {
+    const chart = props.chart
+  },
   data() {
     return {
       data: null
@@ -23,145 +19,158 @@ export default {
   methods: {
     async fetchData() {
       try {
-        const response = await fetch('http://localhost:5173/public/data.json')
-        if (!response.ok) {
-          throw new Error('Network response was not ok ' + response.statusText)
-        }
-        const data = await response.json()
-        this.data = data[0]
-        console.log('Fetched data:', this.data) // Log fetched data for verification
+        const response = await HTTP.get(`/sunburst/${this.chart}`)
+        const data = await response.data
+        this.calculateCumulativeSize(data[0])
+        this.data = this.processData(data[0]) // Assuming data is an array and you need the first element
         this.createChart()
       } catch (error) {
         console.error('Error fetching data:', error)
       }
     },
-    createChart() {
-      const width = 700
-      const radius = width / 2
-
-      const svg = d3
-        .select(this.$refs.chart)
-        .append('svg')
-        .attr('width', width)
-        .attr('height', width)
-        .append('g')
-        .attr('transform', `translate(${radius},${radius})`)
-
-      const tooltip = d3.select(this.$refs.tooltip) // Correctly define tooltip within D3 context
-
-      const partition = d3.partition().size([2 * Math.PI, radius])
-
-      const root = d3
-        .hierarchy(this.data)
-        .sum((d) => (d.size && !d.children ? d.size : 0))
-        .sort((a, b) => b.value - a.value)
-
-      partition(root)
-
-      const arc = d3
-        .arc()
-        .startAngle((d) => d.x0)
-        .endAngle((d) => d.x1)
-        .innerRadius((d) => d.y0)
-        .outerRadius((d) => d.y1)
-
-      const path = svg
-        .selectAll('path')
-        .data(root.descendants())
-        .enter()
-        .append('path')
-        .attr('d', arc)
-        .style('fill', (d) => d.data.color || '#ccc')
-        .on('mouseover', function (event, d) {
-          const color = d3.select(this).style('fill')
-          tooltip
-            .style('opacity', 1)
-            .html(`Name: ${d.data.name}<br>Size: ${d.value}`)
-            .style('left', event.pageX + 10 + 'px')
-            .style('top', event.pageY - 20 + 'px')
-            .style('background-color', color)
-        })
-        .on('mouseout', function () {
-          tooltip.style('opacity', 0)
-        })
-        .on('click', clicked)
-        .append('title')
-        .text((d) => `${d.data.name}\n${d.value}`)
-
-      function clicked(event, p) {
-        console.log('Clicked on:', p.data.name) // Log click event for verification
-        root.each((d) => (d.current = d.target || d))
+    calculateCumulativeSize(node) {
+      if (!node.children) {
+        return node.size || 0
+      }
+      let totalSize = 0
+      for (let child of node.children) {
+        totalSize += this.calculateCumulativeSize(child)
+      }
+      node.cumulativeSize = totalSize
+      return totalSize
+    },
+    getColors() {
+      return [
+        '#00b052',
+        '#02aeed',
+        '#6ac886',
+        '#7acff4',
+        '#c0e7ca',
+        '#e0f4fd',
+        '#00b052',
+        '#02aeed',
+        '#6ac886',
+        '#7acff4',
+        '#c0e7ca',
+        '#e0f4fd',
+        '#00b052',
+        '#02aeed',
+        '#6ac886',
+        '#7acff4',
+        '#c0e7ca',
+        '#e0f4fd',
+        '#00b052',
+        '#02aeed',
+        '#6ac886',
+        '#7acff4',
+        '#c0e7ca',
+        '#e0f4fd'
+      ]
+    },
+    // Function to lighten a color by a certain percentage.
+    // This is used to create variations in color for child nodes.
+    lightenColor(color, depth) {
+      // Convert the hex color to an integer.
+      const num = parseInt(color.slice(1), 16)
+
+      // Adjust the amount based on the depth. The deeper the node, the less lightening is applied.
+      const amt = Math.round(2.55 * (depth * 5)) // Adjust the multiplier for finer control.
+
+      // Extract the red, green, and blue components and apply the adjustment.
+      const R = (num >> 16) - amt
+      const G = ((num >> 8) & 0x00ff) - amt
+      const B = (num & 0x0000ff) - amt
+
+      // Reassemble the color, ensuring each component is within valid range.
+      return `#${(0x1000000 + (R > 0 ? R : 0) * 0x10000 + (G > 0 ? G : 0) * 0x100 + (B > 0 ? B : 0))
+        .toString(16)
+        .slice(1)}`
+    },
+    processData(data) {
+      const ids = []
+      const labels = []
+      const parents = []
+      const values = []
+      const colors = []
+      const textColors = [] // Array to hold the text colors for labels.
+      const customdata = []
+
+      const colorPalette = this.getColors()
+      // Object to store the base color for each first-level node.
+      const baseColors = {}
+      function traverse(node, parent, depth, parentColor) {
+        const id = parent ? `${parent}-${node.name}` : node.name
+        ids.push(id)
+        labels.push(node.name)
+        parents.push(parent)
+        values.push(node.size || 0)
+
+        let color
+        let textColor = 'white' // Default text color is white.
+
+        if (depth === 0) {
+          color = '#F4F1F5FF'
+          textColor = 'black' // Keep root level label in black.
+        } else if (depth === 1) {
+          // Check if the node is a first-level node.
+          // Assign a color from the palette to first-level nodes.
+          color = colorPalette[ids.length % colorPalette.length]
+          baseColors[node.name] = color // Store the base color for later use.
+        } else {
+          // For subsequent levels, lighten the parent's color.
+          color = this.lightenColor(parentColor, depth) // Adjust lightness by depth level.
+        }
 
-        const parent = p.parent
-        const depth = p.depth
+        colors.push(color) // Add the calculated color to the colors array.
+        textColors.push(textColor) // Assign the text color to the textColors array.
 
-        // Rescale
-        root.each((d) => {
-          d.target = {
-            x0: Math.max(0, Math.min(1, (d.x0 - p.x0) / (p.x1 - p.x0))) * 2 * Math.PI,
-            x1: Math.max(0, Math.min(1, (d.x1 - p.x0) / (p.x1 - p.x0))) * 2 * Math.PI,
-            y0: Math.max(0, d.y0 - p.y0),
-            y1: Math.max(0, d.y1 - p.y0)
-          }
-        })
+        // colors.push(colorPalette[depth % colorPalette.length]);
+        customdata.push(node.cumulativeSize || node.size || 0)
 
-        const t = svg.transition().duration(750)
+        if (node.children) {
+          node.children.forEach((child) => traverse.call(this, child, id, depth + 1, color))
+        }
+      }
 
-        path
-          .transition(t)
-          .tween('data', (d) => {
-            const i = d3.interpolate(d.current, d.target)
-            return (t) => (d.current = i(t))
-          })
-          .attrTween('d', (d) => () => arc(d.current))
+      // Start the traversal from the root node, passing an empty string for the parent and depth 0.
+      traverse.call(this, data, '', 0, '')
+
+      return [
+        {
+          type: 'sunburst',
+          ids: ids,
+          labels: labels,
+          parents: parents,
+          values: values,
+          marker: { colors: colors, line: { width: 1 } },
+          textfont: { color: textColors }, // Set the text color for each label.
+          customdata: customdata,
+          hovertemplate: '<b>%{label}</b> : %{customdata}<extra></extra>',
+          textinfo: 'label',
+          insidetextorientation: 'horizontal'
+        }
+      ]
+    },
+    createChart() {
+      const layout = {
+        margin: { t: 0, l: 0, r: 0, b: 0 },
+        sunburstcolorway: this.getColors(),
+        extendsunburstcolorway: true
       }
 
-      // Add labels
-      svg
-        .selectAll('text')
-        .data(root.descendants())
-        .enter()
-        .append('text')
-        .attr('transform', function (d) {
-          const x = (((d.x0 + d.x1) / 2) * 180) / Math.PI
-          if (d.depth === 0) {
-            return `translate(0, 0)`
-          } else if (d.data.name === 'Y') {
-            // Specific adjustment for 'Y'
-            return `rotate(${x - 90}) translate(${(d.y0 + d.y1) / 2},0) rotate(${
-              x < 270 && x > 90 ? 180 : 0
-            })`
-          } else {
-            return `rotate(${x - 90}) translate(${(d.y0 + d.y1) / 2},0) rotate(${
-              x < 180 ? 0 : 180
-            })`
-          }
-        })
-        .attr('dy', '0.35em')
-        .attr('dx', '0.5em')
-        .text((d) => d.data.name)
-        .style('text-anchor', 'middle')
-        .style('font-size', '10px')
+      Plotly.newPlot(this.$refs.chart, this.data, layout)
+
+      this.$refs.chart.on('plotly_click', (event) => {
+        const point = event.points[0]
+        if (point) {
+          Plotly.restyle(this.$refs.chart, 'root', [point.id])
+        }
+      })
     }
   }
 }
 </script>
 
-<style scoped>
-.chart {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100vh;
-}
-
-.tooltip {
-  background-color: white;
-  border: 1px solid #d3d3d3;
-  border-radius: 5px;
-  padding: 10px;
-  color: black;
-  font-size: 12px;
-  max-width: 200px;
-}
-</style>
+<template>
+  <div ref="chart"></div>
+</template>
diff --git a/client/src/components/home/HomeRelease.vue b/client/src/components/home/HomeRelease.vue
index 199ae792..1a62bdee 100644
--- a/client/src/components/home/HomeRelease.vue
+++ b/client/src/components/home/HomeRelease.vue
@@ -1,15 +1,43 @@
 <script setup>
+import { ref, onMounted } from 'vue'
 import SunburstChart from '@/components/chart/SunburstChart.vue'
+import { HTTP } from '@/services/API.js'
+
+const sites = ref()
+const datasets = ref()
+
+// clean this, and fetch annotation (DB) release info
+onMounted(() => {
+  HTTP.get('/release')
+    .then(function (response) {
+      sites.value = response.data.sites
+      datasets.value = response.data.datasets
+    })
+    .catch((error) => {
+      console.log(error)
+    })
+})
 </script>
 
 <template>
-  <SectionLayout :secondary="true">
+  <SectionLayout :secondary="false">
     <div>
       <div class="px-4 py-8 md:px-6 lg:px-8 text-center">
         <h1 class="font-ham text-4xl font-semibold m-auto p-4 dark:text-white/80">
           <span>Release</span>
         </h1>
-        <SunburstChart />
+        <p class="text-xl font-medium text-gray-600 pt-4 pb-2 dark:text-surface-400">
+          Sci-ModoM contains {{ sites }} reported sites with stoichiometric information across
+          {{ datasets }} datasets, annotated using Ensembl release 110.
+        </p>
+        <div class="flex flex-row pt-12">
+          <div class="basis-1/2">
+            <SunburstChart chart="search" />
+          </div>
+          <div class="basis-1/2">
+            <SunburstChart chart="browse" />
+          </div>
+        </div>
       </div>
     </div>
   </SectionLayout>
diff --git a/server/src/scimodom/api/utilities.py b/server/src/scimodom/api/utilities.py
index 144216b9..3fd13d13 100644
--- a/server/src/scimodom/api/utilities.py
+++ b/server/src/scimodom/api/utilities.py
@@ -119,3 +119,19 @@ def get_logo_file(motif):
         return {"image": get_valid_logo(motif).as_posix()}
     except ClientResponseException as e:
         return e.response_tupel
+
+
+@api.route("/sunburst/<chart>", methods=["GET"])
+@cross_origin(supports_credentials=True)
+def get_sunburst_chart(chart):
+    if chart not in ["search", "browse"]:
+        raise ClientResponseException(404, "Unrecognized chart type.")
+    utitlies_service = get_utilities_service()
+    return utitlies_service.get_chart_data(chart)
+
+
+@api.route("/release", methods=["GET"])
+@cross_origin(supports_credentials=True)
+def get_release():
+    utitlies_service = get_utilities_service()
+    return utitlies_service.get_release_info()
diff --git a/server/src/scimodom/services/utilities.py b/server/src/scimodom/services/utilities.py
index fa24a0a9..637d5401 100644
--- a/server/src/scimodom/services/utilities.py
+++ b/server/src/scimodom/services/utilities.py
@@ -1,11 +1,15 @@
+from collections import defaultdict
 from functools import cache
 from typing import ClassVar, Any
 
-from sqlalchemy import select
+from sqlalchemy import select, func
 from sqlalchemy.orm import Session
 
 from scimodom.database.database import get_session
 from scimodom.database.models import (
+    Data,
+    Dataset,
+    DatasetModificationAssociation,
     DetectionMethod,
     DetectionTechnology,
     Modification,
@@ -151,6 +155,104 @@ def get_assemblies(self, taxa_id: int) -> list[dict[str, Any]]:
         assemblies = self._assembly_service.get_assemblies_by_taxa(taxa_id)
         return [{"id": assembly.id, "name": assembly.name} for assembly in assemblies]
 
+    def get_chart_data(self, chart: str) -> list[dict[str, Any]]:
+        """Retrieve the count of data records stratified
+        by modification, organism, and technology.
+
+        :param chart: Chart type: Search or Browse
+        :type chart: str
+        :returns: JSON-like description of database content
+        for data records
+        :rtype: dict[str, Any]
+        """
+        query = select(
+            Modomics.short_name.label("modification_name"),
+            Taxa.short_name.label("species_name"),
+            Organism.cto.label("organism_name"),
+            DetectionTechnology.tech.label("technology_name"),
+            func.count().label("technology_count"),
+        )
+        if chart == "search":
+            query = (
+                query.select_from(Data)
+                .join(Modification, Data.modification_id == Modification.id)
+                .join(Modomics, Modification.modomics_id == Modomics.id)
+                .join(Dataset, Data.dataset_id == Dataset.id)
+                .join(Organism, Dataset.organism_id == Organism.id)
+                .join(Taxa, Organism.taxa_id == Taxa.id)
+                .join(
+                    DetectionTechnology, Dataset.technology_id == DetectionTechnology.id
+                )
+            )
+        else:
+            query = (
+                query.select_from(Dataset)
+                .join(
+                    DatasetModificationAssociation,
+                    Dataset.id == DatasetModificationAssociation.dataset_id,
+                )
+                .join(
+                    Modification,
+                    DatasetModificationAssociation.modification_id == Modification.id,
+                )
+                .join(Modomics, Modification.modomics_id == Modomics.id)
+                .join(Organism, Dataset.organism_id == Organism.id)
+                .join(Taxa, Organism.taxa_id == Taxa.id)
+                .join(
+                    DetectionTechnology, Dataset.technology_id == DetectionTechnology.id
+                )
+            )
+
+        query = query.group_by(
+            Modomics.short_name, Taxa.short_name, Organism.cto, DetectionTechnology.tech
+        )
+        result = self._session.execute(query).fetchall()
+
+        structure = defaultdict(
+            lambda: defaultdict(lambda: defaultdict(lambda: defaultdict(list)))
+        )
+        for mod_name, species_name, org_name, tech_name, count in result:
+            structure[mod_name][species_name][org_name][tech_name] = count
+
+        json_data = [
+            {
+                "name": chart.capitalize(),
+                "children": [
+                    {
+                        "name": mod,
+                        "children": [
+                            {
+                                "name": species,
+                                "children": [
+                                    {
+                                        "name": org,
+                                        "children": [
+                                            {"name": tech, "size": size}
+                                            for tech, size in techs.items()
+                                        ],
+                                    }
+                                    for org, techs in orgs.items()
+                                ],
+                            }
+                            for species, orgs in species_data.items()
+                        ],
+                    }
+                    for mod, species_data in structure.items()
+                ],
+            }
+        ]
+        return json_data
+
+    def get_release_info(self):
+        query = select(Data)
+        sites = self._session.scalar(
+            select(func.count()).select_from(query.with_only_columns(Data.id))
+        )
+        datasets = self._session.scalar(
+            select(func.count()).select_from(query.with_only_columns(Dataset.id))
+        )
+        return {"sites": sites, "datasets": datasets}
+
     def _dump(self, query):
         """Serialize a query from a select statement using
         individual columns of an ORM entity, i.e. using execute(),