From 81e2f4469fea59df6fcf6ab699ec82d70f975889 Mon Sep 17 00:00:00 2001
From: TimAdams84 <tim-adams@gmx.net>
Date: Mon, 11 Dec 2023 10:32:44 +0100
Subject: [PATCH] Add info box

---
 index.html | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/index.html b/index.html
index 5407108..1069564 100644
--- a/index.html
+++ b/index.html
@@ -45,6 +45,13 @@
       .content {
         min-height: calc(100vh - 40px);
       }
+
+      .info-box {
+    background-color: #f8f9fa;
+    padding: 20px;
+    margin: 50px auto; /* Center the box and add margin */
+    max-width: 600px;
+  }
     </style>
     
     
@@ -53,6 +60,21 @@
     <div class="header">
       <h1>Parkinson's & Alzheimer's Disease Variable Embeddings</h1>
     </div>
+    <div class="info-box">
+      <p>
+        The shown plot is a two-dimensional t-SNE projection of GPT embeddings for variable descriptions for Alzheimer's disease (AD) and Parkinson's disease (PD).
+      </p>
+      <p>
+        You can interact with the plot in the following ways:
+      </p>
+      <ul>
+        <li>Hover over a data point to see its descriptions.</li>
+        <li>Zoom in by holding the cursor and drawing a box for your region of interest.</li>
+        <li>Click any cohort name in the legend to exclude them from the plot.</li>
+        <li>Double click on them to only show that specific cohort.</li>
+      </ul>
+    </div>
+    
     <div class="content">
       <script type="text/javascript">
         window.PlotlyConfig = { MathJaxConfig: "local" };