ReflexKR

El taller de componentes: los 100 componentes de Reflex

Resumen del curso

Diseño

Box

Flex

Stack

Grid

Container

Section

Center

Spacer

Separator

Card

Inset

Aspect Ratio

Fragment

Tipografía

Text

Heading

Link

Code

Markdown

Blockquote

Quote

Strong

Kbd

Formularios

Button

Input

Text Area

Checkbox

Switch

Radio Group

Select

Slider

Form

Upload

Visualización de datos

Badge

Avatar

Icon

Callout

List

Data List

Code Block

Progress

Spinner

Scroll Area

Moment

Mostrar y ocultar

Tabs

Accordion

Segmented Control

Superposiciones

Tooltip

Popover

Hover Card

Dialog

Alert Dialog

Drawer

Dropdown Menu

Context Menu

Toast

Renderizado dinámico

Cond

Match

Foreach

Auto Scroll

Multimedia

Image

Audio

Video

Tablas y cuadrículas de datos

Table

Data Table

Data Editor

Gráficos

Area Chart

Bar Chart

Line Chart

Composed Chart

Pie Chart

Radar Chart

Radial Bar Chart

Scatter Chart

Funnel Chart

Treemap

Sankey Chart

Error Bar

Piezas de gráficos

Axis

Cartesian Grid

Chart Tooltip

Legend

Label

Reference

Brush

Otras bibliotecas de gráficos

Plotly

Pyplot

Elementos HTML

HTML

HTML Text

HTML Layout

HTML Forms

HTML Media

HTML Tables

SVG

Otras herramientas

Theme

Skeleton

Clipboard

Html Embed

Script

Memo

El taller de componentes: los 100 componentes de Reflex

Gráficos

Scatter Chart

rx.recharts.scatter_chartrx.recharts.scatterrx.recharts.z_axis

Documentación oficial

Pedido del taller

Marca con puntos la altura y el peso de los jugadores de dos equipos, con la edad como tamaño del punto, para comparar la complexión de cada equipo.

rx.recharts.scatter_chart es un diagrama de dispersión: pone un punto donde se cruzan el valor x y el valor y. Se usa para ver la relación entre dos números (¿los más altos pesan más?) o para encontrar valores alejados del grupo. A diferencia de otros gráficos cartesianos, data se le da por separado a cada serie (rx.recharts.scatter), y el data_key de los ejes decide qué valores se usan como x e y.

El eje x es de categorías por defecto, así que para usarlo con números hay que darle siempre type_="number". Los ejemplos usan los dos conjuntos de datos de abajo.

scatterchart_a = [
    {"x": 100, "y": 200, "z": 200},
    {"x": 120, "y": 100, "z": 260},
    {"x": 170, "y": 300, "z": 400},
    {"x": 140, "y": 250, "z": 280},
    {"x": 150, "y": 400, "z": 500},
    {"x": 110, "y": 280, "z": 200},
]

scatterchart_b = [
    {"x": 200, "y": 260, "z": 240},
    {"x": 240, "y": 290, "z": 220},
    {"x": 190, "y": 290, "z": 250},
    {"x": 198, "y": 250, "z": 210},
    {"x": 180, "y": 280, "z": 260},
    {"x": 210, "y": 220, "z": 230},
]


rx.recharts.scatter_chart(
    rx.recharts.scatter(data=scatterchart_a, fill=rx.color("accent", 9)),
    rx.recharts.x_axis(data_key="x", type_="number"),
    rx.recharts.y_axis(data_key="y"),
    width="100%",
    height=280,
)

Prueba las propiedades

Cambia la forma de los puntos (shape), el icono de la leyenda (legend_type), la línea que une los puntos (line) y el tipo de esa línea (line_type). line_type="fitting" traza la recta de regresión que pasa entre los puntos.

Prueba las propiedades

color

shape

legend_type

line

line_type

