Changed according to feedback

visdesignlab · Jul 10, 2024 · aee5405 · aee5405
1 parent 09b94d4
commit aee5405
Show file tree

Hide file tree

Showing 16 changed files with 381 additions and 177 deletions.
diff --git a/public/Upset-Alttext-User-Survey/assets/GoTVis.md b/public/Upset-Alttext-User-Survey/assets/GoTVis.md
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <style>
+        .image-container {
+            display: flex;
+            justify-content: center;
+        }
+    </style>
+</head>
+<body>
+
+<h1 style="text-align: center;">Dataset: Game of Thrones</h1>
+
+<div class="image-container">
+    <img src="./assets/VO2.png" alt="Game of Thrones" width="515" height="900"/>
+</div>
+
+</body>
+</html>
diff --git a/...Upset-Alttext-User-Survey/assets/text2.md → ...pset-Alttext-User-Survey/assets/GoText.md b/...Upset-Alttext-User-Survey/assets/text2.md → ...pset-Alttext-User-Survey/assets/GoText.md
@@ -1,3 +1,5 @@
+<h1 style="text-align: center;">Dataset: Game of Thrones</h1>
+
 ## Dataset Properties
 
 The dataset contains 20 sets and 238 elements, of which 7 sets are shown in the plot.

diff --git a/...Alttext-User-Survey/assets/textandVis2.md → ...lttext-User-Survey/assets/GoTextandVis.md b/...Alttext-User-Survey/assets/textandVis2.md → ...lttext-User-Survey/assets/GoTextandVis.md
@@ -1,3 +1,5 @@
+<h1 style="text-align: center;">Dataset: Game of Thrones</h1>
+
 <!DOCTYPE html>
 <html>
 <head>

diff --git a/public/Upset-Alttext-User-Survey/assets/consent.md b/public/Upset-Alttext-User-Survey/assets/consent.md
@@ -6,8 +6,7 @@ Before we begin, please read the following consent form carefully and thereafter
 Taking valuable feedback and assessment from sighted community is crucial as a forst evaluation step for our generated text descriptions. The sole purpose of the study is to evaluate our text description for UpSet plots.
 
 ## Tasks
-The study contains three visualization content (Only Visualization 1, Textual description of a Visualization, Visualization and Textual Description of a Visualization). For each visualization content, we ask you 13/ 14 questions regarding understanding the content. The questions
-contain various types such as single-choice, paragraph, long text, likert scale, etc. Each participant should take 50-60 minutes to complete the questionnaire.
+The study contains three visualization contents: Visualization only (a UpSet plot), Text only (text description of a UpSet plot), Visualization and Text (a UpSet plot and text description of that plot). For each visualization content, we ask you 13 questions regarding understanding the content. The questions contain various types such as single-choice, paragraph, long text, likert scale, etc. After answering the questions for each content, the participant will take part in a post study survey. Each participant should take 50-60 minutes to complete the questionnaire.
 
 Each participant in this study is assigned a random ID for analyses. As such, your participation will remain anonymous, and your responses will not be used to identify you.
 

diff --git a/...Upset-Alttext-User-Survey/assets/text1.md → ...t-Alttext-User-Survey/assets/covidText.md b/...Upset-Alttext-User-Survey/assets/text1.md → ...t-Alttext-User-Survey/assets/covidText.md
@@ -1,3 +1,5 @@
+<h1 style="text-align: center;">Dataset: Covid Symptoms</h1>
+
 ## Dataset Properties
 
 The dataset contains 6 sets and 4340 elements, of which 6 sets are shown in the plot.

diff --git a/...Alttext-User-Survey/assets/textandVis1.md → ...ext-User-Survey/assets/covidTextandVis.md b/...Alttext-User-Survey/assets/textandVis1.md → ...ext-User-Survey/assets/covidTextandVis.md
@@ -1,3 +1,5 @@
+<h1 style="text-align: center;">Dataset: Covid Symptoms</h1>
+
 <!DOCTYPE html>
 <html>
 <head>

