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
}
}
}
}
]
}