rx.recharts.scatter_chart(
    rx.recharts.scatter(
        data=scatterchart_a,
        name="A",
        fill=rx.color("indigo", 9),
        shape="circle",
        legend_type="circle",
        line=False,
        line_type="joint",
    ),
    rx.recharts.x_axis(data_key="x", type_="number"),
    rx.recharts.y_axis(data_key="y"),
    rx.recharts.legend(),
    width="100%",
    height=280,
)

line_type solo se ve con line activado. joint une los puntos en orden y fitting traza una sola recta de tendencia.

Propiedad	Valores	Por defecto	Uso
`scatter_chart(width=, height=, margin=)`	número o porcentaje / dict	`"100%"` / 5 por lado	Tamaño y margen. Aquí no va `data`
`scatter(data=)`	lista de dicts	ninguno	Los puntos de esta serie
`scatter(name=)`	cadena	ninguno	Nombre que se ve en leyenda y tooltip
`scatter(fill=)`	color	accent 9	Color de los puntos
`scatter(shape=)`	`"circle"` `"square"` `"cross"` `"diamond"` `"star"` `"triangle"` `"wye"`	`"circle"`	Forma de los puntos
`scatter(legend_type=)`	las formas anteriores, `"line"` `"rect"` `"none"` …	`"circle"`	Icono de la leyenda
`scatter(line=, line_type=)`	`True` / `False`, `"joint"` `"fitting"`	`False` / `"joint"`	Línea que une los puntos
`scatter(x_axis_id=, y_axis_id=, z_axis_id=)`	cadena o número	`0`	A qué eje se asocia
`scatter(is_animation_active=, animation_duration=, …)`			Animación de entrada
`z_axis(data_key=, range=, name=, unit=)`	clave, `[mín, máx]` en píxeles	`[60, 400]`	Usa un tercer valor como tamaño del punto
Eventos	`on_click` `on_mouse_enter` `on_mouse_leave` …		Los reciben el gráfico y `scatter`

Varios grupos superpuestos

Pon un scatter por serie y dale a cada uno su data, su name y su color. En la leyenda se ve el name. Si añades z_axis, el tercer valor de los datos (z) aparece también en el tooltip y se usa para el tamaño del punto. Asociar series a varios ejes con x_axis_id e y_axis_id se trata en la página del gráfico de áreas.

scatterchart_a = [
    {"x": 100, "y": 200, "z": 200},
    {"x": 120, "y": 100, "z": 260},
    {"x": 170, "y": 300, "z": 400},
    {"x": 140, "y": 250, "z": 280},
    {"x": 150, "y": 400, "z": 500},
    {"x": 110, "y": 280, "z": 200},
]

scatterchart_b = [
    {"x": 200, "y": 260, "z": 240},
    {"x": 240, "y": 290, "z": 220},
    {"x": 190, "y": 290, "z": 250},
    {"x": 198, "y": 250, "z": 210},
    {"x": 180, "y": 280, "z": 260},
    {"x": 210, "y": 220, "z": 230},
]


rx.recharts.scatter_chart(
    rx.recharts.scatter(data=scatterchart_a, fill=rx.color("accent", 9), name="A"),
    rx.recharts.scatter(data=scatterchart_b, fill=rx.color("teal", 9), name="B"),
    rx.recharts.cartesian_grid(stroke_dasharray="3 3"),
    rx.recharts.x_axis(data_key="x", type_="number"),
    rx.recharts.y_axis(data_key="y"),
    rx.recharts.z_axis(data_key="z", range=[60, 400], name="score"),
    rx.recharts.legend(),
    rx.recharts.graphing_tooltip(),
    width="100%",
    height=300,
)

Distinguir grupos por la forma

Si separas los grupos solo por color, a quien le cuesta distinguir colores puede parecerle un único grupo. Si además das a cada serie un shape distinto, se distinguen incluso en blanco y negro. El icono de la leyenda sigue esa misma forma.

