Cuadro emergente con información relacionada después de hacer clic en un punto en Altair.

17 Jun, 2023 Programación 0

Soy un traductor de español que traduce documentos de TI. Traduzca lo siguiente al español. No traduzca el código ni la salida en markdown

Soy un poco novato y me gustaría su amable ayuda.

Imagínense que tengo un marco de datos con información que dibujo en un gráfico. Sé que al pasar el cursor sobre los puntos, puedo tener las etiquetas de información para mostrar datos específicos.

Me gustaría, sin embargo, aparte de eso, poder hacer clic en esos puntos y que aparezca una ventana emergente (o una etiqueta de información alternativa/alternativa) con más información sobre ese punto.

Por ejemplo, haga clic en un punto y aparezca una ventana emergente para mostrar el “term_ID” del punto y aún mejor para que sea un enlace de búsqueda de href a Google con ese término “url”.

Muchas gracias.

Mis datos de juego son:

import altair as alt
import pandas as pd
from urllib.parse import urlencode</p>

<p>def make<em>google</em>query(name):
    return "https://www.google.com/search?" + urlencode({'q': '"{0}"'.format(name)})</p>

<p>data = [
    ["GO:0005874","microtubule", 0.590923058896654, -4.00372136407618, 3.93380303408685, 5.07433362293908, 0.743307611944267, 0],
    ["GO:0042555","complejo MCM",0.0516392267501353,5.29409032883786,-0.438484234906433,4.01582063426207,0.736867388621876,0],
    ["GO:0005886","membrana plasmática",15.5064680247866,-2.59930578712986,-4.79438349762051,6.49331205332051,0.980465972776413,4.124E-05],
    ["GO:0030173","componente integral de la membrana del Golgi",0.0482779463204013,-0.0820996416106789,6.61844221537962,3.98659260682221,0.720783016873817,0.16417986],
    ["GO:0031083","complejo BLOC-1",0.0157955281823943,6.03044083325888,2.61728943021364,3.50147007210041,0.638408624494431,0.22740185],
    ["GO:0030532","complejo ribonucleoproteico nuclear pequeño",0.138166054523554,2.1939043417736,2.03060434260059,4.44321603416583,0.571526896999077,0.2622474],
    ["GO:0008250","complejo de oligosacariltransferasa",0.0394539627330108,2.22238070210506,4.52148800747906,3.89894446686651,0.602647357590838,0.39260902]
]</p>

<p>columnas = ["term<em>ID","descripción","frecuencia","plot</em>X","plot<em>Y","tamaño</em>log","unicidad","reemplazabilidad"]</p>

<p>df = pd.DataFrame(data, columnas=columnas)
df['url'] = df['term<em>ID'].apply(make</em>google_query)</p>

<p>base = alt.Chart(df).mark<em>point(filled=True, fillOpacity=0.5).encode(
    y=alt.Y('plot</em>Y', title="Espacio semántico Y"),
    x=alt.X('plot<em>X', title="Espacio semántico X"),
    size=alt.Size('tamaño de lógica</em>', scale=alt.Scale(base=0, domain=[3.5,6], range=[1000, 7000])),
    color=alt.Color('unicidad', scale=alt.Scale(scheme='viridis')),</p>

<pre><code>tooltip=[
         alt.Tooltip("descripción"), 
         alt.Tooltip("frecuencia"),
         alt.Tooltip("tamaño de lógica"), 
         alt.Tooltip("unicidad"),
         alt.Tooltip("reemplazabilidad")]
</code></pre>

<p>)</p>

<p>texto = alt.Chart(df).mark<em>text(
).encode(
    y=alt.Y('plot</em>Y', title="Espacio semántico Y"),
    x=alt.X('plot_X', title="Espacio semántico X"),
    color=alt.Color('unicidad', scale=alt.Scale(scheme='viridis')),
    text="descripción"
)</p>

<p>(base + texto ).properties(
    title="gráfico",
    height=600,
    width=800
).interactive()

davy.ai

June 17, 2023 at 10:28 pm

Hola,

Para lograr la funcionalidad que describiste, puedes usar las interacciones onmouseover y onclick de Altair. Aquí está un fragmento de código actualizado que debería hacer lo que deseas:

import altair as alt
import pandas as pd
from urllib.parse import urlencode

def make_google_query(name):
    return "https://www.google.com/search?" + urlencode({'q': '"{0}"'.format(name)})

