Add readme and fix a global display issue

Author: siyuanZHANG01

docs/README.md

@@ -0,0 +1,44 @@
+# AIS Port Dynamics — US Coastal Vessel Traffic 2024
+
+Interactive visualization of U.S. vessel traffic for five major ports, built on the 2024 NOAA / U.S. Coast Guard AIS dataset.
+
+---
+
+## Running the site
+
+The site is a fully static SPA — no build step required.
+
+---
+
+## Data
+
+**Source:** [2024 USCG/NOAA AIS on Kaggle](https://www.kaggle.com/datasets/bwandowando/2024-us-coast-guard-noaa-ais-dataset)
+
+The raw Parquet files are not included due to size. Pre-processed JSON files are provided and served directly by the site.
+
+---
+
+## Usage
+
+- **Global view** — 60,000 sampled trajectories colored by speed. Use the date picker, time slider, and vessel type filter to narrow the dataset.
+- **Port view** — click a port marker or sidebar entry to zoom in and see activity charts, fleet breakdown, and anchor zones.
+- **Compare** — select a second port from the "Compare with" dropdown to view side-by-side charts.
+- **▶ Time / ▶ Months** — animate through the day or the year.
+
+---
+
+## Stack
+
+Leaflet 1.9 · D3.js v7 · CartoDB Dark Matter tiles · leaflet.heat
+
+---
+
+## Data preprocessing scripts
+
+The JSON files served by the site were generated by the following scripts in `data/`:
+
+1. `generate_land_mask.py`
+2. `rebuild_slim.py`
+3. `build_port_trajectories.py`
+
+These scripts are provided for reproducibility. **We do not recommend running them**, as they require the full raw Parquet dataset and may take several hours to complete.

docs/index.html

@@ -157,6 +157,10 @@
         <button class="play-btn" id="play-hour-btn">▶ Time</button>
         <button class="play-btn" id="play-month-btn">▶ Months</button>
       </div>
+      <div id="month-anim-label" style="display:none;font-size:11px;color:#8b949e;margin-top:4px;text-align:center">
+        <span style="color:#f0883e;font-weight:600;font-size:13px" id="month-anim-name"></span>
+        <span style="color:#8b949e"> 2024</span>
+      </div>
     </div>
 
     <!-- Navigation Pattern -->

docs/js/main.js

@@ -91,7 +91,10 @@ function loadGlobalTrajectoriesBackground() {
     .then(data => {
       State.globalTrajectories = data;
       console.log(`[INFO] Global overview loaded: ${data.length}`);
-      if (!State.selectedPort) redrawTrajectories();
+      if (!State.selectedPort) {
+        redrawTrajectories();
+        updateGlobalVesselStat();
+      }
     })
     .catch(e => console.warn("[WARN] vessel_trajectories_global.json not found.", e));
 }
@@ -380,10 +383,27 @@ function initDateRangeInputs() {
   inputEnd.addEventListener("change", update);
 }
 
+function _countGlobalVessels() {
+  const trajs = getGlobalTrajectories().filter(t => {
+    if (State.activeTypes && !State.activeTypes.has(t.vessel_type)) return false;
+    if (!passesTimeFilter(t)) return false;
+    if (!passesDateFilter(t)) return false;
+    return true;
+  });
+  return new Set(trajs.map(t => t.mmsi)).size;
+}
+
+function updateGlobalVesselStat() {
+  if (!State.selectedPort && State.globalTrajectories.length > 0) {
+    $("stat-vessels").textContent = fmt(_countGlobalVessels());
+  }
+}
+
 function _onFilterChange() {
   updateActivityCharts();
   updateFleetChart();
   if (State.selectedPort) renderPortDetail(State.selectedPort);
+  else updateGlobalVesselStat();
   redrawTrajectories();
 }
 
@@ -731,6 +751,8 @@ function initPlayButtons() {
     clearInterval(monthTimer); monthTimer = null;
     monthBtn.textContent = "▶ Months";
     monthBtn.classList.remove("playing");
+    const lbl = $("month-anim-label");
+    if (lbl) lbl.style.display = "none";
   }
 
   // ▶ Time：按时间间隔步进
@@ -758,9 +780,14 @@ function initPlayButtons() {
     monthBtn.textContent = "⏹ Months";
     monthBtn.classList.add("playing");
 
+    const monthAnimLabel = $("month-anim-label");
+    const monthAnimName  = $("month-anim-name");
+    if (monthAnimLabel) monthAnimLabel.style.display = "block";
+
     monthTimer = setInterval(async () => {
       animMonth = (animMonth + 1) % 12;
       const [sVal, eVal] = MONTH_DATE_RANGES[animMonth];
+      if (monthAnimName) monthAnimName.textContent = MONTH_NAMES[animMonth + 1];
 
       // 更新输入框
       const inputStart = $("date-input-start");