Update aswsum.html

LIRNEasia · Aug 15, 2023 · 6d28590 · 6d28590
1 parent c99bc94
commit 6d28590
Showing 1 changed file with 79 additions and 3 deletions.
diff --git a/aswsum.html b/aswsum.html
@@ -1,9 +1,85 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <title>Embedded Dash App</title>
+    <title>ASWSM Data Map</title>
+    <!-- Include necessary CSS and JavaScript files here -->
+    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dash.css" integrity="sha384-SOMERANDOMHASH" crossorigin="anonymous">
+    <script src="https://unpkg.com/[email protected]/umd/react.production.min.js" crossorigin="anonymous"></script>
+    <script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js" crossorigin="anonymous"></script>
+    <script src="https://unpkg.com/prop-types/prop-types.min.js" crossorigin="anonymous"></script>
+    <script src="https://unpkg.com/[email protected]/dash_renderer.min.js" crossorigin="anonymous"></script>
+    <script src="https://unpkg.com/[email protected]/dash_core_components.min.js" crossorigin="anonymous"></script>
+    <script src="https://unpkg.com/[email protected]/dash_html_components.min.js" crossorigin="anonymous"></script>
+    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
 </head>
-<body>
-  <iframe src="https://github.com/LIRNEasia/d3-visualizations/blob/master/awsm_mapping.py" width="800" height="600"></iframe>
+  <body>
+    <!-- Add your code for rendering the map here -->
+
+    <script src="https://cdn.jsdelivr.net/pyodide/v0.18.1/full/pyodide.js"></script>
+    <script>
+        async function runPythonCode() {
+            await loadPyodide({
+                indexURL: "https://cdn.jsdelivr.net/pyodide/v0.18.1/full/"
+            });
+
+            pyodide.runPython(`
+                import dash
+                import dash_core_components as dcc
+                import dash_html_components as html
+                import plotly.express as px
+                import geopandas as gpd
+                import pandas as pd
+
+                gdf = pd.read_csv('https://raw.githubusercontent.com/LIRNEasia/d3-visualizations/master/resources/complete_data.csv')
+
+                geo_json = gpd.read_file("https://raw.githubusercontent.com/LIRNEasia/d3-visualizations/master/resources/dsd_topology.json")
+
+                app = dash.Dash(__name__)
+
+                app.layout = html.Div(
+                    className="container",
+                    children=[
+                        html.H1("ASWSM DATA", className="title"),
+                        html.P("Poverty Category:", className="subtitle"),
+                        dcc.RadioItems(
+                            id="candidate",
+                            options=[
+                                {"label": "Poor", "value": "Poor"},
+                                {"label": "Severely Poor", "value": "Severely Poor"},
+                                {"label": "Transient", "value": "Transient"},
+                                {"label": "Vulnerable", "value": "Vulnerable"},
+                            ],
+                            value="Poor",
+                            className="radio-items",
+                        ),
+                        dcc.Graph(id="graph", className="graph"),
+                    ],
+                )
+
+                @app.callback(
+                    Output("graph", "figure"),
+                    Input("candidate", "value"))
+                def display_choropleth(candidate):
+
+                    fig = px.choropleth(
+                        gdf,
+                        geojson=geo_json["geometry"],
+                        color=candidate,
+                        locations=gdf.index,
+                        projection="mercator",
+                        range_color=[0, 15000]
+                    )
+
+                    fig.update_geos(fitbounds="locations", visible=False)
+                    fig.update_layout(margin={"r": 0, "t": 0, "l": 0, "b": 0})
+                    return fig
+
+                app.run_server(debug=True)
+            `);
+        }
+
+        runPythonCode();
+    </script>
 </body>
+
 </html>