VIDITeaching · DONTWAKEMEUP17 · Jan 30, 2026 · Jan 30, 2026 · Jan 30, 2026 · Jan 30, 2026
diff --git a/Homework2/Vue-Template/tsconfig.json b/Homework2/Vue-Template/tsconfig.json
@@ -3,7 +3,7 @@
     "target": "ESNext",
     "useDefineForClassFields": true,
     "module": "ESNext",
-    "moduleResolution": "Node",
+    "moduleResolution": "bundler",
     "strict": true,
     "jsx": "preserve",
     "resolveJsonModule": true,

diff --git a/Homework2/Vue-Template/vite.config.ts b/Homework2/Vue-Template/vite.config.ts
@@ -11,4 +11,4 @@ export default defineConfig({
     vue(),
     vuetify({ autoImport: true })
   ],
-})
+})
diff --git a/Homework2/xyuzhong/Vue-Template/README.md b/Homework2/xyuzhong/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/Homework2/xyuzhong/Vue-Template/data/demo.csv b/Homework2/xyuzhong/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/Homework2/xyuzhong/Vue-Template/data/demo.json b/Homework2/xyuzhong/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/Homework2/xyuzhong/Vue-Template/data/spotify_data clean.csv b/Homework2/xyuzhong/Vue-Template/data/spotify_data clean.csv
diff --git a/Homework2/xyuzhong/Vue-Template/data/track_data_final.csv b/Homework2/xyuzhong/Vue-Template/data/track_data_final.csv
diff --git a/Homework2/xyuzhong/Vue-Template/index.html b/Homework2/xyuzhong/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>
diff --git a/Homework2/xyuzhong/Vue-Template/package.json b/Homework2/xyuzhong/Vue-Template/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "dashboard",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@vueuse/core": "^14.1.0",
+    "axios": "^1.13.2",
+    "d3": "^7.9.0",
+    "lodash": "^4.17.21",
+    "pinia": "^3.0.4",
+    "vite-plugin-vuetify": "^2.1.2",
+    "vue": "^3.5.26",
+    "vuetify": "^3.11.6"
+  },
+  "devDependencies": {
+    "@types/d3": "^7.4.3",
+    "@types/lodash": "^4.17.21",
+    "@vitejs/plugin-vue": "^6.0.3",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.0",
+    "vue-tsc": "^3.2.1"
+  }
+}
diff --git a/Homework2/xyuzhong/Vue-Template/src/App.vue b/Homework2/xyuzhong/Vue-Template/src/App.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import TreemapView from './components/TreemapView.vue'
+import TopArtistsBar from './components/TopArtistsBar.vue'
+import BubbleChart from './components/BubbleChart.vue'
+import SparklinesSummary from './components/SparklinesSummary.vue'
+import ParallelCoordinatesPlot from './components/ParallelCoordinatesPlot.vue'
+
+// Local components are available in the template automatically with `script setup`.
+</script>
+
+<!-- Using Vuetify components (Vuetify should be registered in the app entry). -->
+<template>
+  <VContainer id="main-container" class="d-flex flex-column" fluid style="background: #121212; min-height: 100vh; padding: 0; overflow-y: auto;">
+    <!-- Header -->
+    <VRow class="pa-0" style="background: #191414; padding: 24px 40px; border-bottom: 2px solid #1DB954; flex-shrink: 0;">
+      <VCol class="pa-0" style="padding-left: 60px;">
+        <h1 style="color: #1DB954; font-size: 32px; font-weight: bold; margin: 0; letter-spacing: 1px;">
+          🎵 SPOTIFY TRACKS ANALYTICS
+        </h1>
+        <p style="color: #b3b3b3; margin: 8px 0 0 0; font-size: 14px; white-space: nowrap;">
+          Explore artist and track popularity patterns across 8,780 Spotify tracks
+        </p>
+      </VCol>
+    </VRow>
+
+    <!-- Visualization 1: Dataset Summary -->
+    <VRow class="pa-4" style="height: 250px; background: #121212; flex-shrink: 0;">
+      <VCol class="pa-0" style="border: 1px solid #282828; border-radius: 8px; overflow: hidden;">
+        <SparklinesSummary />
+      </VCol>
+    </VRow>
+
+    <!-- Visualization 2: Treemap -->
+    <VRow class="pa-4" style="height: 400px; background: #121212; flex-shrink: 0;">
+      <VCol class="pa-0" style="border: 1px solid #282828; border-radius: 8px; overflow: hidden;">
+        <TreemapView />
+      </VCol>
+    </VRow>
+
+    <!-- Visualization 3: Top Artists Bar -->
+    <VRow class="pa-4" style="height: 400px; background: #121212; flex-shrink: 0;">
+      <VCol class="pa-0" style="border: 1px solid #282828; border-radius: 8px; overflow: hidden;">
+        <TopArtistsBar />
+      </VCol>
+    </VRow>
+
+    <!-- Visualization 4: Bubble Chart -->
+    <VRow class="pa-4" style="height: 400px; background: #121212; flex-shrink: 0;">
+      <VCol class="pa-0" style="border: 1px solid #282828; border-radius: 8px; overflow: hidden;">
+        <BubbleChart />
+      </VCol>
+    </VRow>
+
+    <!-- Visualization 5: Parallel Coordinates Plot -->
+    <VRow class="pa-4" style="height: 450px; background: #121212; flex-shrink: 0;">
+      <VCol class="pa-0" style="border: 1px solid #282828; border-radius: 8px; overflow: hidden;">
+        <ParallelCoordinatesPlot />
+      </VCol>
+    </VRow>
+  </VContainer>
+</template>
+
+<style scoped>
+#main-container {
+  background-color: #121212;
+  overflow-y: auto;
+}
+
+h1 {
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+p {
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+</style>
-Original file line number
+Diff line change
@@ Expand Up / @@ -11,4 +11,4 @@ export default defineConfig({ @@
         vue(),
         vuetify({ autoImport: true })
       ],
-    })
+    })