Update app.py

app.py

@@ -73,7 +73,7 @@ class DataCollector:
                 continue
         
         return weather_data if weather_data else None
-
+    
     def fetch_usgs_earthquake_data(self):
         """Fetch earthquake data from USGS website"""
         try:
@@ -146,34 +146,124 @@ class DataCollector:
         
         return features_df.dropna()
 
-def create_cesium_component(earthquake_data=None, weather_data=None):
-    """Enhanced Cesium 3D visualization"""
-    cesium_html = """
-    <div id="cesiumContainer" style="width: 100%; height: 600px;"></div>
-    <script src="https://cesium.com/downloads/cesiumjs/releases/1.95/Build/Cesium/Cesium.js"></script>
-    <link href="https://cesium.com/downloads/cesiumjs/releases/1.95/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
+    def download_csv(df, filename):
+        """Generate a download link for a dataframe"""
+        csv = df.to_csv(index=False)
+        b64 = base64.b64encode(csv.encode()).decode()
+        href = f'<a href="data:file/csv;base64,{b64}" download="{filename}.csv">Download {filename} CSV</a>'
+        return href
+
+        
+# Replace the create_cesium_component function with a more user-friendly 3D visualization
+def create_3d_visualization(earthquake_data=None, weather_data=None):
+    """Create a more accessible 3D visualization using Three.js"""
+    threejs_html = """
+    <div id="visualizationContainer" style="width: 100%; height: 600px;"></div>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.7/dat.gui.min.js"></script>
     <script>
-        Cesium.Ion.defaultAccessToken = 'your-access-token';
-        const viewer = new Cesium.Viewer('cesiumContainer', {
-            terrainProvider: Cesium.createWorldTerrain(),
-            timeline: true,
-            animation: true,
-            baseLayerPicker: true,
-            scene3DOnly: false,
-            navigationHelpButton: true,
-            navigationInstructionsInitiallyVisible: false,
-            selectionIndicator: true,
-            infoBox: true
+        // Set up scene
+        const container = document.getElementById('visualizationContainer');
+        const scene = new THREE.Scene();
+        const camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000);
+        const renderer = new THREE.WebGLRenderer();
+        renderer.setSize(container.clientWidth, container.clientHeight);
+        container.appendChild(renderer.domElement);
+
+        // Add terrain
+        const terrainGeometry = new THREE.PlaneGeometry(100, 100, 50, 50);
+        const terrainMaterial = new THREE.MeshPhongMaterial({
+            color: 0x3d9970,
+            wireframe: false,
+            flatShading: true
+        });
+        const terrain = new THREE.Mesh(terrainGeometry, terrainMaterial);
+        
+        // Add random terrain elevation
+        const vertices = terrainGeometry.attributes.position.array;
+        for (let i = 0; i < vertices.length; i += 3) {
+            vertices[i + 2] = Math.random() * 10;
+        }
+        terrainGeometry.computeVertexNormals();
+        scene.add(terrain);
+
+        // Add lighting
+        const ambientLight = new THREE.AmbientLight(0x404040);
+        scene.add(ambientLight);
+        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
+        directionalLight.position.set(1, 1, 1);
+        scene.add(directionalLight);
+
+        // Add cities as markers
+        const cities = {
+            'Islamabad': {lat: 33.7294, lon: 73.0931},
+            'Karachi': {lat: 24.8607, lon: 67.0011},
+            'Lahore': {lat: 31.5204, lon: 74.3587}
+        };
+
+        Object.entries(cities).forEach(([name, coords]) => {
+            const markerGeometry = new THREE.SphereGeometry(1, 32, 32);
+            const markerMaterial = new THREE.MeshPhongMaterial({color: 0xff0000});
+            const marker = new THREE.Mesh(markerGeometry, markerMaterial);
+            
+            // Convert lat/lon to scene coordinates (simplified)
+            const x = (coords.lon - 67) * 2;
+            const y = (coords.lat - 30) * 2;
+            marker.position.set(x, y, 5);
+            scene.add(marker);
         });
 
-        // Add Pakistan terrain
-        viewer.scene.globe.enableLighting = true;
-        viewer.scene.globe.terrainExaggeration = 1.5;
+        // Camera position
+        camera.position.z = 50;
+        camera.position.y = 30;
+        camera.lookAt(scene.position);
+
+        // Add controls
+        const controls = {
+            rotateSpeed: 0.01,
+            elevationScale: 1.0
+        };
+
+        const gui = new dat.GUI();
+        gui.add(controls, 'rotateSpeed', 0, 0.05);
+        gui.add(controls, 'elevationScale', 0, 2);
 
-        // Add weather visualization
-        const weatherEntities = new Cesium.CustomDataSource('Weather');
-        viewer.dataSources.add(weatherEntities);
+        // Animation
+        function animate() {
+            requestAnimationFrame(animate);
+            terrain.rotation.y += controls.rotateSpeed;
+            
+            // Update terrain elevation
+            const vertices = terrainGeometry.attributes.position.array;
+            for (let i = 0; i < vertices.length; i += 3) {
+                vertices[i + 2] *= controls.elevationScale;
+            }
+            terrainGeometry.attributes.position.needsUpdate = true;
+            
+            renderer.render(scene, camera);
+        }
+        animate();
+
+        // Handle window resize
+        window.addEventListener('resize', () => {
+            camera.aspect = container.clientWidth / container.clientHeight;
+            camera.updateProjectionMatrix();
+            renderer.setSize(container.clientWidth, container.clientHeight);
+        });
+    </script>
     """
+    components.html(threejs_html, height=600)
+
+# Update the show_disaster_monitor function to use the new visualization
+def show_disaster_monitor(data_collector):
+    st.header("Advanced Disaster Monitoring System 🚨")
+    
+    earthquake_data = data_collector.fetch_usgs_earthquake_data()
+    
+    if earthquake_data:
+        st.subheader("3D Terrain Visualization")
+        create_3d_visualization(earthquake_data)  # Use the new visualization function
+        # ... rest of the function remains the same
     
     # Add earthquake data if available
     if earthquake_data: