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" } }
Hey Doug7983, let me know if this is any closer. Note - you can eliminate the spacing between the FYs by setting the column spacing to -5.
Here's the gist.
Here's the spec:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"transform": [{"calculate": "'FY ' + year(datum['Date'])", "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"
}
},
"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": "ordinal"},
{"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"
}
}
Hey giammariam. The screenshot looks extremely promising, but the spec is throwing this error message:
Invalid specification {}. Make sure the specification includes at least one of the following properties: "mark", "layer", "facet", "hconcat", "vconcat", "concat", or "repeat".I'm not far enough down the learning path to troubleshoot it, but I wonder whether it may have something to do with this piece about "FY":
"transform": [{"calculate": "'FY ' + year(datum['Date'])", "as": "FY"}],"facet": {"column": {"field": "FY", "title": null, "header": {"labelFontSize": 13}}Thanks for your help. This looks like it could well work if we can get past that error.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 }
