Update app.py

app.py

@@ -293,7 +293,7 @@ def generate_main_analysis(start_year, start_month, end_year, end_month, enso_ph
     
     return tracks_fig, wind_scatter, pressure_scatter, regression_fig, slopes_text
 
-# Path animation function
+# Path animation function with moving track
 def categorize_typhoon_by_standard(wind_speed, standard):
     if standard == 'taiwan':
         wind_speed_ms = wind_speed * 0.514444
@@ -326,53 +326,35 @@ def generate_improved_animation(year, typhoon, standard):
     typhoon_id = typhoon.split('(')[-1].strip(')')
     storm = ibtracs.get_storm(typhoon_id)
 
-    # Create frames for animation
+    # Create animation frames with growing track
     frames = []
     for i in range(len(storm.time)):
         category, color = categorize_typhoon_by_standard(storm.vmax[i], standard)
         frame_data = [
             go.Scattergeo(
-                lon=storm.lon[:i+1], 
-                lat=storm.lat[:i+1], 
-                mode='lines', 
+                lon=storm.lon[:i+1],  # Only include points up to current time
+                lat=storm.lat[:i+1],
+                mode='lines+markers',
                 line=dict(width=2, color='blue'),
-                name="Track",
-                hoverinfo="none"
-            ),
-            go.Scattergeo(
-                lon=[storm.lon[i]], 
-                lat=[storm.lat[i]], 
-                mode='markers', 
-                marker=dict(size=12, color=color),
-                name=f"Current Position",
+                marker=dict(size=8, color=color),
+                name=f"{storm.name} at {storm.time[i].strftime('%Y-%m-%d %H:%M')}",
                 text=[f"Time: {storm.time[i].strftime('%Y-%m-%d %H:%M')}<br>Wind: {storm.vmax[i]:.1f} kt<br>Category: {category}"],
                 hoverinfo="text"
             )
         ]
-        if i > 0:
-            frame_data.append(
-                go.Scattergeo(
-                    lon=storm.lon[:i], 
-                    lat=storm.lat[:i], 
-                    mode='markers', 
-                    marker=dict(size=5, color='rgba(100,100,100,0.5)'),
-                    name="Previous Positions",
-                    hoverinfo="none",
-                    showlegend=False
-                )
-            )
         frames.append(go.Frame(data=frame_data, name=str(i)))
 
-    # Initial figure
+    # Initial figure with just the starting point
+    category, color = categorize_typhoon_by_standard(storm.vmax[0], standard)
     fig = go.Figure(
         data=[
             go.Scattergeo(
                 lon=[storm.lon[0]], 
                 lat=[storm.lat[0]],
-                mode='markers', 
-                marker=dict(size=12, color='green'),
+                mode='markers',
+                marker=dict(size=12, color=color),
                 name="Start",
-                text=[f"Start: {storm.time[0].strftime('%Y-%m-%d %H:%M')}"],
+                text=[f"Start: {storm.time[0].strftime('%Y-%m-%d %H:%M')}<br>Wind: {storm.vmax[0]:.1f} kt<br>Category: {category}"],
                 hoverinfo="text"
             )
         ],
@@ -397,7 +379,7 @@ def generate_improved_animation(year, typhoon, standard):
 
     # Update layout with animation controls
     fig.update_layout(
-        title=f"{year} {storm.name} Typhoon Path",
+        title=f"{year} {storm.name} Typhoon Path Animation",
         geo=dict(
             projection_type='natural earth',
             showland=True,
@@ -415,7 +397,7 @@ def generate_improved_animation(year, typhoon, standard):
                 {
                     "args": [None, {"frame": {"duration": 200, "redraw": True},
                                    "fromcurrent": True,
-                                   "transition": {"duration": 0},
+                                   "transition": {"duration": 0, "easing": "linear"},
                                    "mode": "immediate"}],
                     "label": "Play",
                     "method": "animate"
@@ -447,7 +429,7 @@ def generate_improved_animation(year, typhoon, standard):
                 "visible": True,
                 "xanchor": "right"
             },
-            "transition": {"duration": 0},
+            "transition": {"duration": 0, "easing": "linear"},
             "pad": {"b": 10, "t": 50},
             "len": 0.9,
             "x": 0.1,
@@ -457,7 +439,7 @@ def generate_improved_animation(year, typhoon, standard):
                     "args": [[str(i)], {"frame": {"duration": 200, "redraw": True},
                                        "mode": "immediate",
                                        "transition": {"duration": 0}}],
-                    "label": storm.time[i].strftime('%m/%d %H:%M') if i < len(storm.time) else "",
+                    "label": storm.time[i].strftime('%m/%d %H:%M'),
                     "method": "animate"
                 } for i in range(len(storm.time))
             ]
@@ -471,8 +453,6 @@ def generate_improved_animation(year, typhoon, standard):
             x=0.01,
             bgcolor="rgba(255, 255, 255, 0.8)"
         ),
-        # Ensure animation starts automatically
-        autosize=True
     )
 
     return fig
@@ -691,8 +671,9 @@ with gr.Blocks(title="Typhoon Analysis Dashboard") as demo:
         1. Select a year and typhoon from the dropdowns
         2. Choose a classification standard (Atlantic or Taiwan)
         3. Click "Generate Animation"
-        4. Use the "Play" button to start the animation or the slider to navigate through the typhoon's path
-        5. Colors indicate typhoon intensity according to the selected standard
+        4. Use the "Play" button to watch the typhoon track grow over time
+        5. Use the slider to manually navigate through the typhoon's path
+        6. The blue line represents the growing track, with markers colored by intensity
         """)
         
         def update_typhoon_options(year):