{ "$schema": "https://vega.github.io/schema/vega/v5.json", "background": "white", "padding": 5, "width": 800, "height": 450, "style": "cell", "data": [ { "name": "source_0", "values": [ {"label": "Begin", "amount": 4000}, {"label": "Jan", "amount": 1707}, {"label": "Feb", "amount": -1425}, {"label": "Mar", "amount": -1030}, {"label": "Apr", "amount": 1812}, {"label": "May", "amount": -1067}, {"label": "Jun", "amount": -1481}, {"label": "Jul", "amount": 1228}, {"label": "Aug", "amount": 1176}, {"label": "Sep", "amount": 1146}, {"label": "Oct", "amount": 1205}, {"label": "Nov", "amount": -1388}, {"label": "Dec", "amount": 1492}, {"label": "End", "amount": 0} ] }, { "name": "data_0", "source": "source_0", "transform": [ { "type": "window", "params": [null], "as": ["sum"], "ops": ["sum"], "fields": ["amount"], "sort": {"field": [], "order": []} }, { "type": "window", "params": [null], "as": ["lead"], "ops": ["lead"], "fields": ["label"], "sort": {"field": [], "order": []} }, { "type": "formula", "expr": "datum.lead === null ? datum.label : datum.lead", "as": "lead" }, { "type": "formula", "expr": "datum.label === 'End' ? 0 : datum.sum - datum.amount", "as": "previous_sum" }, { "type": "formula", "expr": "datum.label === 'End' ? datum.sum : datum.amount", "as": "amount" }, { "type": "formula", "expr": "(datum.label !== 'Begin' && datum.label !== 'End' && datum.amount > 0 ? '+' : '') + datum.amount", "as": "text_amount" }, { "type": "formula", "expr": "(datum.sum + datum.previous_sum) / 2", "as": "center" }, { "type": "formula", "expr": "datum.sum < datum.previous_sum ? datum.sum : ''", "as": "sum_dec" }, { "type": "formula", "expr": "datum.sum > datum.previous_sum ? datum.sum : ''", "as": "sum_inc" } ] }, { "name": "data_1", "source": "data_0", "transform": [ { "type": "filter", "expr": "isValid(datum[\"previous_sum\"]) && isFinite(+datum[\"previous_sum\"])" } ] }, { "name": "data_2", "source": "data_0", "transform": [ { "type": "filter", "expr": "isValid(datum[\"sum\"]) && isFinite(+datum[\"sum\"])" } ] }, { "name": "data_3", "source": "data_0", "transform": [ { "type": "filter", "expr": "isValid(datum[\"sum_inc\"]) && isFinite(+datum[\"sum_inc\"])" } ] }, { "name": "data_4", "source": "data_0", "transform": [ { "type": "filter", "expr": "isValid(datum[\"sum_dec\"]) && isFinite(+datum[\"sum_dec\"])" } ] }, { "name": "data_5", "source": "data_0", "transform": [ { "type": "filter", "expr": "isValid(datum[\"center\"]) && isFinite(+datum[\"center\"])" } ] } ], "marks": [ { "name": "layer_0_marks", "type": "rect", "style": ["bar"], "from": {"data": "data_1"}, "encode": { "update": { "fill": [ { "test": "datum.label === 'Begin' || datum.label === 'End'", "value": "#f7e0b6" }, {"test": "datum.sum < datum.previous_sum", "value": "#f78a64"}, {"value": "#93c4aa"} ], "ariaRoleDescription": {"value": "bar"}, "description": { "signal": "\"label: \" + (isValid(datum[\"label\"]) ? datum[\"label\"] : \"\"+datum[\"label\"]) + \"; Amount: \" + (format(datum[\"previous_sum\"], \"\")) + \"; sum: \" + (format(datum[\"sum\"], \"\"))" }, "xc": {"scale": "x", "field": "label", "band": 0.5}, "width": {"value": 45}, "y": {"scale": "y", "field": "previous_sum"}, "y2": {"scale": "y", "field": "sum"} } } }, { "name": "layer_1_marks", "type": "rule", "style": ["rule"], "from": {"data": "data_2"}, "encode": { "update": { "opacity": {"value": 1}, "strokeWidth": {"value": 2}, "stroke": {"value": "#404040"}, "description": { "signal": "\"label: \" + (isValid(datum[\"label\"]) ? datum[\"label\"] : \"\"+datum[\"label\"]) + \"; lead: \" + (isValid(datum[\"lead\"]) ? datum[\"lead\"] : \"\"+datum[\"lead\"]) + \"; sum: \" + (format(datum[\"sum\"], \"\"))" }, "x": {"scale": "x", "field": "label", "offset": -22.5, "band": 0.5}, "x2": {"scale": "x", "field": "lead", "offset": 22.5, "band": 0.5}, "y": {"scale": "y", "field": "sum"} } } }, { "name": "layer_2_marks", "type": "text", "style": ["text"], "from": {"data": "data_3"}, "encode": { "update": { "baseline": {"value": "bottom"}, "dy": {"value": -4}, "fill": {"value": "#404040"}, "description": { "signal": "\"label: \" + (isValid(datum[\"label\"]) ? datum[\"label\"] : \"\"+datum[\"label\"]) + \"; sum_inc: \" + (format(datum[\"sum_inc\"], \"\"))" }, "x": {"scale": "x", "field": "label", "band": 0.5}, "y": {"scale": "y", "field": "sum_inc"}, "text": { "signal": "isValid(datum[\"sum_inc\"]) ? datum[\"sum_inc\"] : \"\"+datum[\"sum_inc\"]" }, "align": {"value": "center"} } } }, { "name": "layer_3_marks", "type": "text", "style": ["text"], "from": {"data": "data_4"}, "encode": { "update": { "baseline": {"value": "top"}, "dy": {"value": 4}, "fill": {"value": "#404040"}, "description": { "signal": "\"label: \" + (isValid(datum[\"label\"]) ? datum[\"label\"] : \"\"+datum[\"label\"]) + \"; sum_dec: \" + (format(datum[\"sum_dec\"], \"\"))" }, "x": {"scale": "x", "field": "label", "band": 0.5}, "y": {"scale": "y", "field": "sum_dec"}, "text": { "signal": "isValid(datum[\"sum_dec\"]) ? datum[\"sum_dec\"] : \"\"+datum[\"sum_dec\"]" }, "align": {"value": "center"} } } }, { "name": "layer_4_marks", "type": "text", "style": ["text"], "from": {"data": "data_5"}, "encode": { "update": { "baseline": {"value": "middle"}, "fontWeight": {"value": "bold"}, "fill": [ { "test": "datum.label === 'Begin' || datum.label === 'End'", "value": "#725a30" }, {"value": "white"} ], "description": { "signal": "\"label: \" + (isValid(datum[\"label\"]) ? datum[\"label\"] : \"\"+datum[\"label\"]) + \"; center: \" + (format(datum[\"center\"], \"\")) + \"; text_amount: \" + (isValid(datum[\"text_amount\"]) ? datum[\"text_amount\"] : \"\"+datum[\"text_amount\"])" }, "x": {"scale": "x", "field": "label", "band": 0.5}, "y": {"scale": "y", "field": "center"}, "text": { "signal": "isValid(datum[\"text_amount\"]) ? datum[\"text_amount\"] : \"\"+datum[\"text_amount\"]" }, "align": {"value": "center"} } } } ], "scales": [ { "name": "x", "type": "band", "domain": { "fields": [ {"data": "data_1", "field": "label"}, {"data": "data_2", "field": "label"}, {"data": "data_2", "field": "lead"}, {"data": "data_3", "field": "label"}, {"data": "data_4", "field": "label"}, {"data": "data_5", "field": "label"} ] }, "range": [0, {"signal": "width"}], "paddingInner": 0.1, "paddingOuter": 0.05 }, { "name": "y", "type": "linear", "domain": { "fields": [ {"data": "data_1", "field": "previous_sum"}, {"data": "data_1", "field": "sum"}, {"data": "data_2", "field": "sum"}, {"data": "data_3", "field": "sum_inc"}, {"data": "data_4", "field": "sum_dec"}, {"data": "data_5", "field": "center"} ] }, "range": [{"signal": "height"}, 0], "nice": true, "zero": true } ], "axes": [ { "scale": "y", "orient": "left", "gridScale": "x", "grid": true, "tickCount": {"signal": "ceil(height/40)"}, "domain": false, "labels": false, "aria": false, "maxExtent": 0, "minExtent": 0, "ticks": false, "zindex": 0 }, { "scale": "x", "orient": "bottom", "grid": false, "title": "Months", "labelAngle": 0, "labelBaseline": "top", "zindex": 0 }, { "scale": "y", "orient": "left", "grid": false, "title": "Amount", "labelOverlap": true, "tickCount": {"signal": "ceil(height/40)"}, "zindex": 0 } ], "config": {"style": {"text": {"fontWeight": "bold"}}}}