Forum Discussion
Solved
Dened - Custom Matrix with double headers
Hi dm-p, I hope you can help me here to deliver a matrix view in Deneb to look like this: I aim to show the Category and Sub-category at the top of the matrix and colour the cells ba...
Hey H_insight. I believe I got everything implemented. Take a look and let me know.
Notes:
- When adjusting the size of the visual, you'll want to adjust the step width/height and the xOffset/yOffset for the rects sitting behind the row and column headers. You'll also want to adjust font size accordingly.
- Although there are alternatives, I added a calculated column to implement the logic for a custom sort order. The column is called "Sort Order". Here you should be able to implement any logic you'd like to determine the sorting of the products.
Spec:
{ "data": {"name": "dataset"}, "facet": { "column": { "field": "Category", "title": null, "header": {"labelFontSize": 14} } }, "spec": { "width": {"step": 70}, "height": {"step": 25}, "encoding": { "y": { "field": "Product", "title": null, "sort": {"field": "Sort Order"}, "axis": { "labelColor": "white", "labelFontWeight": 700 } }, "x": { "field": "Sub Cat", "axis": { "orient": "top", "labelAngle": 0, "labelColor": "white", "labelFontWeight": 700 }, "title": null } }, "layer": [ { "description": "x-axis background rects", "mark": {"type": "rect"}, "encoding": { "y": {"value": 0}, "yOffset": {"value": -25}, "color": { "condition": { "test": "datum['Sub Cat'] == 'Overall'", "value": "#C45920" }, "value": "#325964" } } }, { "description": "y-axis background rects", "mark": { "type": "rect", "opacity": 0.5 }, "encoding": { "x": {"value": 0}, "xOffset": {"value": -80}, "color": {"value": "black"} } }, { "description": "matrix value rects", "mark": {"type": "rect"}, "encoding": { "color": { "field": "Value", "type": "nominal", "scale": { "domain": [1, 2, 3, 4, 5], "range": [ "grey", "amber", "green", "red", "lightBlue" ] }, "legend": null } } }, { "mark": { "type": "text", "tooltip": true, "size": 14 }, "encoding": { "text": { "field": "Value", "type": "quantitative", "format": ",.0f" }, "color": { "field": "Value", "type": "quantitative", "scale": { "domain": [1, 2, 3, 4, 5], "range": [ "white", "white", "white", "white", "black" ] }, "legend": null } } } ] }, "resolve": { "scale": { "x": "independent", "y": "independent" } } }
.pbix here
Alright, I made a few updates. The first one is the main part that gives you the matrices side-by-side.
- Implemented column faceting on category
- Added a transform to correctly sort the y-axis alphabetically based on the product number
- Rotated the x-axis labels to have an angle of 0
* Important note - with layout composition (in this case, faceting), you have to specifiy the width and height to be used for the individual charts. This means that if you resize the visual in the Power BI formatting properties, you'll want to update the width and height in the spec as well.
Let me know if this is what you are after. Happy to help if you have additional questions (I'm looking for Deneb/Vega/Vega-Lite practice).
Spec:
{
"data": {"name": "dataset"},
"transform": [
{
"calculate": "parseInt(replace(datum['Product'], 'Product ', ''))",
"as": "sortOrder"
}
],
"facet": {
"column": {
"field": "Category",
"title": null,
"header": {"labelFontSize": 14}
}
},
"spec": {
"width": 525,
"height": 320.5,
"encoding": {
"y": {"field": "Product", "title": null, "sort": {"field": "sortOrder"}},
"x": {
"field": "Sub Cat",
"axis": {"orient": "top", "labelAngle": 0},
"title": null
}
},
"layer": [
{
"mark": {"type": "rect"},
"encoding": {
"color": {
"field": "Value",
"scale": {"scheme": "lightgreyred"},
"legend": null
}
}
},
{
"mark": {"type": "text", "tooltip": true, "size": 14},
"encoding": {
"text": {"field": "Value", "type": "quantitative", "format": ",.0f"},
"color": {"value": "black"}
}
}
]
}
}
pbix file here
This is exciting for sure! Thank you.
I have done a quick test where I tried to add additional categories, but it messes up the whole layout, and I get gaps in the structure. (attached file). It may relate to the fact that each category has a different sub-cat.I do have additional questions if you are still happy to help:
- Can I set a rule for the product field to change the background color where "Overall" will be "brown" and the rest is "darkblue", and the font is "white"?
- Can I set a rule to set the background color for "category" to be "black" and the font is "white"?
- Can I set a specific rule to sort by specific product? i.e. I want the product to start with Product 5, Product 2,...etc.
- Can I set a rule for coloring the values? so instead of having a color scheme, I would have: if value = 1 then color = "grey", if value = 2, then color = "amber", 3 ="green", 4= "red"a and 5="lightblue".
Hey H_insight. I believe I got everything implemented. Take a look and let me know.
Notes:
- When adjusting the size of the visual, you'll want to adjust the step width/height and the xOffset/yOffset for the rects sitting behind the row and column headers. You'll also want to adjust font size accordingly.
- Although there are alternatives, I added a calculated column to implement the logic for a custom sort order. The column is called "Sort Order". Here you should be able to implement any logic you'd like to determine the sorting of the products.
Spec:
{ "data": {"name": "dataset"}, "facet": { "column": { "field": "Category", "title": null, "header": {"labelFontSize": 14} } }, "spec": { "width": {"step": 70}, "height": {"step": 25}, "encoding": { "y": { "field": "Product", "title": null, "sort": {"field": "Sort Order"}, "axis": { "labelColor": "white", "labelFontWeight": 700 } }, "x": { "field": "Sub Cat", "axis": { "orient": "top", "labelAngle": 0, "labelColor": "white", "labelFontWeight": 700 }, "title": null } }, "layer": [ { "description": "x-axis background rects", "mark": {"type": "rect"}, "encoding": { "y": {"value": 0}, "yOffset": {"value": -25}, "color": { "condition": { "test": "datum['Sub Cat'] == 'Overall'", "value": "#C45920" }, "value": "#325964" } } }, { "description": "y-axis background rects", "mark": { "type": "rect", "opacity": 0.5 }, "encoding": { "x": {"value": 0}, "xOffset": {"value": -80}, "color": {"value": "black"} } }, { "description": "matrix value rects", "mark": {"type": "rect"}, "encoding": { "color": { "field": "Value", "type": "nominal", "scale": { "domain": [1, 2, 3, 4, 5], "range": [ "grey", "amber", "green", "red", "lightBlue" ] }, "legend": null } } }, { "mark": { "type": "text", "tooltip": true, "size": 14 }, "encoding": { "text": { "field": "Value", "type": "quantitative", "format": ",.0f" }, "color": { "field": "Value", "type": "quantitative", "scale": { "domain": [1, 2, 3, 4, 5], "range": [ "white", "white", "white", "white", "black" ] }, "legend": null } } } ] }, "resolve": { "scale": { "x": "independent", "y": "independent" } } }
.pbix hereThank you very much giammariam. The potential of Deneb is crazy!! Thanks again.