← Volver a la galería
← 9/30 →
✳️

Diagrama de dispersión etiquetado

Diagrama de dispersión etiquetado de películas que compara la calificación de Rotten Tomatoes frente a la de IMDb. Autor: Cristóbal Salcedo Beltrán. Inspirado en el ejemplo de regresión LOESS de Vega (https://vega.github.io/vega/examples/loess-regression/).

Vega scatter intermedio ✓ Cross-filter ✓ Tooltip ✓ Context menu ✓ Selección

Vista previa en vivo

Render con datos de muestra · Vega/Vega-Lite

🖱️ Cross-filter en vivo — haz clic en una marca y las demás se filtran/atenúan aquí mismo (runtime de Deneb reutilizado, MIT). Igual que en Power BI.

Cargando vista previa…

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

🔽 Descargar .pbix 🔽 Descargar spec .json

🧩 Campos que espera

  1. __0__ Categoría de Datos texto
  2. __1__ Categoría de Color texto
  3. __2__ Valor para Eje Y número medida
  4. __3__ Valor para Eje X número medida

Arrastra tus campos a Values en este orden.

🎯 Técnica

Motor
Vega 5.26.1
Marks
line, symbol, text
Transforms
filtro, regresió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 de Datos , Categoría de Color , Valor para Eje Y , Valor para Eje X .
  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 completo
spec.vega.json 
{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "usermeta": {
    "deneb": {
      "build": "1.6.2.1",
      "metaVersion": 1,
      "provider": "vega",
      "providerVersion": "5.26.1"
    },
    "interactivity": {
      "tooltip": true,
      "contextMenu": true,
      "selection": true,
      "highlight": true,
      "dataPointLimit": 50
    },
    "information": {
      "name": "Diagrama de dispersión etiquetado",
      "description": "Diagrama de dispersión etiquetado",
      "author": "Cristobal Salcedo Beltran",
      "uuid": "7d85ecb7-3084-43d3-95ce-36def5c165f3",
      "generated": "2024-04-11T03:08:54.210Z"
    },
    "dataset": [
      {
        "key": "__0__",
        "name": "Categoría de Datos",
        "description": "Esta categoría agrupa los datos según un criterio específico, facilitando su comparación visual en el diagrama de dispersión.",
        "type": "text",
        "kind": "column"
      },
      {
        "key": "__1__",
        "name": "Categoría de Color",
        "description": "Define el color de los puntos en el gráfico, permitiendo distinguir visualmente diferentes grupos o categorías dentro de los datos.",
        "type": "text",
        "kind": "column"
      },
      {
        "key": "__2__",
        "name": "Valor para Eje Y",
        "description": "Representa la variable dependiente en el gráfico. Cada punto en el eje Y corresponde a un valor de esta medida, permitiendo análisis de tendencias o comparaciones.",
        "type": "numeric",
        "kind": "measure"
      },
      {
        "key": "__3__",
        "name": "Valor para Eje X",
        "description": "Representa la variable independiente. Los puntos en el eje X se utilizan para observar cómo cambia la variable representada en el eje Y en relación a los cambios en esta medida.",
        "type": "numeric",
        "kind": "measure"
      }
    ]
  },
  "config": {},
  "description": "A labeled scatter plot or films showing rotten Tomatoes rarigs versus IMDB ratings, Author : Cristobal Salcedo Beltran, Email address: contacto@csalcedodatabi.com, Fuente de inspirirado: https://vega.github.io/vega/examples/loess-regression/",
  "padding": 5,
  "width": 800,
  "height": 400,
  "autosize": "pad",
  "data": [
    {
      "name": "dataset",
      "transform": [
        {
          "type": "filter",
          "expr": "datum['__3__'] != null && datum['__2__'] != null "
        }
      ]
    },
    {
      "name": "fit",
      "source": "dataset",
      "transform": [
        {
          "type": "regression",
          "method": "quad",
          "x": "__3__",
          "y": "__2__",
          "as": [
            "u",
            "v"
          ]
        }
      ]
    }
  ],
  "scales": [
    {
      "name": "x",
      "type": "linear",
      "domain": {
        "data": "dataset",
        "field": "__3__"
      },
      "range": "width"
    },
    {
      "name": "y",
      "type": "linear",
      "domain": {
        "data": "dataset",
        "field": "__2__"
      },
      "range": "height"
    },
    {
      "name": "color",
      "type": "ordinal",
      "domain": {
        "data": "dataset",
        "field": "__1__",
        "sort": {
          "order": "descending"
        }
      },
      "range": "category"
    }
  ],
  "axes": [
    {
      "orient": "left",
      "scale": "y",
      "title": "Medida para el eje Y"
    },
    {
      "orient": "bottom",
      "scale": "x",
      "title": "Medida para el eje X"
    }
  ],
  "marks": [
    {
      "name": "points",
      "type": "symbol",
      "from": {
        "data": "dataset"
      },
      "encode": {
        "enter": {
          "fill": {
            "scale": "color",
            "field": "__1__"
          },
          "x": {
            "scale": "x",
            "field": "__3__"
          },
          "y": {
            "scale": "y",
            "field": "__2__"
          },
          "size": {
            "value": 200
          },
          "opacity": [
            {
              "test": "datum.__selected__ == 'on'",
              "value": 1
            },
            {
              "test": "datum.__selected__ == 'off' || datum['__2____highlight']==null",
              "value": 0.1
            },
            {
              "test": "datum.__selected__ == 'neutral'",
              "value": 1
            }
          ]
        }
      }
    },
    {
      "name": "trend",
      "type": "line",
      "from": {
        "data": "fit"
      },
      "encode": {
        "enter": {
          "x": {
            "scale": "x",
            "field": "u"
          },
          "y": {
            "scale": "y",
            "field": "v"
          },
          "stroke": {
            "value": "firebrick"
          }
        }
      }
    },
    {
      "type": "text",
      "from": {
        "data": "points"
      },
      "encode": {
        "enter": {
          "text": {
            "field": "datum['__0__']"
          },
          "fontSize": {
            "value": 12
          }
        }
      },
      "transform": [
        {
          "type": "label",
          "avoidMarks": [
            "points"
          ],
          "anchor": [
            "top",
            "bottom",
            "right",
            "left"
          ],
          "offset": [
            1
          ],
          "size": {
            "signal": "[width + 60, height + 1 ]"
          }
        }
      ]
    }
  ]
}
¡Contáctame!