Forum Discussion
Solved
Help coloring Deneb heatmap
I’m new to Deneb and haven’t been able to figure out how to color this heatmap so that it is colored by row, or category, rather than as a whole: I want the ...
Doug7983, I see the issue. I had a rogue closed bracket in the data object that I missed. I deleted it and updated the above spec. Try it now.
"data": { "name": "dataset" ] //<-- Should not be there }Another great catch Doug7983. That's what I get for trying to rush through it 😆
gist{ "transform": [ {"calculate": "(month(datum['Date'])+1)", "as": "monthNum"}, { "calculate": "datum['monthNum'] + (datum['monthNum'] < 7 ? 6 : -6)", "as": "monthSort" }, { "calculate": "'FY ' + toString(year(datum['Date']) + (datum['monthSort'] <= 6 ? +1 : 0))", "as": "FY" } ], "facet": { "column": {"field": "FY", "title": null, "header": {"labelFontSize": 13}} }, "resolve": {"scale": {"x": "independent"}}, "spacing": {"column": 5}, "spec": { "width": {"step": 30}, "mark": {"type": "rect", "stroke": "white", "tooltip": true}, "encoding": { "x": { "field": "Date", "type": "ordinal", "title": null, "timeUnit": "month", "axis": { "domain": false, "ticks": false, "labels": true, "labelOpacity": 0.65, "orient": "top" }, "sort": {"field": "monthSort"} }, "y": { "field": "Category", "type": "nominal", "title": "", "axis": { "domain": false, "ticks": false, "labels": true, "labelOpacity": 0.65, "labelAngle": 0, "labelPadding": 5 } }, "tooltip": [ {"field": "Category", "type": "nominal"}, {"field": "Date", "type": "temporal"}, {"field": "Growth (MoYaM)", "type": "quantitative", "format": ".1%"}, {"field": "Growth (WDC)", "type": "quantitative", "format": ".1%"} ], "color": { "aggregate": "max", "field": "Growth (WDC)", "type": "quantitative", "title": "Growth (WDC)", "scale": {"domainMid": 0, "reverse": true, "scheme": "blueorange"}, "legend": { "titleBaseline": "bottom", "direction": "vertical", "format": ".1%", "orient": "right" } } } }, "data": { "name": "dataset" } }
Totally get it, giammariam. I'm grateful for your help. I've tried making changes myself, but the best I could get to was simply changing the "FY" in the spec to "CY". While accurate, it's not really what I need.
My Date table has FiscalYear and FiscalMonth fields, but I couldn't get that approach to work, either.
Try this:
{
"transform": [
{"calculate": "'FY '+ year(datum['Date'])", "as": "FY"},
{"calculate": "(month(datum['Date'])+1)", "as": "monthNum"},
{
"calculate": "datum['monthNum'] + (datum['monthNum'] < 7 ? 6 : -6)",
"as": "monthSort"
},
{
"calculate": "'FY ' + toString(year(datum['Date']) + (datum['monthSort'] > 7 ? -1 : 0))",
"as": "FY"
}
],
"facet": {
"column": {"field": "FY", "title": null, "header": {"labelFontSize": 13}}
},
"resolve": {"scale": {"x": "independent"}},
"spacing": {"column": 5},
"spec": {
"width": {"step": 30},
"mark": {"type": "rect", "stroke": "white", "tooltip": true},
"encoding": {
"x": {
"field": "Date",
"type": "ordinal",
"title": null,
"timeUnit": "month",
"axis": {
"domain": false,
"ticks": false,
"labels": true,
"labelOpacity": 0.65,
"orient": "top"
},
"sort": {"field": "monthSort"}
},
"y": {
"field": "Category",
"type": "nominal",
"title": "",
"axis": {
"domain": false,
"ticks": false,
"labels": true,
"labelOpacity": 0.65,
"labelAngle": 0,
"labelPadding": 5
}
},
"tooltip": [
{"field": "Category", "type": "nominal"},
{"field": "Date", "type": "temporal"},
{"field": "Growth (MoYaM)", "type": "quantitative", "format": ".1%"},
{"field": "Growth (WDC)", "type": "quantitative", "format": ".1%"}
],
"color": {
"aggregate": "max",
"field": "Growth (WDC)",
"type": "quantitative",
"title": "Growth (WDC)",
"scale": {"domainMid": 0, "reverse": true, "scheme": "blueorange"},
"legend": {
"titleBaseline": "bottom",
"direction": "vertical",
"format": ".1%",
"orient": "right"
}
}
}
},
"data": {
"name": "dataset"
}
}