Deneb #23: Expenses vs Budget

La primera versión tiene cuatro (4) barras solapadas una detrás de la otra; pero movidas ligeramente hacia la izquierda o derecha. Además, tiene configurado un formato condicional para colorearse rojo si el gasto supera al presupuesto y, verde si es lo contrario.

Version 1: JSON template to import in Deneb

{
   "$schema":"https://vega.github.io/schema/vega-lite/v5.json",
   "usermeta":{
      "deneb":{
         "build":"1.0.0.157",
         "metaVersion":1,
         "provider":"vegaLite"
      },
      "interactivity":{
         "tooltip":true,
         "contextMenu":true,
         "selection":false,
         "dataPointLimit":50
      },
      "information":{
         "name":"Deneb #23 Expenses vs Budget v2",
         "description":"This is a bar chart with a style similar to IBCS (International Business Communication Standards) used by Zebra BI or Inforiver Custom Visuals. Suggestions: jrescalante@sentidoanalitica.com",
         "author":"Sentido Analítica - José Rafael Escalante",
         "uuid":"9a219381-4482-46d5-a09a-0927a4745f58",
         "generated":"2022-01-23T20:57:33.679Z"
      },
      "dataset":[
         {
            "key":"__0__",
            "name":"Month",
            "description":"String or Text",
            "type":"text",
            "kind":"column"
         },
         {
            "key":"__1__",
            "name":"Expenses",
            "description":"Integer",
            "type":"numeric",
            "kind":"measure"
         },
         {
            "key":"__2__",
            "name":"Budget",
            "description":"Integer",
            "type":"numeric",
            "kind":"measure"
         },
         {
            "key":"__3__",
            "name":"Variance",
            "description":"Percentage",
            "type":"numeric",
            "kind":"measure"
         }
      ]
   },
   "config":{
      "autosize":{
         "type":"fit",
         "contains":"padding"
      },
      "axis":{
         "domain":false,
         "ticks":false,
         "title":true,
         "grid":false,
         "labelAngle":0
      },
      "view":{
         "stroke":"transparent"
      }
   },
   "data":{
      "name":"dataset"
   },
   "encoding":{
      "x":{
         "field":"__0__",
         "sort":[
            "jan",
            "feb"
         ],
         "scale":{
            "padding":0.4
         }
      },
      "y":{
         "type":"quantitative",
         "axis":{
            "labels":false
         }
      }
   },
   "layer":[
      {
         "description":"Budget with conditional formatting",
         "mark":{
            "type":"bar",
            "xOffset":5
         },
         "encoding":{
            "y":{
               "field":"__2__"
            },
            "fill":{
               "condition":{
                  "test":"datum['__1__'] < datum['__2__']",
                  "value":"#45ff2f"
               },
               "value":"#transparent"
            }
         }
      },
      {
         "description":"__1__",
         "mark":{
            "type":"bar",
            "xOffset":5
         },
         "encoding":{
            "y":{
               "field":"__1__"
            },
            "fill":{
               "condition":{
                  "test":"datum['__1__'] < datum['__2__']",
                  "value":"#45ff2f"
               },
               "value":"#fd2600"
            }
         }
      },
      {
         "description":"__2__",
         "mark":{
            "type":"bar",
            "color":"#e2e2e2",
            "stroke":"#7f7f7f"
         },
         "encoding":{
            "y":{
               "field":"__2__"
            }
         }
      },
      {
         "description":" Text percentage",
         "mark":{
            "type":"text",
            "align":"center",
            "fill":"black",
            "dx":-1,
            "yOffset":-6,
            "size":10
         },
         "encoding":{
            "text":{
               "field":"__3__",
               "type":"quantitative",
               "format":"0.%",
               "formatType":"pbiFormat"
            },
            "y":{
               "field":"__1__"
            },
            "fill":{
               "condition":{
                  "test":"datum['__1__'] > datum['__2__']",
                  "value":"red"
               },
               "value":"black"
            }
         }
      },
      {
         "description":"__1__",
         "mark":{
            "type":"bar",
            "color":"#404040",
            "xOffset":10
         },
         "encoding":{
            "y":{
               "field":"__1__"
            }
         }
      },
      {
         "description":" Text integer",
         "mark":{
            "type":"text",
            "align":"center",
            "fill":"white",
            "dx":10,
            "yOffset":14,
            "size":10
         },
         "encoding":{
            "text":{
               "field":"__1__",
               "type":"quantitative",
               "format":"0,0",
               "formatType":"pbiFormat"
            },
            "y":{
               "field":"__1__"
            }
         }
      }
   ]
}

La segunda versión es igual a la primera; solo tiene configurado una opacidad al 10% y el cross-filtering activado.

