La primera versión tendrá configurado el Cross-Filtering con una opacidad al 10%, muy ligera para hacer contraste con las barras que tienen un patron de relleno en diagonal. Las etiquetas de los porcentajes estarán de manera horizontal. El formato condicional se establece mediante una lógica que aplica tanto para el texto (superior al 100% se colocará en color rojo), y las barras coloreándose en color negro.
Versión 1: Plantilla JSON para importar en 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 #22 Gastos vs Presupuestos",
"description": "Gráfico de barras apiladas con patrón de relleno en diagonal y formato condicional (Cross-Filtering Activado)",
"author": "Sentido Analítica - José Rafael Escalante",
"uuid": "1e3397d1-330d-4205-b071-c9d2cc205865",
"generated": "2022-01-20T04:34:20.673Z"
},
"dataset": [
{
"key": "__0__",
"name": "Mes",
"description": "Columna Mes como valor nominal",
"type": "text",
"kind": "column"
},
{
"key": "__1__",
"name": "Presupuesto",
"description": "Cuantitativo",
"type": "numeric",
"kind": "measure"
},
{
"key": "__2__",
"name": "Gastado",
"description": "Cuantitativo",
"type": "numeric",
"kind": "measure"
},
{
"key": "__3__",
"name": "Variacion",
"description": "División para establecer el porcentaje de variación.",
"type": "numeric",
"kind": "measure"
}
]
},
"config": {
"autosize": {
"type": "fit",
"contains": "padding"
},
"axis": {
"domain": false,
"tickCount": 4,
"grid": false,
"title": null
},
"view": {"stroke": "transparent"}
},
"data": {"name": "dataset"},
"encoding": {
"x": {
"field": "__0__",
"sort": ["jan", "feb"],
"axis": {"labelAngle": 0}
}
},
"layer": [
{
"mark": {
"type": "bar",
"color": "white",
"stroke": "black"
},
"encoding": {
"y": {
"field": "__1__",
"type": "quantitative"
}
}
},
{
"mark": {
"type": "bar",
"width": {"band": 0.9},
"stroke": "black"
},
"encoding": {
"y": {
"field": "__2__",
"type": "quantitative"
},
"fill": {
"condition": {
"test": "datum['__2__'] > datum['__1__']",
"value": "#161616"
},
"value": "url(#diagonal-stripe-1-25)"
},
"opacity": {
"condition": {
"test": {
"field": "__selected__",
"equal": "off"
},
"value": 0.1
}
}
}
},
{
"mark": {
"type": "text",
"align": "center",
"dx": 1,
"yOffset": 125,
"size": 14,
"fontWeight": "bold"
},
"encoding": {
"text": {
"field": "__3__",
"type": "quantitative",
"format": ".0%"
},
"y": {
"field": "__1__",
"type": "quantitative"
},
"fill": {
"condition": {
"test": "datum['__2__'] > datum['__1__']",
"value": "#FF0000"
},
"value": "black"
}
}
}
]
}
La segunda versión no tendrá configurado el Cross-Filtering. El formato condicional se establece mediante una lógica que aplica tanto para el texto (superior al 100% se colocará en color rojo), y las barras coloreándose también en rojo, pero las barras tienen una opacidad del 50%. En esta versión las etiquetas de datos se encuentran en el tope de las barras.
Versión 2: Plantilla JSON para importar en 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 #22 Gastos vs Presupuesto",
"description": "Gráfico de barras apiladas con formato condicional y opacidad (Cross-Filtering Desactivado)",
"author": "Sentido Analítica - José Rafael Escalante",
"uuid": "cbdcd37f-6cb6-4f59-b772-9751d4757c6b",
"generated": "2022-01-20T04:58:42.569Z"
},
"dataset": [
{
"key": "__0__",
"name": "Mes",
"description": "Columna Mes como valor nominal",
"type": "text",
"kind": "column"
},
{
"key": "__1__",
"name": "Presupuesto",
"description": "Cuantitativo",
"type": "numeric",
"kind": "measure"
},
{
"key": "__2__",
"name": "Gastado",
"description": "Cuantitativo",
"type": "numeric",
"kind": "measure"
},
{
"key": "__3__",
"name": "Variacion",
"description": "División para establecer el porcentaje de variación.",
"type": "numeric",
"kind": "measure"
}
]
},
"config": {
"autosize": {
"type": "fit",
"contains": "padding"
},
"axis": {
"domain": false,
"tickCount": 4,
"grid": false,
"title": null
},
"view": {"stroke": "transparent"}
},
"data": {"name": "dataset"},
"encoding": {
"x": {
"field": "__0__",
"sort": ["jan", "feb"],
"axis": {"labelAngle": 0}
}
},
"layer": [
{
"mark": {
"type": "rect",
"color": "white",
"stroke": "black"
},
"encoding": {
"y": {
"field": "__1__",
"type": "quantitative"
}
}
},
{
"mark": {
"type": "bar",
"width": {"band": 0.9},
"opacity": 0.5,
"stroke": "black"
},
"encoding": {
"y": {
"field": "__2__",
"type": "quantitative"
},
"fill": {
"condition": {
"test": "datum['__2__'] > datum['__1__']",
"value": "red"
},
"value": "#D8D8D8"
}
}
},
{
"mark": {
"type": "text",
"align": "center",
"dx": 1,
"yOffset": -10,
"size": 14,
"fontWeight": "bold"
},
"encoding": {
"text": {
"field": "__3__",
"type": "quantitative",
"format": ".0%"
},
"y": {
"field": "__2__",
"type": "quantitative"
}
}
}
]
}