diff --git a/public/Upset-Alttext-User-Survey/assets/covidVis.md b/public/Upset-Alttext-User-Survey/assets/covidVis.md
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <style>
+        .image-container {
+            display: flex;
+            justify-content: center;
+        }
+    </style>
+</head>
+<body>
+
+<h1 style="text-align: center;">Dataset: Covid Symptoms</h1>
+
+<div class="image-container">
+    <img src="./assets/VO1.png" alt="Covid Symptoms" width="492" height="1200"/>
+</div>
+
+</body>
+</html>
diff --git a/public/Upset-Alttext-User-Survey/assets/studyBegins.md b/public/Upset-Alttext-User-Survey/assets/studyBegins.md
@@ -0,0 +1,3 @@
+# Get Started!
+
+Now, as you are done being familiar with the UpSet plot and did training about how the question answer session will look like, you are ready to take part in into the actual study! Remember that, the three contents will come in random order (not as the same order of the training). Click Next to start.
diff --git a/public/Upset-Alttext-User-Survey/assets/training.md b/public/Upset-Alttext-User-Survey/assets/training.md
diff --git a/public/Upset-Alttext-User-Survey/assets/training1.md b/public/Upset-Alttext-User-Survey/assets/training1.md
@@ -0,0 +1,12 @@
+# Training
+
+This is one of the visualization contents that we call "Visualization Only". In the sidebar, you can see some of the demo questionnaires for this type of contents.
+
+<h1 style="text-align: center;">Dataset: Movie Genres</h1>
+
+<img src="./assets/T.png" alt="Movie Genres" width="460"/>
+<!-- "path": "Upset-Alttext-User-Survey/assets/T.png",
+            "style": {
+                "width": "460px",
+                "height": "745px"
+            }, -->
diff --git a/public/Upset-Alttext-User-Survey/assets/training2.md b/public/Upset-Alttext-User-Survey/assets/training2.md
@@ -0,0 +1,20 @@
+# Training
+
+Sometimes you will find this type of contents that we call "Text Only". In the sidebar, you can see some of the demo questionnaires for this type of contents.
+
+<h1 style="text-align: center;">Dataset: Movie Genres</h1>
+
+## Dataset Properties
+The dataset contains 17 sets and 6303 elements, of which 8 sets are shown in the plot.
+
+## Set Properties
+The set sizes are diverging a lot, ranging from 106 to 1603. The largest set is Drama with 1603 elements, followed by Comedy with 1200, Action with 503, Thriller with 492, Romance with 471, Horror with 343, SciFi with 276, and Mystery with 106.
+
+## Intersection Properties
+The plot is sorted by size in descending order. There are 83 non-empty intersections, all of which are shown in the plot. The largest 5 intersections are Just Drama (993), Just Comedy (670), the empty intersection (367), Just Horror (182), and Drama, and Comedy (178).
+
+## Statistical Information
+The average intersection size is 46, and the median is 4. The 90th percentile is 134, and the 10th percentile is 1. The largest set, Drama, is present in 32.5% of all non-empty intersections. The smallest set, Mystery, is present in 27.7% of all non-empty intersections.
+
+## Trend Analysis
+The intersection sizes peak at a value of 993 and then drastically flatten down to 1. The empty intersection is present with a size of 367. An all set intersection is not present. The individual set intersections are in largest and large intersections. The low degree set intersections lie in small and large and medium sized intersections. The medium degree set intersections can be seen among small sized intersections. Among the small sized intersections, the high order set intersections are significantly present.
diff --git a/public/Upset-Alttext-User-Survey/assets/training3.md b/public/Upset-Alttext-User-Survey/assets/training3.md
@@ -0,0 +1,41 @@
+# Training
+
+Sometimes you will find this type of contents that we call "Visualization and Text". In the sidebar, you can see some of the demo questionnaires for this type of contents.
+
+<h1 style="text-align: center;">Dataset: Movie Genres</h1>
+
+<!DOCTYPE html>
+<html>
+<head>
+    <style>
+        .container {
+            display: flex;
+            gap: 20px;
+        }
+        .column {
+            padding: 10px;
+        }
+    </style>
+</head>
+<body>
+
+<div class="container">
+    <div class="column">
+        <img style="width: 460px;" src="./assets/VO2.png" alt="Description of Image">
+    </div>
+    <div class="column">
+        <h2>Dataset Properties</h2>
+        <p>The dataset contains 17 sets and 6303 elements, of which 8 sets are shown in the plot.</p>
+        <h2>Set Properties</h2>
+        <p>The set sizes are diverging a lot, ranging from 106 to 1603. The largest set is Drama with 1603 elements, followed by Comedy with 1200, Action with 503, Thriller with 492, Romance with 471, Horror with 343, SciFi with 276, and Mystery with 106.</p>
+        <h2>Intersection Properties</h2>
+        <p>The plot is sorted by size in descending order. There are 83 non-empty intersections, all of which are shown in the plot. The largest 5 intersections are Just Drama (993), Just Comedy (670), the empty intersection (367), Just Horror (182), and Drama, and Comedy (178).</p>
+        <h2>Statistical Information</h2>
+        <p>The average intersection size is 46, and the median is 4. The 90th percentile is 134, and the 10th percentile is 1. The largest set, Drama, is present in 32.5% of all non-empty intersections. The smallest set, Mystery, is present in 27.7% of all non-empty intersections.</p>
+        <h2>Trend Analysis</h2>
+        <p>The intersection sizes peak at a value of 993 and then drastically flatten down to 1. The empty intersection is present with a size of 367. An all set intersection is not present. The individual set intersections are in largest and large intersections. The low degree set intersections lie in small and large and medium sized intersections. The medium degree set intersections can be seen among small sized intersections. Among the small sized intersections, the high order set intersections are significantly present.</p>
+    </div>
+</div>
+
+</body>
+</html>
diff --git a/public/Upset-Alttext-User-Survey/assets/upset.md b/public/Upset-Alttext-User-Survey/assets/upset.md
@@ -3,7 +3,8 @@
 The major challenge in understanding relationships between sets is the combinatorial explosion of the number of set intersections if the number of sets exceeds a trivial threshold. The most common set visualization approach – Venn Diagrams – doesn't scale beyond three or four sets. **UpSet, in contrast, is well suited for the quantitative analysis of data with more than three sets.** 
 
 
-![A simple UpSet Example](./assets/upsetr.png)
+<!-- ![A simple UpSet Example](./assets/upset.png) -->
+<img src="./assets/upset.png" alt="A simple UpSet Example" width="500"/>
 
 UpSet visualizes set intersections in a matrix layout. The matrix layout enables the effective representation of associated data, such as the number of elements in the intersections.
 

diff --git a/public/Upset-Alttext-User-Survey/assets/upset.png b/public/Upset-Alttext-User-Survey/assets/upset.png
diff --git a/public/Upset-Alttext-User-Survey/assets/upsetr_rotated.png b/public/Upset-Alttext-User-Survey/assets/upsetr_rotated.png
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		# Get Started!

		Now, as you are done being familiar with the UpSet plot and did training about how the question answer session will look like, you are ready to take part in into the actual study! Remember that, the three contents will come in random order (not as the same order of the training). Click Next to start.