Muy buenas, me llamo Miguel y esta vez les traigo este nuevo tutorial.
Es una UK Houseprice Plotly App de un proyecto reciente. Un desafÃo fue resaltar la parte del mapa de coropletas en la que se hizo clic. Dicha funcionalidad no está disponible en el momento de escribir este artÃculo, por lo que aquà hay una forma de evitarla.
La idea básica es agregar una segunda capa con solo los distritos seleccionados en el geojson
correspondiente y realizar un seguimiento de los distritos en los que se ha hecho clic o no en una variable de estado.
GeoJSON es un formato de intercambio de datos geoespaciales estándar abierto. Para nuestro archivo geojson
, queremos seleccionar el geojson[‘features’]
elemento que contiene los distritos seleccionados. Para acelerar el proceso de búsqueda, primero obtendremos un diccionario district_lookup
:
district_lookup = {feature['properties']['district']: feature for feature in geojson['features']}
Luego escribimos una función para obtener el archivo geojson
solo para los distritos seleccionados:
def get_highlights(selections, geojson=geojson, district_lookup=district_lookup): geojson_highlights = dict() for k in geojson.keys(): if k != 'features': geojson_highlights[k] = geojson[k] else: geojson_highlights[k] = [district_lookup[selection] for selection in selections] return geojson_highlights
Dada una lista de selecciones, ahora podemos usar la función get_highlights ()
en la segunda capa de la figura para el efecto de resaltado, donde aumentamos la opacidad para la selección de 0.5
a 1.0
.
También podrÃamos resaltar los distritos en los que se hizo clic de otras maneras: simplemente especifique el formato deseado para la segunda capa.
# Base choropleth layer --------------# fig = px.choropleth_mapbox(df, geojson=geojson, color="Bergeron", locations="district", featureidkey="properties.district", opacity=0.5) # Second layer - Highlights ----------# if len(selections) > 0: # highlights contain the geojson information for only # the selected districts highlights = get_highlights(selections) fig.add_trace( px.choropleth_mapbox(df, geojson=highlights, color="Bergeron", locations="district", featureidkey="properties.district", opacity=1).data[0] ) #------------------------------------# fig.update_layout(mapbox_style="carto-positron", mapbox_zoom=9, mapbox_center={"lat": 45.5517, "lon": -73.7073}, margin={"r":0,"t":0,"l":0,"b":0}, uirevision='constant') fig.show()
Ahora estamos listos para ejecutar la aplicación.
El componente dash_core_components.graph
tiene una propiedad "clickData"
: cuando hay un clic en el mapa, el evento activará la función de devolución de llamada y actualizará las "selecciones"
establecidas y la figura.
# Keep track of the clicked region by using the variable "Selections" selections = set() #-------------------------------# app = JupyterDash(__name__) app.layout = html.Div([ dcc.Graph( id='choropleth', figure=fig ) ]) #-------------------------------# @app.callback( Output('choropleth', 'figure'), [Input('choropleth', 'clickData')]) def update_figure(clickData): if clickData is not None: location = clickData['points'][0]['location'] if location not in selections: selections.add(location) else: selections.remove(location) return get_figure(selections) #-------------------------------# app.run_server(mode='inline')
Espero que este pequeño truco le resulte útil.
Añadir comentario