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

Gráfico de Pareto Dinámico

Gráfico de Pareto Dinámico, Autor: Cristóbal Salcedo. Contacto: contacto@csalcedodatabi.com. Artículos relacionados: https://csalcedodatabi.github.io/posts/diagrama-pareto-parte-1/

Vega-Lite pareto 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__ Product texto
  2. __1__ Total Ventas número medida
  3. __2__ Acumulado de ventas Por Producto número medida
  4. __3__ % Acumulado de Ventas por Producto número medida

Arrastra tus campos a Values en este orden.

🎯 Técnica

Motor
Vega-Lite 5.16.3
Marks
bar, line, text
Power BI
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: Product , Total Ventas , Acumulado de ventas Por Producto , % Acumulado de Ventas por Producto .
  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": true,
      "dataPointLimit": 50
    },
    "information": {
      "name": "Gráfico de Pareto Dinámico",
      "description": "Esta plantilla permite la creación de un gráfico de Pareto dinámico, el cual puede ser personalizado según las necesidades del usuario. Los campos de datos y medidas son ejemplos y pueden ser reemplazados para adaptarse a diferentes categorías y métricas.",
      "author": "Cristobal Salcedo Beltran, Contacto: contacto@csalcedodatabi.com.",
      "uuid": "267e3e24-a51c-4d9c-9474-4fb34725506b",
      "generated": "2024-05-27T21:20:00.612Z"
    },
    "dataset": [
      {
        "key": "__0__",
        "name": "Product",
        "description": "Este campo categórico puede ser reemplazado por cualquier otro, según las necesidades del usuario",
        "type": "text",
        "kind": "column"
      },
      {
        "key": "__1__",
        "name": "Total Ventas",
        "description": "Esta medida representa el total de ventas acumuladas. Puede ser remplazada por cualquier otra medida, según las necesidades del usuario",
        "type": "numeric",
        "kind": "measure"
      },
      {
        "key": "__2__",
        "name": "Acumulado de ventas Por Producto",
        "description": "Muestra el total acumulado de ventas para cada producto. Descripción opcional para el usuario final. Puede ser remplazada por cualquier otra medida, según las necesidades del usuario",
        "type": "numeric",
        "kind": "measure"
      },
      {
        "key": "__3__",
        "name": "% Acumulado de Ventas por Producto",
        "description": "Indica el porcentaje acumulado de ventas por producto. Descripción opcional para el usuario final. Puede ser remplazada por cualquier otra medida, según las necesidades del usuario",
        "type": "numeric",
        "kind": "measure"
      }
    ]
  },
  "config": {
    "view": {
      "stroke": "transparent"
    },
    "line": {
      "strokeWidth": 3,
      "strokeCap": "round",
      "strokeJoin": "round"
    },
    "text": {
      "font": "Segoe UI",
      "fontSize": 18,
      "fill": "#605E5C"
    },
    "axis": {
      "ticks": false,
      "grid": false,
      "domain": false,
      "labelColor": "#605E5C",
      "labelFontSize": 18
    },
    "axisX": {
      "labelPadding": 5,
      "labelAngle": 0
    },
    "axisY": {
      "labelPadding": 10,
      "labels": false
    }
  },
  "description": "Gráfico de Pareto Dinámico, Autor: Cristóbal Salcedo. Contacto: contacto@csalcedodatabi.com. Artículos relacionados: https://csalcedodatabi.github.io/posts/diagrama-pareto-parte-1/",
  "data": {
    "name": "dataset"
  },
  "title": {
    "text": "Ventas por producto (Principio de Pareto)",
    "subtitle": "'Muestra la contribución de los productos al total de ventas",
    "fontSize": 20,
    "color": "#333333"
  },
  "layer": [
    {
      "mark": {
        "type": "bar",
        "tooltip": true,
        "color": {
          "expr": "datum['__3__']<=0.8?'#7F7F7F': '#D62728'"
        }
      },
      "encoding": {
        "y": {
          "field": "__1__"
        },
        "opacity": {
          "condition": {
            "test": {
              "field": "__selected__",
              "equal": "off"
            },
            "value": 0.3
          },
          "value": 1
        }
      }
    },
    {
      "mark": {
        "type": "line",
        "interpolate": "linear",
        "color": "blue",
        "point": {
          "color": "#1F77B4",
          "filled": false,
          "fill": "white"
        }
      },
      "encoding": {
        "y": {
          "field": "__3__"
        }
      }
    },
    {
      "mark": {
        "type": "text",
        "color": "#333333",
        "yOffset": -16
      },
      "encoding": {
        "text": {
          "field": "__3__",
          "format": "0.0%",
          "formatType": "pbiFormat"
        },
        "y": {
          "field": "__3__"
        }
      }
    },
    {
      "mark": {
        "type": "text",
        "color": "#333333",
        "yOffset": -8
      },
      "encoding": {
        "text": {
          "field": "__1__",
          "format": "$#0,0",
          "formatType": "pbiFormat"
        },
        "y": {
          "field": "__1__"
        }
      }
    },
    {
      "mark": {
        "type": "bar"
      },
      "encoding": {
        "y": {
          "field": "__1__"
        },
        "color": {
          "field": "__3__",
          "type": "nominal",
          "scale": {
            "domain": [
              "0% - 80%",
              "80% - 100%"
            ],
            "range": [
              "#7F7F7F",
              "#D62728"
            ]
          },
          "legend": {
            "title": "Principio de Pareto",
            "orient": "top",
            "padding": 10,
            "labelFont": "Helvetica Neue, Arial",
            "labelFontSize": 14,
            "symbolType": "square",
            "symbolSize": 100
          }
        }
      }
    }
  ],
  "resolve": {
    "scale": {
      "y": "independent"
    }
  },
  "encoding": {
    "x": {
      "field": "__0__",
      "type": "nominal",
      "sort": {
        "field": "__1__",
        "op": "max",
        "order": "descending"
      }
    },
    "y": {
      "type": "quantitative",
      "axis": {
        "title": " "
      }
    }
  }
}
¡Contáctame!