com-480-data-visualization
diff --git a/‎milestone2/index.html‎
Lines changed: 20 additions & 5 deletions b/‎milestone2/index.html‎
Lines changed: 20 additions & 5 deletions
diff --git a/‎milestone2/style.css‎
Lines changed: 18 additions & 0 deletions b/‎milestone2/style.css‎
Lines changed: 18 additions & 0 deletions
@@ -5,7 +5,8 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Teen Health Profile</title>
   <link rel="stylesheet" href="style.css">
-  <script src="https://d3js.org/d3.v7.min.js"></script>
+  <script src="https://d3js.org/d3.v7.min.js" defer></script>
+  <script src="main.js" defer></script>
 </head>
 <body>
 
@@ -21,7 +22,21 @@ <h1>Teen Health Profile</h1>
   <h2>Who Are We Looking At?</h2>
   <p class="section-desc">The YRBS starts as a survey cohort before it becomes a health profile. This opening view shows raw survey composition; later health estimates use the CDC survey weight.</p>
   <div class="orientation-layout">
-    <aside id="survey-passport" class="survey-passport"></aside>
+    <aside id="survey-passport" class="survey-passport">
+      <div class="passport-label">Dataset Passport</div>
+      <div class="passport-title">CDC YRBS 2023</div>
+      <div class="passport-metrics">
+        <div class="passport-metric">
+          <span class="passport-value">20,103</span>
+          <span class="passport-caption">student rows</span>
+        </div>
+        <div class="passport-metric">
+          <span class="passport-value">250</span>
+          <span class="passport-caption">variables after conversion</span>
+        </div>
+      </div>
+      <p class="passport-note">Loading survey composition...</p>
+    </aside>
     <div class="mosaic-panel">
       <div class="mosaic-toolbar">
         <div class="controls mosaic-controls">
@@ -30,7 +45,9 @@ <h2>Who Are We Looking At?</h2>
         </div>
         <div id="mosaic-legend" class="mosaic-legend"></div>
       </div>
-      <div id="student-mosaic"></div>
+      <div id="student-mosaic">
+        <div class="loading-panel">Loading student mosaic...</div>
+      </div>
     </div>
   </div>
 </section>
@@ -143,7 +160,5 @@ <h2>Is Teen Health Just A Digital-Behavior Story?</h2>
   <div id="phone-corr-summary" class="phone-summary-strip"></div>
   <div id="heatmap-chart"></div>
 </section>
-
-<script src="main.js"></script>
 </body>
 </html>
@@ -266,6 +266,24 @@ section h2 {
   border-radius: 8px;
   background: #fff;
   padding: 10px 12px;
+  min-height: 220px;
+}
+
+.loading-panel {
+  min-height: 198px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #6b7280;
+  font-size: 0.86rem;
+  background: repeating-linear-gradient(
+    -45deg,
+    #f8f9fb,
+    #f8f9fb 10px,
+    #f1f3f7 10px,
+    #f1f3f7 20px
+  );
+  border-radius: 6px;
 }
 
 /* ── Demographics grid ── */