← Volver a la galería
← 14/30 →
📊

Gráfico de barras agregado con filtrado cruzado (ordenado)

Gráfico de barras agregado con filtrado cruzado (ordenado). Muestra la distribución de la población de EE. UU. por grupos de edad en el año 2000. Ejemplo de Vega-Lite adaptado a Deneb en Power BI, con cross-filter, etiquetas mejoradas con la función pbiFormat y alineadas a derecha e izquierda para una mejor lectura, con las barras en blanco y negro.

Vega-Lite aggregate-bar intermedio ✓ Cross-filter ✓ Tooltip ✓ Context menu ✓ Selección

Vista previa en vivo

Render con datos de muestra · Vega/Vega-Lite

🎛️ Controles en vivo — cámbialos y el gráfico responde al instante.

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__ year texto
  2. __1__ age número
  3. __2__ people número
  4. __3__ sex número

Arrastra tus campos a Values en este orden.

🎯 Técnica

Motor
Vega-Lite 5.16.3
Marks
bar, text
Power BI
pbiColor, pbiFormat

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: year , age , people , sex .
  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": true,
      "selection": true,
      "highlight": false,
      "dataPointLimit": 50
    },
    "information": {
      "name": "Aggregate Bar Chart With Cross Filtering + Sorted",
      "description": "Example of Vega-Lite adapted to Deneb in Power BI, with cross-filtering + sorted, labels improved with the pbiFormat function, aligned to the right and left for better visualization, in the bars with white and black color. Author: Cristobal Salcedo Beltran, Email: contacto@csalcedodatabi.com",
      "author": "Cristobal Salcedo Beltran",
      "uuid": "f3e4ae59-7583-4602-be9f-1597f9dbdc9d",
      "generated": "2024-06-20T04:11:02.703Z"
    },
    "dataset": [
      {
        "key": "__0__",
        "name": "year",
        "description": "",
        "type": "text",
        "kind": "column"
      },
      {
        "key": "__1__",
        "name": "age",
        "description": "",
        "type": "numeric",
        "kind": "column"
      },
      {
        "key": "__2__",
        "name": "people",
        "description": "",
        "type": "numeric",
        "kind": "column"
      },
      {
        "key": "__3__",
        "name": "sex",
        "description": "",
        "type": "numeric",
        "kind": "column"
      }
    ]
  },
  "config": {
    "bar": {
      "color": {
        "expr": "pbiColor(0)"
      }
    },
    "axisY": {
      "labelFontSize": 18,
      "titleFontSize": 15,
      "grid": false,
      "tickCount": 6
    }
  },
  "description": "Aggregate Bar Chart With Cross Filtering + Sorted. A bar chart showing the US population distribution by age groups in the year 2000. Example of Vega-Lite adapted to Deneb in Power BI, with cross-filtering, labels improved with the pbiFormat function, aligned to the right and left for better visualization, in the bars with white and black color. Author: Cristobal Salcedo Beltran, Email: contacto@csalcedodatabi.com",
  "title": {
    "text": "US Population Distribution by Age in 2000",
    "anchor": "middle",
    "fontSize": 30
  },
  "data": {
    "name": "dataset"
  },
  "params": [
    {
      "name": "toggleAscending",
      "bind": {
        "input": "checkbox"
      }
    }
  ],
  "transform": [
    {
      "filter": "datum['__0__'] == '2000'"
    },
    {
      "calculate": "datum.__selected__=='off'? 0: datum['__2__']",
      "as": "Selected_People"
    },
    {
      "aggregate": [
        {
          "op": "sum",
          "field": "__2__",
          "as": "sumPeople"
        },
        {
          "op": "sum",
          "field": "Selected_People",
          "as": "Selected_People"
        }
      ],
      "groupby": [
        "__1__"
      ]
    },
    {
      "window": [
        {
          "op": "average",
          "field": "sumPeople",
          "as": "averagePeople"
        }
      ],
      "frame": [
        null,
        null
      ]
    },
    {
      "window": [
        {
          "op": "row_number",
          "field": "sumPeople",
          "as": "ascendingSumPeople"
        }
      ],
      "sort": [
        {
          "field": "sumPeople",
          "order": "ascending"
        }
      ],
      "frame": [
        null,
        null
      ]
    },
    {
      "window": [
        {
          "op": "row_number",
          "field": "sumPeople",
          "as": "descendingSumPeople"
        }
      ],
      "sort": [
        {
          "field": "sumPeople",
          "order": "descending"
        }
      ],
      "frame": [
        null,
        null
      ]
    },
    {
      "calculate": "toggleAscending? datum.ascendingSumPeople: datum.descendingSumPeople",
      "as": "Order"
    }
  ],
  "height": {
    "step": 30
  },
  "layer": [
    {
      "description": "Dimmed Bar; width = sum of people",
      "mark": {
        "type": "bar",
        "opacity": 0.3,
        "tooltip": true
      },
      "encoding": {
        "x": {
          "field": "sumPeople",
          "type": "quantitative",
          "title": "People",
          "axis": {
            "titleFontSize": 15,
            "labels": false,
            "domain": false,
            "ticks": false,
            "orient": "top"
          }
        }
      }
    },
    {
      "description": "Fully Opaque Bar; width = Selected_People",
      "mark": {
        "type": "bar"
      },
      "encoding": {
        "x": {
          "type": "quantitative",
          "field": "Selected_People"
        }
      }
    },
    {
      "name": "labels",
      "description": "Labels",
      "mark": {
        "type": "text",
        "align": {
          "expr": "datum.sumPeople>datum.averagePeople?'right':'left'"
        },
        "dx": {
          "expr": "datum.sumPeople>datum.averagePeople?-3:3"
        },
        "color": {
          "expr": "datum.sumPeople>datum.averagePeople?'white':'black'"
        },
        "fontSize": 18
      },
      "encoding": {
        "text": {
          "value": {
            "expr": "pbiFormat(datum.sumPeople, '#,0,,.0#M')"
          }
        },
        "x": {
          "field": "sumPeople",
          "type": "quantitative",
          "axis": {
            "labels": false,
            "domain": false,
            "ticks": false,
            "grid": false
          }
        }
      }
    }
  ],
  "encoding": {
    "y": {
      "field": "__1__",
      "title": "Age",
      "type": "ordinal",
      "sort": {
        "op": "max",
        "field": "Order",
        "order": "ascending"
      }
    }
  }
}
¡Contáctame!