scatterchart_a = [
    {"x": 100, "y": 200, "z": 200},
    {"x": 120, "y": 100, "z": 260},
    {"x": 170, "y": 300, "z": 400},
    {"x": 140, "y": 250, "z": 280},
    {"x": 150, "y": 400, "z": 500},
    {"x": 110, "y": 280, "z": 200},
]

scatterchart_b = [
    {"x": 200, "y": 260, "z": 240},
    {"x": 240, "y": 290, "z": 220},
    {"x": 190, "y": 290, "z": 250},
    {"x": 198, "y": 250, "z": 210},
    {"x": 180, "y": 280, "z": 260},
    {"x": 210, "y": 220, "z": 230},
]


rx.recharts.scatter_chart(
    rx.recharts.scatter(data=scatterchart_a, fill=rx.color("accent", 9), name="A"),
    rx.recharts.scatter(data=scatterchart_b, fill=rx.color("teal", 9), name="B", shape="triangle"),
    rx.recharts.scatter(
        data=[
            {"x": 130, "y": 150},
            {"x": 160, "y": 180},
            {"x": 220, "y": 170},
            {"x": 250, "y": 200},
            {"x": 175, "y": 130},
        ],
        fill=rx.color("amber", 9),
        name="C",
        shape="star",
    ),
    rx.recharts.cartesian_grid(stroke_dasharray="3 3"),
    rx.recharts.x_axis(data_key="x", type_="number"),
    rx.recharts.y_axis(data_key="y"),
    rx.recharts.legend(),
    rx.recharts.graphing_tooltip(),
    width="100%",
    height=300,
)

Gráfico de burbujas (z_axis)

z_axis(data_key="z", range=[60, 400]) dibuja el punto con el z más pequeño con tamaño (área) 60 y el más grande con 400. Mostrar, además de x e y, un tercer valor como tamaño del punto es lo que se llama gráfico de burbujas. El name del eje es el nombre que se ve en el tooltip.

scatterchart_a = [
    {"x": 100, "y": 200, "z": 200},
    {"x": 120, "y": 100, "z": 260},
    {"x": 170, "y": 300, "z": 400},
    {"x": 140, "y": 250, "z": 280},
    {"x": 150, "y": 400, "z": 500},
    {"x": 110, "y": 280, "z": 200},
]

scatterchart_b = [
    {"x": 200, "y": 260, "z": 240},
    {"x": 240, "y": 290, "z": 220},
    {"x": 190, "y": 290, "z": 250},
    {"x": 198, "y": 250, "z": 210},
    {"x": 180, "y": 280, "z": 260},
    {"x": 210, "y": 220, "z": 230},
]


rx.recharts.scatter_chart(
    rx.recharts.scatter(data=scatterchart_a, fill=rx.color("accent", 8)),
    rx.recharts.x_axis(data_key="x", name="x", type_="number"),
    rx.recharts.y_axis(data_key="y", name="y", type_="number"),
    rx.recharts.z_axis(data_key="z", range=[60, 400], name="size"),
    rx.recharts.graphing_tooltip(),
    width="100%",
    height=300,
)

Datos que cambian con State

Dibujamos con puntos la sucesión de la conjetura de Collatz: si el número es par se divide entre 2, y si es impar se multiplica por 3 y se suma 1, hasta llegar a 1. Al escribir un número y enviarlo, el manejador calcula la nueva sucesión, la mete en data y el gráfico se redibuja. El valor inicial es 15.

Start: 15

def scatterchart_collatz(n: int) -> list[dict[str, int]]:
    rows = []
    for step in range(400):
        rows.append({"x": step, "y": n})
        if n == 1:
            break
        n = n // 2 if n % 2 == 0 else 3 * n + 1
    return rows


