¿Cómo agregar un logotipo a una figura?

 

Al crear visualizaciones interactivas, a menudo querrás agregar un logotipo o una marca de agua. Con Altair y Streamlit, puedes superponer una imagen directamente en tu gráfica usando la función mark_image. Este tutorial te mostrará cómo hacerlo, paso a paso.

---

Paso 1: Código de Python

Guarda el siguiente script con el nombre app.py. Este código crea una aplicación de Streamlit con una gráfica de dispersión interactiva y una línea de tendencia. Luego, superpone un logotipo en la esquina inferior izquierda.

Python

import streamlit as st
import pandas as pd
import altair as alt

# 1. Preparar los datos
# En un caso real, cargarías un archivo con `pd.read_csv()`
data = pd.DataFrame({
    'A': [1, 2, 3, 4, 5],
    'B': [2, 3, 2, 5, 7],
    'C': [5, 4, 3, 2, 1],
    'D': [7, 8, 7, 9, 10]
})

# Título de la aplicación
st.title("Gráfica de Dispersión con Logotipo y Línea de Tendencia")

# 2. Configurar la interactividad
# Permite al usuario seleccionar las variables de los ejes X e Y
x_axis = st.selectbox("Selecciona la variable para el eje X", options=data.columns)
y_axis = st.selectbox("Selecciona la variable para el eje Y", options=data.columns)

# 3. Construir la gráfica base (Puntos y línea de tendencia)
# Gráfico de puntos interactivo
scatter_plot = alt.Chart(data).mark_circle(size=60).encode(
    x=x_axis,
    y=y_axis,
    tooltip=[x_axis, y_axis]
).interactive()

# Línea de tendencia
trend_line = scatter_plot.transform_regression(x_axis, y_axis).mark_line(color='red')

# Combinar ambos en una sola gráfica
combined_chart = scatter_plot + trend_line

# 4. Superponer el logotipo
# URL del logotipo. ¡Asegúrate de reemplazarla!
logo_url = "https://path_to_your_logo/logo.png"

# Gráfico para el logotipo. Nota: Usamos `alt.value` para fijar la posición.
logo_layer = alt.Chart(pd.DataFrame({'url': [logo_url]})).mark_image(
    width=50,
    height=50
).encode(
    x=alt.value(10),  # Posición fija desde el borde izquierdo (10 píxeles)
    y=alt.value(10),  # Posición fija desde el borde inferior (10 píxeles)
    url='url'
)

# 5. Combinar todo y mostrar el resultado
final_chart = combined_chart + logo_layer

# Mostrar la gráfica en Streamlit
st.altair_chart(final_chart, use_container_width=True)

Nota sobre la posición: Los valores x y y de alt.value() son coordenadas en píxeles. Un valor bajo (como 10) colocará el logotipo cerca del borde inferior y el izquierdo. Puedes ajustar estos números para moverlo a otras esquinas.

---

Paso 2: Ejecuta la aplicación de Streamlit

Para ver tu aplicación en acción, abre una terminal, navega al directorio donde guardaste app.py y ejecuta el siguiente comando:

Bash

streamlit run app.py

Una vez que se inicie, podrás ver la gráfica de dispersión con la línea de tendencia y tu logotipo en la esquina inferior izquierda.

Anatomía del código

La clave para superponer el logotipo es crear un gráfico de una sola capa (logo_layer) que solo contenga la imagen. Luego, simplemente lo combinas con tu gráfico principal (combined_chart) usando el operador +. De esta forma, Altair lo entiende como una capa adicional en tu visualización, manteniendo la interactividad de la gráfica original.