← Volver a la galería
← 28/30 →
🖱️

Selección + Highlight (brush interval)

Arrastra un recuadro sobre el gráfico (selección interval de Vega-Lite) y los puntos seleccionados quedan resaltados mientras el resto se atenúa — EN VIVO en la web.

💡 Cuándo usarlo: Cuando quieres que el usuario resalte un subconjunto sin filtrar el modelo — enfocar visualmente por selección directa (brush o clic).

Vega-Lite selection-scatter intermedio ✓ Tooltip ✓ Selección

Vista previa en vivo

Render con datos de muestra · Vega/Vega-Lite

🖱️ Interactivo — haz clic o arrastra sobre las marcas y el gráfico responde aquí mismo.

Cargando vista previa…

Vista previa renderizada con el runtime de Deneb · MIT © Daniel Marsh-Patrick

🔽 Descargar spec .json

🧩 Campos que espera

  1. __0__ Categoría texto
  2. __1__ Eje X número medida
  3. __2__ Eje Y número medida

Arrastra tus campos a Values en este orden.

🎯 Técnica

Motor
Vega-Lite 5.16.3
Marks
circle, text

Fuente: Ejemplo original de la galería (patrón selección/highlight) · Autor: Cristobal Salcedo Beltrán

Cómo usarlo en Power BI

  1. Agrega el visual Deneb a tu reporte e ingresa a su editor.
  2. Arrastra tus campos a Values en este orden: Categoría , Eje X , Eje Y .
  3. Pega el spec (botón «Copiar spec» arriba) en el editor JSON de Deneb.
  4. Mapea tus columnas y ajusta a tu gusto. La interactividad nativa ya viene configurada.
Ver el spec Vega-Lite completo
spec.vega-lite.json 
{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "usermeta": {
    "deneb": {
      "build": "1.6.2.1",
      "metaVersion": 1,
      "provider": "vegaLite",
      "providerVersion": "5.16.3"
    },
    "interactivity": {
      "tooltip": true,
      "contextMenu": false,
      "selection": true,
      "highlight": true,
      "dataPointLimit": 100
    },
    "information": {
      "name": "Selección + Highlight (brush interval)",
      "description": "Una selección interval (brush) de Vega-Lite resalta los puntos arrastrados y atenúa el resto, en vivo. Es el patrón de selección/highlight declarado dentro del spec Deneb. Autor: Cristobal Salcedo Beltrán."
    },
    "dataset": [
      {
        "key": "__0__",
        "name": "Categoría",
        "description": "Categoría cualitativa (color del punto)",
        "type": "text",
        "kind": "column"
      },
      {
        "key": "__1__",
        "name": "Eje X",
        "description": "Medida cuantitativa del eje horizontal",
        "type": "numeric",
        "kind": "measure"
      },
      {
        "key": "__2__",
        "name": "Eje Y",
        "description": "Medida cuantitativa del eje vertical",
        "type": "numeric",
        "kind": "measure"
      }
    ]
  },
  "config": {
    "axis": {
      "labelColor": "#605E5C",
      "labelFontSize": 13,
      "titleFontSize": 15,
      "titleColor": "#252423"
    },
    "legend": {
      "labelFontSize": 12,
      "titleFontSize": 13,
      "orient": "top"
    },
    "view": {
      "stroke": "transparent"
    }
  },
  "title": {
    "text": "Arrastra un recuadro para resaltar puntos",
    "anchor": "start",
    "fontSize": 17,
    "color": "#252423"
  },
  "description": "Selección interval (brush) que resalta el subconjunto arrastrado y atenúa el resto.",
  "data": {
    "name": "dataset"
  },
  "params": [
    {
      "name": "brush",
      "select": {
        "type": "interval"
      }
    }
  ],
  "mark": {
    "type": "circle",
    "size": 130,
    "stroke": "white",
    "strokeWidth": 0.5
  },
  "encoding": {
    "x": {
      "field": "__1__",
      "type": "quantitative",
      "title": "Eje X",
      "scale": {
        "zero": false
      }
    },
    "y": {
      "field": "__2__",
      "type": "quantitative",
      "title": "Eje Y",
      "scale": {
        "zero": false
      }
    },
    "color": {
      "condition": {
        "param": "brush",
        "field": "__0__",
        "type": "nominal",
        "title": "Categoría"
      },
      "value": "#c9ced6"
    },
    "opacity": {
      "condition": {
        "param": "brush",
        "value": 0.85
      },
      "value": 0.25
    },
    "tooltip": [
      {
        "field": "__0__",
        "type": "nominal",
        "title": "Categoría"
      },
      {
        "field": "__1__",
        "type": "quantitative",
        "title": "Eje X"
      },
      {
        "field": "__2__",
        "type": "quantitative",
        "title": "Eje Y"
      }
    ]
  }
}
¡Contáctame!