Forum Discussion
Deneb / Vega - Variable Width Cummulative Bar Chart
In my dataset, I have capacity and total cost for a list of assets. I need to plot all the assets from lowest cost to highest cost (y-axis) on a cummulative capacity basis (x-axis). To do this, I nee...
lbendlin
Super User
Super UserAnonymous very nice! Just in time for a capacity metrics report visual I am working on. Thank you!
Thank you for the kudos. Glad it could help you out! After refining a bit more, I found that I could come closer to the OP's code and simplify the process by finding the left edge by subtracting the width from the cumulative total. I have also added data labels and tooltips, but that is beyond what might be needed.
{
"data": {
"values": [
{"vWidth": 10, "vHeight": 1, "vType": "A"},
{"vWidth": 20, "vHeight": 2, "vType": "B"},
{"vWidth": 1, "vHeight": 3, "vType": "C"},
{"vWidth": 5, "vHeight": 4, "vType": "D"}
]
},
"transform": [
{
"calculate": "datum.vWidth*datum.vHeight", "as": "cArea"
},
{
"window": [{"op": "sum", "field": "vWidth", "as": "cum_total"}],
"sort": [{"field": "cArea", "order": "descending"}],
"frame": [null, 0]
},
{
"calculate": "datum.cum_total - datum.vWidth", "as": "leftedge"
}
],
"encoding": {
"y": {
"field": "vHeight",
"type": "quantitative"
},
"x": {
"field": "cum_total",
"type": "quantitative"
},
"x2": {
"field": "leftedge"
},
"color": {
"field": "vType"
}
},
"layer": [
{
"mark": {
"type": "rect",
"tooltip": true
}
},
{
"mark": {
"type": "text",
"align": "right",
"baseline": "bottom",
"dx": -5,
"dy": -5
},
"encoding": {
"text": {
"field": "cArea"
}
}
}
]
}
- lbendlin
Thank you for the simplification. Already implemented in my capacity monitoring report
{ "data": {"name": "dataset"}, "transform": [ { "calculate": "datum.ItemName + pbiFormat(datum['CU (s)'],' (#.00 -')+pbiFormat(datum['% Cap'],' #.0%)')", "as": "CUs" }, { "calculate": "now()+timezoneoffset(now())*60000", "as": "now_UTC" }, { "window": [{"op": "sum", "field": "CU (s)", "as": "cum_total"}], "sort": [{"field": "CU (s)", "order": "descending"}], "frame": [null, 0] }, { "calculate": "datum.cum_total - datum['CU (s)'] + 2", "as": "bottomedge" } ], "layer": [ { "mark": {"type": "bar"}, "encoding": { "x": { "field": "OperationStartTime", "type": "temporal" }, "x2": { "field": "OperationEndTime" }, "y": { "field": "cum_total", "type": "quantitative" }, "y2": { "field": "bottomedge" }, "color": {"field": "User"} } },{ "mark": {"type": "bar"}, "encoding": { "x": { "field": "Smoothing start", "type": "temporal" }, "x2": { "field": "Smoothing end" }, "y": { "field": "cum_total", "type": "quantitative" }, "y2": { "field": "bottomedge" }, "color": {"field": "User", "legend": null } } }, { "mark": { "type": "text", "align": "left", "dx": 3, "dy": 10 }, "encoding": { "text": { "field": "CUs", "type": "ordinal" }, "x": { "field": "Smoothing start", "type": "temporal" }, "y": { "field": "cum_total", "type": "quantitative" } } }, { "mark": { "type": "text", "align": "right", "dx": -3, "dy": 10 }, "encoding": { "text": { "field": "User", "type": "ordinal" }, "x": { "field": "Smoothing end", "type": "temporal" }, "y": { "field": "cum_total", "type": "quantitative" } } }, { "mark": { "type": "text", "align": "right", "dx": -3, "dy": 10 }, "encoding": { "text": { "field": "Duration", "type": "quantitative" }, "x": { "field": "OperationEndTime", "type": "temporal" }, "y": { "field": "cum_total", "type": "quantitative", "title":"Main consumers", "axis": {"labels": false} } } }, { "mark": "rule", "encoding": { "x": { "type": "temporal", "field": "now_UTC" }, "color": {"value": "pink"}, "size": {"value": 1} } } ] }
