Everything runs okay until here! I have to finish it today!!!
PLEASE HELP!
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/[email protected]/dist/leaflet.js"></script> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/leaflet.css"/> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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-
PLEASE HELP!
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/[email protected]/dist/leaflet.js"></script> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/leaflet.css"/> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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-