Version 2 with Cross filtering + Opacity at 10%: JSON template to import in Deneb

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "usermeta": {
    "deneb": {
      "build": "1.0.0.157",
      "metaVersion": 1,
      "provider": "vegaLite"
    },
    "interactivity": {
      "tooltip": true,
      "contextMenu": true,
      "selection": true,
      "dataPointLimit": 50
    },
    "information": {
      "name": "Deneb #23 Expenses vs Budget v2",
      "description": "This is a bar chart with a style similar to IBCS (International Business Communication Standards) used by Zebra BI or Inforiver Custom Visuals, with Cross Filtering and Opacity. Suggestions: jrescalante@sentidoanalitica.com",
      "author": "Sentido Analítica - José Rafael Escalante",
      "uuid": "2e314914-ff02-47c7-be0f-cb3fdcca0f41",
      "generated": "2022-01-24T16:16:10.691Z"
    },
    "dataset": [
      {
        "key": "__0__",
        "name": "Month",
        "description": "",
        "type": "text",
        "kind": "column"
      },
      {
        "key": "__1__",
        "name": "Expenses",
        "description": "",
        "type": "numeric",
        "kind": "measure"
      },
      {
        "key": "__2__",
        "name": "Budget",
        "description": "",
        "type": "numeric",
        "kind": "measure"
      },
      {
        "key": "__3__",
        "name": "Variance",
        "description": "",
        "type": "numeric",
        "kind": "measure"
      }
    ]
  },
  "config": {
    "autosize": {
      "type": "fit",
      "contains": "padding"
    },
    "axis": {
      "domain": false,
      "ticks": false,
      "title": true,
      "grid": false,
      "labelAngle": 0
    },
    "view": {"stroke": "transparent"}
  },
  "data": {"name": "dataset"},
  "encoding": {
    "x": {
      "field": "__0__",
      "sort": ["jan", "feb"],
      "scale": {"padding": 0.4}
    },
    "y": {
      "type": "quantitative",
      "axis": {"labels": false}
    }
  },
  "layer": [
    {
      "description": "Budget with conditional formatting",
      "mark": {
        "type": "bar",
        "xOffset": 5
      },
      "encoding": {
        "y": {"field": "__2__"},
        "fill": {
          "condition": {
            "test": "datum['__1__'] < datum['__2__']",
            "value": "#45ff2f"
          },
          "value": "#transparent"
        },
        "opacity": {
          "condition": {
            "test": {
              "field": "__selected__",
              "equal": "off"
            },
            "value": 0.1
          }
        }
      }
    },
    {
      "description": "__1__",
      "mark": {
        "type": "bar",
        "xOffset": 5
      },
      "encoding": {
        "y": {"field": "__1__"},
        "fill": {
          "condition": {
            "test": "datum['__1__'] < datum['__2__']",
            "value": "transparent"
          },
          "value": "#fd2600"
        },
        "opacity": {
          "condition": {
            "test": {
              "field": "__selected__",
              "equal": "off"
            },
            "value": 0.1
          }
        }
      }
    },
    {
      "description": "__2__",
      "mark": {
        "type": "bar",
        "color": "#e2e2e2",
        "stroke": "#7f7f7f"
      },
      "encoding": {
        "y": {"field": "__2__"},
        "opacity": {
          "condition": {
            "test": {
              "field": "__selected__",
              "equal": "off"
            },
            "value": 0.1
          }
        }
      }
    },
    {
      "description": " Text percentage",
      "mark": {
        "type": "text",
        "align": "center",
        "fill": "black",
        "dx": -1,
        "yOffset": -6,
        "size": 10
      },
      "encoding": {
        "text": {
          "field": "__3__",
          "type": "quantitative",
          "format": "0.%",
          "formatType": "pbiFormat"
        },
        "y": {"field": "__1__"},
        "fill": {
          "condition": {
            "test": "datum['__1__'] > datum['__2__']",
            "value": "red"
          },
          "value": "black"
        },
        "opacity": {
          "condition": {
            "test": {
              "field": "__selected__",
              "equal": "off"
            },
            "value": 0.1
          }
        }
      }
    },
    {
      "description": "__1__",
      "mark": {
        "type": "bar",
        "color": "#404040",
        "xOffset": 10
      },
      "encoding": {
        "y": {"field": "__1__"},
        "opacity": {
          "condition": {
            "test": {
              "field": "__selected__",
              "equal": "off"
            },
            "value": 0.1
          }
        }
      }
    },
    {
      "description": " Text integer",
      "mark": {
        "type": "text",
        "align": "center",
        "fill": "white",
        "dx": 10,
        "yOffset": 14,
        "size": 10
      },
      "encoding": {
        "text": {
          "field": "__1__",
          "type": "quantitative",
          "format": "0,0",
          "formatType": "pbiFormat"
        },
        "y": {"field": "__1__"},
        "opacity": {
          "condition": {
            "test": {
              "field": "__selected__",
              "equal": "off"
            },
            "value": 0.1
          }
        }
      }
    }
  ]
}