ucdavis · chris315654 · Nov 1, 2024
diff --git a/Homework3/zehruan/Vue-Template/README.md b/Homework3/zehruan/Vue-Template/README.md
@@ -0,0 +1,27 @@
+# More about the Framework
+
+
+This is a template in Vue.js and TypeScript. Vue 3.0 sits between React and basic JavaScript depending on the developers comfort level. For this class we stick with [Options API](https://vuejs.org/api/#options-api) rather than Composition API (not required so you can switch depending on how you feel). 
+
+If you want to use Vue.js but not with TypeScript, just remove any type specifications from the `Example.vue` and `Notes.vue`. You can always refer to `VanillaJS-Template/example.js` for this migration.
+
+
+## Files You Have to Care about
+
+`package.json` is where we manage the libraries we installed. Besides this, most of the files you can ignore, but **the files under `./src/` are your concern**.
+
+* `./src/main.ts` is the root script file for Vue.js that instatinates our single page application.
+* `./src/App.vue` is the root file for all **development** needs and is also where we manage the layout and load in components.
+* `./src/types.ts` is usually where we declare our customized types if you're planning to use it.
+* `./src/stores/` is where we manage the stores if you're planning to use it. The store is responsible for global state management.
+* `./src/components/` is where we create the components. You may have multiple components depends on your design.
+  * `Example.vue` shows how to read `.csv` and `.json`, how component size is being watched, how a bar chart is created, and how the component updates if there are any changes. 
+  * `Notes.vue` shows the difference of **state** and **prop**, how to use Vuetify, and how a local state updates based on interaction.
+  * `NotesWithStore.vue` is equivalent to `Notes.vue`, excepts it is written in Composition API and uses store.
+
+## Libraries Installed in this Framework
+ * D3.js v7 for visualization
+ * [axios](https://axios-http.com/docs/intro) for API.
+ * [pinia](https://pinia.vuejs.org/introduction.html) for store management in Vue.js
+ * [Vuetify](https://next.vuetifyjs.com/en/components/all/) for UI that follows Google Material Design 3.
+ * [lodash](https://lodash.com/) for utility functions in JavaScript.
diff --git a/Homework3/zehruan/Vue-Template/data/Student Mental health.csv b/Homework3/zehruan/Vue-Template/data/Student Mental health.csv
@@ -0,0 +1,102 @@
+Timestamp,Choose your gender,Age,What is your course?,Your current year of Study,What is your CGPA?,Marital status,Do you have Depression?,Do you have Anxiety?,Do you have Panic attack?,Did you seek any specialist for a treatment?
+8/7/2020 12:02,Female,18,Engineering,year 1,3.00 - 3.49,No,Yes,No,Yes,No
+8/7/2020 12:04,Male,21,Islamic education,year 2,3.00 - 3.49,No,No,Yes,No,No
+8/7/2020 12:05,Male,19,BIT,Year 1,3.00 - 3.49,No,Yes,Yes,Yes,No
+8/7/2020 12:06,Female,22,Laws,year 3,3.00 - 3.49,Yes,Yes,No,No,No
+8/7/2020 12:13,Male,23,Mathemathics,year 4,3.00 - 3.49,No,No,No,No,No
+8/7/2020 12:31,Male,19,Engineering,Year 2,3.50 - 4.00,No,No,No,Yes,No
+8/7/2020 12:32,Female,23,Pendidikan islam,year 2,3.50 - 4.00 ,Yes,Yes,No,Yes,No
+8/7/2020 12:33,Female,18,BCS,year 1,3.50 - 4.00,No,No,Yes,No,No
+8/7/2020 12:35,Female,19,Human Resources,Year 2,2.50 - 2.99,No,No,No,No,No
+8/7/2020 12:39,Male,18,Irkhs,year 1,3.50 - 4.00,No,No,Yes,Yes,No
+8/7/2020 12:39,Female,20,Psychology,year 1,3.50 - 4.00,No,No,No,No,No
+8/7/2020 12:39,Female,24,Engineering,Year 3,3.50 - 4.00,Yes,Yes,No,No,No
+8/7/2020 12:40,Female,18,BCS,year 1,3.00 - 3.49,No,Yes,No,No,No
+8/7/2020 12:41,Male,19,Engineering,year 1,3.00 - 3.49,No,No,No,No,No
+8/7/2020 12:43,Female,18,KENMS,Year 2,3.50 - 4.00,No,No,Yes,No,No
+8/7/2020 12:43,Male,24,BCS,Year 3,3.50 - 4.00,No,No,No,No,No
+8/7/2020 12:46,Female,24,Accounting ,year 3,3.00 - 3.49,No,No,No,No,No
+8/7/2020 12:52,Female,24,ENM,year 4,3.00 - 3.49,Yes,Yes,Yes,Yes,No
+8/7/2020 13:05,Female,20,BIT,Year 2,3.50 - 4.00,No,No,Yes,No,No
+8/7/2020 13:07,Female,18,Marine science,year 2,3.50 - 4.00,Yes,Yes,Yes,Yes,No
+8/7/2020 13:12,Female,19,Engineering,year 1,3.00 - 3.49,No,No,No,Yes,No
+8/7/2020 13:13,Female,18,KOE,Year 2,3.00 - 3.49,No,No,No,No,No
+8/7/2020 13:13,Female,24,BCS,year 1,3.50 - 4.00,No,No,No,No,No
+8/7/2020 13:15,Female,24,Engineering,year 1,3.00 - 3.49,No,No,No,No,No
+8/7/2020 13:17,Female,23,BCS,Year 3,3.50 - 4.00,No,Yes,Yes,Yes,No
+8/7/2020 13:29,Female,18,Banking Studies,year 1,3.50 - 4.00,No,No,No,No,No
+8/7/2020 13:35,Female,19,Engineering,year 1,3.50 - 4.00,No,No,No,No,No
+8/7/2020 13:41,Male,18,Engineering,Year 2,3.00 - 3.49,Yes,Yes,Yes,No,No
+8/7/2020 13:58,Female,24,BIT,Year 3,3.50 - 4.00,Yes,Yes,Yes,Yes,Yes
+8/7/2020 14:05,Female,24,BCS,year 4,3.50 - 4.00,No,No,No,No,No
+8/7/2020 14:27,Female,23,Business Administration,Year 2,3.00 - 3.49,No,No,No,No,No
+8/7/2020 14:29,Male,18,BCS,year 2,3.00 - 3.49,No,No,No,No,No
+8/7/2020 14:29,Male,19,BCS,year 1,3.50 - 4.00,No,No,No,Yes,No
+8/7/2020 14:31,Male,18,BCS,Year 2,3.50 - 4.00,Yes,Yes,Yes,No,Yes
+8/7/2020 14:41,Female,19,BIT,year 1,3.00 - 3.49,No,Yes,Yes,Yes,No
+8/7/2020 14:43,Female,18,Engineering,year 1,2.00 - 2.49,No,No,No,No,No
+8/7/2020 14:43,Female,18,Law,Year 3,3.00 - 3.49,No,Yes,Yes,No,No
+8/7/2020 14:45,Female,19,BIT,year 1,2.50 - 2.99,No,Yes,Yes,Yes,No
+8/7/2020 14:47,Female,18,KIRKHS,year 1,3.50 - 4.00,No,No,No,No,No
+8/7/2020 14:56,Female,24,Engineering,Year 2,2.50 - 2.99,Yes,Yes,No,Yes,Yes
+8/7/2020 14:57,Female,24,BIT,Year 3,3.00 - 3.49,No,No,Yes,No,No
+8/7/2020 14:57,Female,22,Engineering,year 4,3.50 - 4.00,No,No,No,No,No
+8/7/2020 14:58,Female,20,Usuluddin ,year 2,3.00 - 3.49,No,Yes,No,No,No
+8/7/2020 15:07,Male,,BIT,year 1,0 - 1.99,No,No,No,No,No
+8/7/2020 15:08,Male,23,TAASL,year 2,3.50 - 4.00,No,No,No,Yes,No
+8/7/2020 15:09,Male,18,BCS,year 1,3.50 - 4.00,No,No,Yes,Yes,No
+8/7/2020 15:12,Female,19,Engineering,year 1,3.50 - 4.00,No,No,Yes,No,No
+8/7/2020 15:14,Female,18,Engine,year 4,3.50 - 4.00,No,No,No,No,No
+8/7/2020 15:14,Male,24,BCS,year 2,3.00 - 3.49,No,Yes,No,No,No
+8/7/2020 15:18,Female,24,BCS,year 3,3.50 - 4.00,No,No,No,Yes,No
+8/7/2020 15:27,Female,23,ALA,year 1,2.50 - 2.99,Yes,Yes,No,Yes,Yes
+8/7/2020 15:37,Female,18,BCS,year 2,3.50 - 4.00,No,No,Yes,No,No
+8/7/2020 15:47,Female,19,Biomedical science,year 3,3.00 - 3.49,No,No,No,No,No
+8/7/2020 15:48,Female,20,koe,year 3,3.00 - 3.49,Yes,Yes,Yes,Yes,No
+8/7/2020 15:57,Female,19,BCS,year 1,3.50 - 4.00,No,Yes,No,Yes,Yes
+8/7/2020 15:58,Male,21,BCS,year 1,3.00 - 3.49,No,No,No,No,No
+8/7/2020 16:08,Male,23,Kirkhs,Year 3,3.50 - 4.00,No,No,No,No,No
+8/7/2020 16:21,Female,20,BENL,Year 3,3.00 - 3.49,No,Yes,Yes,No,No
+8/7/2020 16:22,Female,18,BCS,year 1,3.50 - 4.00,No,No,No,No,No
+8/7/2020 16:34,Female,23,Benl,year 1,3.00 - 3.49,No,No,No,No,No
+8/7/2020 16:34,Female,18,IT,Year 3,3.00 - 3.49,No,No,No,Yes,No
+8/7/2020 16:53,Female,19,BCS,year 1,3.50 - 4.00,No,No,No,No,No
+8/7/2020 17:05,Female,18,CTS,Year 1,3.50 - 4.00,No,No,No,Yes,No
+8/7/2020 17:37,Female,24,engin,year 1,3.50 - 4.00,No,No,No,Yes,No
+8/7/2020 17:46,Female,24,Engine,year 1,3.50 - 4.00,No,No,No,No,No
+8/7/2020 17:50,Female,23,Econs,year 1,3.50 - 4.00,No,Yes,Yes,No,No
+8/7/2020 18:10,Female,18,KOE,Year 3,3.00 - 3.49,No,No,Yes,No,No
+8/7/2020 18:11,Male,19,MHSC,Year 3,3.00 - 3.49,Yes,Yes,No,Yes,No
+8/7/2020 19:05,Female,18,Malcom,year 1,3.50 - 4.00,No,Yes,No,No,No
+8/7/2020 19:32,Female,24,Kop,year 4,3.00 - 3.49,No,No,Yes,No,No
+8/7/2020 20:36,Female,24,Biomedical science,year 1,3.00 - 3.49,No,No,No,No,No
+8/7/2020 21:21,Female,18,Laws,Year 3,3.50 - 4.00,No,No,No,Yes,No
+8/7/2020 22:35,Female,19,BIT,Year 3,3.00 - 3.49,Yes,Yes,No,No,No
+9/7/2020 6:57,Male,18,Biomedical science,year 1,0 - 1.99,No,No,No,No,No
+9/7/2020 11:43,Male,24,BIT,Year 3,3.50 - 4.00,No,No,Yes,No,No
+9/7/2020 11:57,Female,24,KOE,year 1,3.50 - 4.00,No,No,Yes,Yes,No
+9/7/2020 13:15,Female,23,Engineering,year 1,3.00 - 3.49,No,Yes,No,No,No
+9/7/2020 18:24,Female,18,Human Sciences ,Year 2,3.00 - 3.49,No,No,No,Yes,No
+13/07/2020 10:07:32,Female,19,Biotechnology,Year 3,0 - 1.99,No,No,No,No,No
+13/07/2020 10:10:30,Female,18,Engineering,year 4,3.50 - 4.00,No,No,No,No,No
+13/07/2020 10:11:26,Female,24,Communication ,Year 2,3.50 - 4.00,Yes,Yes,Yes,Yes,No
+13/07/2020 10:12:18,Female,24,Diploma Nursing,year 2,3.50 - 4.00,No,No,No,No,No
+13/07/2020 10:12:26,Female,19,Engineering,year 1,3.00 - 3.49,No,Yes,Yes,No,No
+13/07/2020 10:12:28,Female,19,Pendidikan Islam ,Year 2,3.00 - 3.49,No,No,No,No,No
+13/07/2020 10:14:46,Male,23,Radiography,year 1,3.00 - 3.49,No,No,No,No,No
+13/07/2020 10:33:47,Female,18,psychology,year 1,3.50 - 4.00,No,Yes,Yes,No,Yes
+13/07/2020 10:34:08,Female,19,Fiqh fatwa ,Year 3,3.00 - 3.49,No,No,No,No,No
+13/07/2020 11:46:13,Female,18,psychology,year 1,3.50 - 4.00,No,Yes,Yes,Yes,No
+13/07/2020 11:49:02,Male,24,BIT,year 1,3.00 - 3.49,No,No,Yes,No,No
+13/07/2020 11:54:58,Male,24,Engineering,Year 2,2.00 - 2.49,No,No,No,Yes,No
+13/07/2020 13:57:11,Female,23,DIPLOMA TESL,Year 3,3.50 - 4.00,No,No,No,Yes,No
+13/07/2020 14:38:12,Male,18,Koe,Year 2,3.00 - 3.49,No,No,Yes,No,No
+13/07/2020 14:48:05,Female,19,KOE,year 2,3.00 - 3.49,Yes,Yes,No,No,No
+13/07/2020 16:15:13,Female,18,BENL,year 1,3.00 - 3.49,No,Yes,No,No,No
+13/07/2020 17:30:44,Female,24,Fiqh,Year 3,0 - 1.99,No,No,No,Yes,No
+13/07/2020 19:08:32,Female,18,Islamic Education,year 1,3.50 - 4.00,No,No,No,No,No
+13/07/2020 19:56:49,Female,21,BCS,year 1,3.50 - 4.00,No,No,Yes,No,No
+13/07/2020 21:21:42,Male,18,Engineering,Year 2,3.00 - 3.49,No,Yes,Yes,No,No
+13/07/2020 21:22:56,Female,19,Nursing ,Year 3,3.50 - 4.00,Yes,Yes,No,Yes,No
+13/07/2020 21:23:57,Female,23,Pendidikan Islam,year 4,3.50 - 4.00,No,No,No,No,No
+18/07/2020 20:16:21,Male,20,Biomedical science,Year 2,3.00 - 3.49,No,No,No,No,No
diff --git a/Homework3/zehruan/Vue-Template/data/demo.csv b/Homework3/zehruan/Vue-Template/data/demo.csv
@@ -0,0 +1,10 @@
+category,value
+a,21
+b,42
+c,43
+d,5
+e,26
+f,7
+l,10
+s,18
+x,85
diff --git a/Homework3/zehruan/Vue-Template/data/demo.json b/Homework3/zehruan/Vue-Template/data/demo.json
@@ -0,0 +1,41 @@
+{
+    "data":[
+        {
+            "value": 21,
+            "category": "a"
+        },
+        {
+            "value": 42,
+            "category": "b"
+        },
+        {
+            "value": 43,
+            "category": "c"
+        },
+        {
+            "value": 5,
+            "category": "d"
+        },
+        {
+            "value": 26,
+            "category": "e"
+        },
+        {
+            "value": 7,
+            "category": "f"
+        },
+        {
+            "value": 10,
+            "category": "l"
+        },
+        {
+            "value": 18,
+            "category": "s"
+        },
+        {
+            "value": 85,
+            "category": "x"
+        }
+    ]
+
+}
diff --git a/Homework3/zehruan/Vue-Template/index.html b/Homework3/zehruan/Vue-Template/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>ECS272 Information Visualization</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>