class ScatterChartCollatzState(rx.State):
    start: int = 15
    data: list[dict[str, int]] = scatterchart_collatz(15)

    @rx.event
    def compute(self, form_data: dict):
        try:
            n = int(form_data.get("start") or 1)
        except ValueError:
            n = 1
        self.start = min(max(n, 1), 1_000_000)
        self.data = scatterchart_collatz(self.start)


rx.vstack(
    rx.text("Start: ", ScatterChartCollatzState.start, size="2"),
    rx.recharts.scatter_chart(
        rx.recharts.scatter(data=ScatterChartCollatzState.data, fill=rx.color("accent", 9)),
        rx.recharts.x_axis(data_key="x", type_="number"),
        rx.recharts.y_axis(data_key="y", type_="number"),
        rx.recharts.graphing_tooltip(),
        width="100%",
        height=260,
    ),
    rx.form.root(
        rx.hstack(
            rx.input(placeholder="Enter a number", name="start", type="number"),
            rx.button("Compute", type="submit"),
        ),
        on_submit=ScatterChartCollatzState.compute,
        reset_on_submit=True,
    ),
    width="100%",
)

Completar el pedido

Usamos la altura como x, el peso como y y la edad como tamaño del punto en z_axis. Los dos equipos se diferencian a la vez por color y por forma, y los ejes llevan unit y name para que el tooltip se lea como «height: 170cm». El eje x muestra solo de 150 a 190 con domain, para que los puntos se repartan bien.

rx.recharts.scatter_chart(
    rx.recharts.cartesian_grid(stroke_dasharray="3 3"),
    rx.recharts.scatter(
        data=[
            {"height": 160, "weight": 52, "age": 21},
            {"height": 165, "weight": 58, "age": 34},
            {"height": 170, "weight": 63, "age": 28},
            {"height": 158, "weight": 49, "age": 45},
            {"height": 175, "weight": 70, "age": 39},
        ],
        name="Team A",
        fill=rx.color("accent", 9),
    ),
    rx.recharts.scatter(
        data=[
            {"height": 172, "weight": 66, "age": 25},
            {"height": 180, "weight": 78, "age": 31},
            {"height": 168, "weight": 61, "age": 52},
            {"height": 185, "weight": 82, "age": 27},
            {"height": 177, "weight": 74, "age": 44},
        ],
        name="Team B",
        fill=rx.color("teal", 9),
        shape="triangle",
    ),
    rx.recharts.x_axis(data_key="height", name="height", unit="cm", type_="number", domain=[150, 190]),
    rx.recharts.y_axis(data_key="weight", name="weight", unit="kg", type_="number"),
    rx.recharts.z_axis(data_key="age", name="age", range=[60, 300]),
    rx.recharts.graphing_tooltip(),
    rx.recharts.legend(),
    width="100%",
    height=320,
)

Notas del taller

data no se le da al gráfico sino a cada scatter. x e y se eligen con el data_key de los ejes.
Para un eje x numérico, no olvides x_axis(type_="number").
Un scatter por grupo. name es para la leyenda; shape, la forma del punto (junto al color se distingue mejor).
Con z_axis(data_key=, range=[mín, máx]) el tercer valor se ve como tamaño del punto: un gráfico de burbujas.
line=True y line_type="fitting" trazan una línea de tendencia.

← Anterior

Gráficos · Radial Bar Chart

Gráficos · Funnel Chart

Recibe avisos de nuevas lecciones

Te avisaremos por correo cuando este curso tenga lecciones nuevas o se abra un curso de continuación.

Preguntas y respuestas

Pregunta lo que quieras sobre esta lección. Aquí se reúnen las preguntas de todas las versiones de idioma de esta página.

ReflexKR

Aprende Python y Reflex haciendo. Todos los ejemplos se ejecutaron y verificaron en Reflex 0.10.0.

ReflexKR es gratis y sin banners publicitarios. Si te ayudó, puedes apoyarlo con un café. ☕ Invítanos un café

Aviso de afiliados

한국어 English 日本語简体中文 Español Deutsch

Built with Reflex