Forum Discussion
Help coloring Deneb heatmap
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" } }
Thanks for the dataset, Doug7983. Let me know if something like this scratches the itch.
Here is a gist that contains the spec. I've also included it below.
{
"resolve": {"scale": {"color": "independent"}},
"facet": {
"row": {
"field": "Category",
"header": {"labelAngle": 0, "labelAlign": "left"},
"title": null
}
},
"spacing": -5,
"spec": {
"mark": {"type": "rect", "stroke": "white", "tooltip": true},
"encoding": {
"x": {
"field": "Date",
"type": "ordinal",
"title": null,
"timeUnit": "yearmonth",
"axis": {
"domain": false,
"ticks": false,
"labels": true,
"labelAngle": -90,
"orient": "top"
}
},
"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)",
"legend": {
"direction": "horizontal",
"title": null,
"gradientLength": 120,
"format": ".1%",
"labelOffset": {"expr": "-child_height*0.6"},
"labelColor": {
"expr": "luminance(scale('child_color', max(0, parseFloat(datum.label)/100))) < 0.5 ? '#fff' : '#000'"
}
}
}
}
},
"data": {
"name": "dataset"
}
}
}
This is helpful, thank you. For context, I'm a long-time Tableau user and relatively new to both Power BI and Deneb. I have found it challenging to accurately describe what I'm trying to accomplish, so please bear with me.
Example (and screenshot below):
My data has a range of -12.4% to 64.8%:
The deepest blue will always correspond to the highest value in the data set, regardless of row.
The deepest orange will always correspond to the lowest value in the data set, regardless of row.
The spectrum of color is applied such that a particular shade of blue, for example, will represent the same value, no matter where it appears. Same for shades of orange and everything in between. I’ve added labels here to see if maybe that helps:
Aside from all that, a question: I see in your spec that you are declaring the range of values. My data changes every day, so that wouldn't be practical. Is there a way to avoid that and have the range be dynamic?
Thanks,
Doug