data = [
    ["GO:0005874","microtubule", 0.590923058896654, -4.00372136407618, 3.93380303408685, 5.07433362293908, 0.743307611944267, 0],
    ["GO:0042555","MCM complex",0.0516392267501353,5.29409032883786,-0.438484234906433,4.01582063426207,0.736867388621876,0],
    ["GO:0005886","plasma membrane",15.5064680247866,-2.59930578712986,-4.79438349762051,6.49331205332051,0.980465972776413,4.124E-05],
    ["GO:0030173","integral component of Golgi membrane",0.0482779463204013,-0.0820996416106789,6.61844221537962,3.98659260682221,0.720783016873817,0.16417986],
    ["GO:0031083","BLOC-1 complex",0.0157955281823943,6.03044083325888,2.61728943021364,3.50147007210041,0.638408624494431,0.22740185],
    ["GO:0030532","small nuclear ribonucleoprotein complex",0.138166054523554,2.1939043417736,2.03060434260059,4.44321603416583,0.571526896999077,0.2622474],
    ["GO:0008250","oligosaccharyltransferase complex",0.0394539627330108,2.22238070210506,4.52148800747906,3.89894446686651,0.602647357590838,0.39260902]
]

columns = ["term_ID","description","frequency","plot_X","plot_Y","log_size","uniqueness","dispensability"]

df = pd.DataFrame(data, columns=columns)
df['url'] = df['term_ID'].apply(make_google_query)

# Define the base chart
base = alt.Chart(df).mark_point(filled=True, fillOpacity=0.5).encode(
    y=alt.Y('plot_Y', title="Espacio Semántico Y"),
    x=alt.X('plot_X', title="Espacio Semántico X"),
    size=alt.Size('log_size', scale=alt.Scale(base=0, domain=[3.5,6], range=[1000, 7000])),
    color=alt.Color('uniqueness', scale=alt.Scale(scheme='viridis')),
    # Vincula las columnas `term_ID` y `url` al tooltip
    tooltip=[alt.Tooltip("description"), alt.Tooltip("frequency"), alt.Tooltip("log_size"),
             alt.Tooltip("uniqueness"), alt.Tooltip("dispensability"), alt.Tooltip("term_ID"), alt.Tooltip("url", title="Búsqueda en Google")]
)

# Agrega una capa de texto para la columna `description`
text = alt.Chart(df).mark_text().encode(
    y=alt.Y('plot_Y', title="Espacio Semántico Y"),
    x=alt.X('plot_X', title="Espacio Semántico X"),
    color=alt.Color('uniqueness', scale=alt.Scale(scheme='viridis')),
    text="description"
)

# Define la interacción para mostrar la ventana de aviso emergente
popup = alt.selection_single(empty='none', fields=['term_ID'])
popup_chart = alt.Chart(df).mark_text(fontSize=16).encode(
    y=alt.Y('plot_Y', title="Espacio Semántico Y", axis=None),
    x=alt.X('plot_X', title="Espacio Semántico X", axis=None),
    text=alt.Text('term_ID', format=".2f"),
    color=alt.condition(popup, alt.ColorValue("black"), alt.ColorValue("white")),
    background=alt.condition(popup, alt.ColorValue("white"), alt.ColorValue("transparent")),
).transform_calculate(
    url=make_google_query(alt.datum.term_ID)
).properties(
    width=300,
    height=200
).configure_padding(
    left=10,
    right=10,
    top=10,
    bottom=10
).configure_border(
    color='black',
    strokeWidth=1
).add_selection(
    popup
).transform_filter(
    popup
)

# Combina el gráfico base y la capa de texto, y agrega la ventana emergente
chart = (base + text + popup_chart).properties(
    title="plot",
    height=600,
    width=800
).interactive()

chart

En este código, agregué las columnas term_ID y url al tooltip en el gráfico base. También definí un nuevo gráfico, popup_chart, que muestra el term_ID del punto seleccionado y tiene un hipervínculo incrustado a una búsqueda en Google. Finalmente, definí una selección, popup, que activa el popup_chart cuando se hace clic en un punto.

¡Espero que esto te ayude! Házmelo saber si tienes alguna pregunta o problema adicional.

es.davy.ai

¿Tienes una pregunta?

Cuadro emergente con información relacionada después de hacer clic en un punto en Altair.

Answer

davy.ai