Swap graph colours

[auryn-macmillan]

When creating a "yes"/"no" binary market, the norm appears to be having "yes" as the first option. Typically, green-blue-ish colours indicate with "yes" while red-orange-ish colours are indicate "no".

Currently, the Omen interface colour's the first option redish rgb(255, 190, 231) and the second option greenish rgb (178, 223, 219).

I propose that we switch these two colours so that "yes" is greenish and "no" is redish. It will make the graph more legible.

[robertuniqid]

The graph colours are coming from a variable, this looks connected to #993

I think the best way is to approach the colors with a bit of a twist, on my main project I have to generate graphs for thousands of possible data entries, and I've wanted to keep the colors consistent, hence I've decided to generate colors based on the string text.

function hash_string( str ) {
  let hash = 0;
  for (let i = 0; i < str.length; i++) {
    hash = ((hash << 5) - hash) + str.charCodeAt(i);
    hash = hash & hash;
  }
  return Math.round(Number.MAX_SAFE_INTEGER * Math.abs(hash) / 2147483648);
}

function string_to_hsl( str, options ) {
  options = options || {};

  var LS = [options.lightness, options.saturation].map(function(param) {
    param = param || [0.35, 0.5, 0.65]; // note that 3 is a prime
    return param.concat();
  });

  if( typeof options.lightness === "undefined" )
    options.lightness = '0.35,0.5,0.65';

  if( typeof options.saturation === "undefined" )
    options.saturation = '0.35,0.5,0.65';

  let hash = hash_string(str);

  return [
    hash % 359,
    LS[1][ parseInt(hash / 360) % LS[1].length],
    LS[0][ parseInt(hash / options.saturation.length) % LS[0].length]
  ];
}

Using this solution "Yes" will always have the same color everywhere, same as "No" and every string will have it's own unique color, the function generates HSL, but it can be adapted to transform them into RGB if required.

function color_hsl_to_rgb( H,S,L) {
  H /= 360;

  let q = L < 0.5 ? L * (1 + S) : L + S - L * S;
  let p = 2 * L - q;

  return [H + 1/3, H, H - 1/3].map(function(color) {
    if(color < 0) {
      color++;
    }
    if(color > 1) {
      color--;
    }
    if(color < 1/6) {
      color = p + (q - p) * 6 * color;
    } else if(color < 0.5) {
      color = q;
    } else if(color < 2/3) {
      color = p + (q - p) * 6 * (2/3 - color);
    } else {
      color = p;
    }
    return Math.round(color * 255);
  });
}

[auryn-macmillan]

Oh, this is pretty neat! Is there any guarantees about how much contrast each colour will have with adjacent colours? That's really important for readability.

[robertuniqid]

Oh, this is pretty neat! Is there any guarantees about how much contrast each colour will have with adjacent colours? That's really important for readability.

Give me a list of texts to try this on and I'll give you the output list of colors

[robertuniqid]

Oh, this is pretty neat! Is there any guarantees about how much contrast each colour will have with adjacent colours? That's really important for readability.

json : https://gist.github.com/rusuandreirobert/4b8b456130ca62ba912689fd09d4babd

Some collision might be there.