Color labeling

[rgbkrk]

A lot of people are confused about the red vs. green vs. black colors for the property taxes. The intent is to highlight disparity of taxes (super high or super low). I'm going to collate some questions & feedback about this, including my own.

[rgbkrk]

If I had to guess, most of "housing twitter" is confused about low taxes being green and high taxes being red, since low taxes mean that they haven't been paying much for many years whereas higher taxes means they've had a reassessment.

[typpo]

👍 This is something that has come up repeatedly. Current logic is: 10% lowest in viewport are green, 10% highest in viewport are red.

I'm not sure there's a color scheme that will satisfy everyone, but I've heard the following suggestions:

• Flip the colors
• Add a gradient
• Make the threshold adjustable
• Make the colors fixed based on area, do not vary by viewport
• And of course, just keep it as-is

I think the real pressing issue is that there is no legend! This has led many people to wonder what the colors mean and would be a simple addition.

[rgbkrk]

Some of the Questions posed:

So what does black signify?

This is amazing. What governs the colors on the price tags?

[rgbkrk]

I would switch what is currently "red" to "blue", for colorblindness while still being able to highlight it and also get away from the negative connotation with red.

I think the real pressing issue is that there is no legend! This has led many people to wonder what the colors mean and would be a simple addition.

Yes!

[adibbehjat]

I prefer gradient because it's really weird to have two color extremes without having the ability to see a gradient to describe range.

If we use the green and red, then we can use the following functions below to help with this:

function transformRange(minTax, maxTax, targatTax) {
    return (targatTax - minTax) / (maxTax - minTax); // Returns %
}

function getColor(weight) {
  var hue = ((1 - value) * 120).toString(10); // 120 represents 0 (red) to 120 (green) in the HSL circle. This can be transformed to a different range if needed
  return ["hsl(", hue, ",100%,50%)"].join("");
}

marker_color = getColor(transformRange(bottomPercentile, topPercentile, record.tax))

  let marker = apnToMarkerCache.get(record.apn);
  if (marker) {
    // Tooltip is going to get updated
    //marker.unbindTooltip();
    if (marker._tooltip._contentNode) {
      marker._tooltip._contentNode.classList.remove('tax-low');
      marker._tooltip._contentNode.classList.remove('tax-high');
      if (taxclass) {
        marker._tooltip._contentNode.classList.add(`tax-${taxclass}`);
        marker._tooltip._contentNode.style.background=marker_color; // Set background color of the marker to the gradient
      }
    }
  }