Capítulo 42 Redes interactivas plotly
Usar plotly express parece conveniente para la realización exploratoria rápida de visualizaciones estándar, pero si se desea personalización, es necesario aplicar plotly graphic objects. Se presenta a continuación una visualización muy personalizada.
Recordemos que las redes presentan las interconexiones entre un conjunto de entidades. Cada entidad está representada por un nodo (o vértice). Las conexiones entre nodos se representan mediante enlaces cuyo grosor puede representar la frecuencia. Puede aplicarse a grandes volúmenes de datos. Puede ser difícil de percibir y entender, pero en algunos casos, este enfoque proporcionará al analista suficiente información para cambiar la dirección de la investigación o para tomar una decisión final.
Como desventaja, los objetos de menor representatividad pueden ser ocultados por otros más grandes, y puede generarse un diagrama desordenado. Como ventaja, puede representar variedad de datos. No es fácil representar evolución en el tiempo ya que usualmente calcula cada vez la disposición de los nodos en la visualización.
Ya se aprendieron a realizar diagramas de redes estáticas mediante el paquete networkx. Es un conocimiento reutilizable, ya que se definen mediante este paquete y luego se traspasan dichas definiciones a plotly.
Para desarrollar el ejemplo se utilizará una base de datos de cultura popular. Se toman los datos del IMDb (Internet Movie Database) que almacena información relacionada con películas de cine. Se toma la lista de las 250 películas mejor rankeadas, y se analizan las relaciones entre directores y protagonistas.
Como ya se mencionó, en plotly bajo python, se puede definir la red con networkx y luego pasarlo a plotly.
Se prepara el resultado deseado:
Se representan como nodos directores y actores, de colores diferenciados.
La etiqueta del nodo director presenta la lista de películas que ha dirigido.
La etiqueta del nodo actor no presenta valor.
El hover sobre el nodo presenta el nombre del nodo y el número de conexiones.
El tamaño del nodo está relacionado con la métrica de centralidad.
Se suele denominar pos al vector de posiciones ya que las llaves (keys) son los nombres de los nodos y los valores (values) son las posiciones de los nodos en forma de coordenadas.
Se eligió el layout fruchterman reinhold, pero cada red debe elegir su mejor opción. Al final de este enlace se presenta la lista de layouts disponibles en networkx.
Se trata de un diagrama de dispersión desde el punto de vista de plotly.
El modo de los nodos puede ser ‘markers’ o ‘text’, o ‘markers+text’.
Si hay texto, se especifica. En este caso se utilizó la lista ‘director_movies’.
Si hay marcadores, se especifican sus características.
Luego se especifican los edges o enlaces.
Una de las características más potentes de la visualización interactiva es la posibilidad de que el usuario revele más información sobre un nodo o un enlace moviendo el cursor del ratón sobre el objeto y haciendo que se presente una etiqueta.
Hay tres modos disponibles en Plotly para presentar una etiqueta emergente.
La primera es hover (rondar) en el lenguaje del paquete. La configuración por defecto es layout.hovermode=‘closest’, en la que presenta una única etiqueta hover para el punto que se encuentra directamente debajo del cursor.
La segunda opción del hover es la denominada “x” que hace referencia al eje X. Podría ser “y”, haciendo referencia al eje Y. Entrega las coordenadas además del texto. Se pueden ocultar añadiendo dict(visible=False) en xaxis y yaxis. Lo usual en las visualizaciones de redes es que no figuren las coordenadas en el marco. Se pueden visibilizar con showticklabels=True en cada eje.
El tercer tipo de hover es el “x unified” (o “y unified”). Está diseñado para el caso en que existen múltiples puntos en la misma coordenada. Normalmente sólo presenta uno. Este hover fuerza la aparición de marcadores, para hacer más claro lo que se puede pasar por encima.
Finalmente las características del layout.
Renderización34:
La vista panorámica permite ver en el centro un conjunto de relaciones múltiples en las que el usuario puede realizar un zoom in para identificarlas de manera explícita.
Decidir la distribución de una red es complejo y tiene mucho de arte. La red presentada tiene el problema de mucho cruce de enlaces y lejanía de los actores y los directores, siendo que no son tan frecuentes los actores que se presentan en varias películas.
Se presenta a continuación una distribución alternativa. Se entrega en la posición cero (pos0) una distribución inicial. Se calcula el camino más corto entre cada par de nodos (inviable para redes mucho más grandes) y la betweenness_centrality y, si hay aglomeración, se airea. Luego se aplica la distribución según el algoritmo de Kamada-kawai, con las distancia establecidas y la ayuda del posicionamiento inicial.
En Plotly casi siempre compensa pasar de hoverinfo/hovertext a hovertemplate porque:
Se controla el formato punto-a-punto (líneas, saltos, orden, unidades) y puede ocultarse el “extra” con
. Se reutilizan campos (x, y, text, customdata, atributos del marker) sin construir strings manuales para cada nodo.
Se evitan sorpresas con hoverinfo. Con hovertemplate el contenido es exactamente lo definado.
¿Cuándo no conviene? Si se depende de HTML enriquecido (negritas, etc.). En los hoverlabels, Plotly solo respeta bien cambio de línea (la mayoría de etiquetas HTML se muestran como texto literal). Si el diseño depende de dichas etiquetas, es mejor mantener hovertext.
Si se escribe
Más adelante se presentará Dash. Integrar plotly con Dash permitirá escuchar un evento clickData y reconstruir el resaltado de, por ejemplo, el nodo seleccionado y sus vecinos. Un gráfico express (px) puro no se puede integrar con Dash. Un objeto gráfico (go) sí.
Las elecciones estéticas son de Natalia Alba, estudiante de sexto semestre de Ciencia de Datos↩︎