Everything runs okay until here! I have to finish it today!!!
PLEASE HELP!
I can only upload one photo
Load the GeoJSON file, containing geographic data for countries
map_data = gpd.read_file(‘countries.geo.json’)
Define dropdown options for selecting metrics to visualize on the map
Each option is a tuple with the display name and the corresponding column in the DataFrame
dropdown_options = [(‘Crime Index’, ‘CI’),
(‘Education Index’, ‘EDU’),
(‘Gross National Income’, ‘GNI’),
(‘Human Development Index’, ‘HDI’),
(‘Density’, ‘DE’)]
Create the dropdown widget to select the metric to display
dropdown1 = widgets.Dropdown(options=dropdown_options, description=‘Select Metric:’)
Output widget to display the map
out1 = widgets.Output()
Define a function to update the map based on the selected metric
def update_map(selected_column):
# Merge the GeoJSON data with the DataFrame to include metric values for each country
merged_data = map_data.merge(df, left_on=‘name_long’, right_on=‘NAME’, how=‘left’)
# Create a Folium map centered on the equator with a world view
m = folium.Map(location=[0, 0], zoom_start=2, tiles='cartodbpositron')
# Add a choropleth layer to represent the selected metric
folium.Choropleth(
geo_data=merged_data,
data=merged_data,
columns=['name_long', selected_column],
key_on='feature.properties.name_long',
fill_color='OrRd',
fill_opacity=0.7,
line_opacity=0.2,
legend_name=selected_column
).add_to(m)
# Add hover functionality with tooltips
for _, row in merged_data.iterrows():
if pd.notna(row[selected_column]):
folium.Tooltip(f"{row['name_long']}: {row[selected_column]}").add_to(
folium.GeoJson(row.geometry, style_function=lambda x: {'fillColor': 'transparent'})
).add_to(m)
# Display the map in the output widget
with out1:
clear_output(wait=True)
display(m)
Handle the dropdown value change event
def dropdown_event_handler(change):
selected_column = change.new
update_map(selected_column)
Register the event handler for the dropdown widget
dropdown1.observe(dropdown_event_handler, names=‘value’)
Display the dropdown and the map
display(dropdown1, out1)
Initialize the map with the default column
update_map(dropdown_options[0][1])
Select Metric:
Crime Index
Make this Notebook Trusted to load map: File -> Trust Notebook<iframe srcdoc="<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <script> L_NO_TOUCH = false; L_DISABLE_3D = false; </script> <style>html, body {width: 100%;height: 100%;margin: 0;padding: 0;}</style> <style>#map {position:absolute;top:0;bottom:0;right:0;left:0;}</style> <script src="https://cdn.jsdelivr.net/npm/leaflet@1.9.3/dist/leaflet.js"></script> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.9.3/dist/leaflet.css"/> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"/> <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"/> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.0/css/all.min.css"/> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css"/> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/python-visualization/folium/folium/templates/leaflet.awesome.rotate.min.css"/> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <style> #map_6b24f6aaa419d4bcbe1b6529c1438e99 { position: relative; width: 100.0%; height: 100.0%; left: 0.0%; top: 0.0%; } .leaflet-container { font-size: 1rem; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> </head> <body> <div class="folium-map" id="map_6b24f6aaa419d4bcbe1b6529c1438e99" ></div> </body> <script> var map_6b24f6aaa419d4bcbe1b6529c1438e99 = L.map( "map_6b24f6aaa419d4bcbe1b6529c1438e99", { center: [0.0, 0.0], crs: L.CRS.EPSG3857, zoom: 2, zoomControl: true, preferCanvas: false, } ); var tile_layer_f0ed02cdc220fbfcbf8a863b434c1788 = L.tileLayer( "https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png", {"attribution": "\u0026copy; \u003ca target=\"_blank\" href=\"http://www.openstreetmap.org/copyright\"\u003eOpenStreetMap\u003c/a\u003e contributors \u0026copy; \u003ca target=\"_blank\" href=\"http://cartodb.com/attributions\"\u003eCartoDB\u003c/a\u003e, CartoDB \u003ca target=\"_blank\" href =\"http://cartodb.com/attributions\"\u003eattributions\u003c/a\u003e", "detectRetina": false, "maxNativeZoom": 18, "maxZoom": 18, "minZoom": 0, "noWrap": false, "opacity": 1, "subdomains": "abc", "tms": false} ).addTo(map_6b24f6aaa419d4bcbe1b6529c1438e99); var choropleth_f3311083e653516108b05d51087ace34 = L.featureGroup( {} ).addTo(map_6b24f6aaa419d4bcbe1b6529c1438e99); function geo_json_9ab7c1cc251bea0e1a15c7e0a8db3516_styler(feature) { switch(feature.id) { case "0": case "6": case "9": case "29": case "31": case "32": case "37": case "55": case "56": case "62": case "63": case "64": case "65": case "70": case "77": case "79": case "82": case "114": case "127": case "129": case "130": case "137": case "139": case "141": case "173": case "198": case "200": case "206": return {"color": "black", "fillColor": "#fc8d59", "fillOpacity": 0.7, "opacity": 0.2, "weight": 1}; case "5": case "13": case "26": case "28": case "39": case "57": case "58": case "60": case "61": case "75": case "76": case "90": case "106": case "149": return {"color": "black", "fillColor": "#e34a33", "fillOpacity": 0.7, "opacity": 0.2, "weight": 1}; case "12": case "67": case "80": case "148": case "171": return {"color": "black", "fillColor": "#b30000", "fillOpacity": 0.7, "opacity": 0.2, "weight": 1}; case "14": case "15": case "20": case "44": case "46": case "71": case "83": case "84": case "85": case "115": case "118": case "121": case "135": case "143": case "144": case "150": case "152": case "153": case "161": case "162": case "172": case "180": case "197": case "205": case "210": case "211": case "212": case "221": case "222": case "223": case "224": case "228": case "231": case "235": case "238": case "242": return {"color": "black", "fillColor": "#fdbb84", "fillOpacity": 0.7, "opacity": 0.2, "weight": 1}; case "36": case "81": case "112": case "116": case "117": case "126": case "134": case "142": case "145": case "166": case "167": case "199": case "202": case "207": case "208": case "209": case "214": case "215": case "216": case "217": case "218": case "219": case "220": case "226": case "229": case "236": return {"color": "black", "fillColor": "#fdd49e", "fillOpacity": 0.7, "opacity": 0.2, "weight": 1}; case "125": case "132": case "133": case "138": case "140": case "157": case "164": case "203": case "225": case "230": case "241": return {"color": "black", "fillColor": "#fef0d9", "fillOpacity": 0.7, "opacity": 0.2, "weight": 1}; default: return {"color": "black", "fillColor": "black", "fillOpacity": 0.7, "opacity": 0.2, "weight": 1}; } } function geo_json_9ab7c1cc251bea0e1a15c7e0a8db3516_onEachFeature(feature, layer) { layer.on({ }); }; var geo_json_9ab7c1cc251bea0e1a15c7e0a8db3516 = L.geoJson(null, { onEachFeature: geo_json_9ab7c1cc251bea0e1a15c7e0a8db3516_onEachFeature, style: geo_json_9ab7c1cc251bea0e1a15c7e0a8db3516_styler, }); function geo_json_9ab7c1cc251bea0e1a15c7e0a8db3516_add (data) { geo_json_9ab7c1cc251bea0e1a15c7e0a8db3516 .addData(data) .addTo(choropleth_f3311083e653516108b05d51087ace34); } geo_json_9ab7c1cc251bea0e1a15c7e0a8db3516_add({"bbox": [-180.0, -55.9185042229999, 180.0, 83.63410065300008], "features": [{"bbox": [32.98979984500011, 3.403333435000093, 47.97916914900014, 14.879532166000047], "geometry": {"coordinates": [[[34.070697863000134, 9.454592111000068], [34.06689172400007, 9.531176453000072], [34.09820764200009, 9.679720358000026], [34.22192102100007, 10.026029968000032], [34.28083215300012, 10.080109355000019], [34.30346643000013, 10.113544006000097], [34.30501672400004, 10.124602763000013], [34.30160607900012, 10.14899403900003], [34.301812785000095, 10.160285340000101], [34.30460331200004, 10.165633850000049], [34.31421512800006, 10.175452372000024], [34.31741906800005, 10.181265971000101], [34.32589400200004, 10.223563131000091], [34.32486047400005, 10.26865081800014], [34.276181275000056, 10.488714905000037], [34.27173710100004, 10.530081889000073], [34.279488566000055, 10.565506083000102], [34.36558150200011, 10.685782980000084], [34.40423547400013, 10.759835307000102], [34.420048462000125, 10.780815938000103], [34.43730839000011, 10.795672913000132], [34.55781783000015, 10.877786763000046], [34.57476770000005, 10.88414296500008], [34.587066691000075, 10.879285380000056], [34.708092896000096, 10.774072164000074], [34.73744510900008, 10.755391134000092], [34.75067427600004, 10.74394480400008], [34.75697880000007, 10.728803609000067], [34.752948039000046, 10.6987279250001], [34.75439497900004, 10.684129334000119], [34.764833618000125, 10.680253601000075], [34.772895142000095, 10.688263448000058], [34.78622766100011, 10.718985087000092], [34.79852665200008, 10.729656271000096], [34.815373169000054, 10.731309916000058], [34.827568807000034, 10.727770080000084], [34.83852421100005, 10.729139506000067], [34.851339966000126, 10.745753479000072], [34.85733443200013, 10.763556010000102], [34.85743778500006, 10.775674134000013], [34.86157189900007, 10.78758555100005], [34.87976200300005, 10.80461293600007], [34.93381555200011, 10.84530812600012], [34.95066206900009, 10.869182638000012], [34.95831018000007,