Custom scales in CSS

[terencehonles]

In the previous version of Cal Heatmap, we used the .q* and .highlight to trigger custom CSS to allow gradient fills to subdomain cells for our ordinal values. Since the newest version of Cal Heatmap relies directly on Observable HQ's Plot Scales and computes the fill values in JavaScript, but does not decorate the subdomain cells with a class, we can no longer (easily) do this (we can but with a CSS style attribute selector for the rendered fill values and then override those with !important, but this is a very big hack and is quite brittle).

I see some requests for decorating domains/subdomains with classes (#391 and #349), but it does not seem like those are value dependent, and I'm not sure they completely align with this particular suggestion. So, before I potentially create a PR which allows a color scale in CSS I'd like to understand if this feature would be accepted. It looks like it shouldn't be a major undertaking, but it does look like it effects how the style and class names are set and that's in two separate locations which means that computation may need to be done twice or hoisted a bit higher.

My thoughts for how this scale may be defined would be one of the following:

{color: {
  type: 'ordinal',
  scheme: 'css',
  range: ['class1, class2'],
  domain: [value1, value2],
}}

or maybe it makes sense to use type: 'css' which would effectively be ordinal internally like categorical implies the scheme:

{color: {
  type: 'css',
  range: ['class1, class2'],
  domain: [value1, value2],
}}

or maybe even a different key, since "color" is a bit of a misnomer if you use the classes for something other than a fill value (we wouldn't be, but that doesn't mean someone can't):

{css: {
  range: ['class1, class2'],
  domain: [value1, value2],
}}

As I mentioned previously I don't believe this should be a large undertaking, so I'm willing to attempt it. However to be completely straightforward, we will likely be moving off of Cal Heatmap in the long run (no timeline) because our use case is a bit shoehorning things into Cal Heatmap, so if this does not seem useful or adds too much maintenance burden we can live with our hack (which at least allows us to upgrade and bundle things better than we were previously 🎉 ).

Thanks in advance for any feedback and consideration (and thanks for updating the tool!)

[wa0x6e]

I see your example uses ordinal type, which assign a color to a specific value.

What's your use case, requiring the use of css, instead of using the scale option to match a specific value to a specific color ?