Color schemes

[jcvdav]

From @spfitzgerald : The biggest issue I have is with the color scheme, as you asked about. Here's what I suggest, but I'll come in on Friday to discuss/clarify my reasoning:

• p < 0.05, negative: RED

• 0.05 < p < 0.1, negative: faint YELLOW-ORANGE

• p > 0.1: GREY. Then perhaps the text can be in orange if negative, green if positive?

• 0.05 < p < 0.1, positive: faint YELLOW-GREEN

• p < 0.05, positive: GREEN

Two reasons for my suggestions:

1. The two green colors look almost identical in the app, and it's tough to tell p < 0.05 from p < 0.1.
2. Insignificant results aren't "bad".

But when I look at the app now, there's always a lot of orange and it makes me think the reserve is in trouble- even when the only significant results are positive! For example, the run through I just did resulted in an orange color for the general biophysical result and said "45.5% of results were positive". When I looked at the stats, however, there were only two significant results and both were positive. Any negative results had super high p values (> 0.55 for nearly everything) so all the orange that made me want to panic were super insignificant. If those were grey instead, I'd have a much clearer picture of what's going on.

[jcvdav]

This issue was moved to turfeffect/MPAtools#7

[jcvdav]

This commit in turfeffect/MPAtools#7 should fix why a large p value of 0.55 showed as significant. Most results should now be yellow.

@spfitzgerald I will update the package used by the app, and re-deploy it. Whenever you have time, could you try and replicate your steps and see if this still yields a lot of orange?

[spfitzgerald]

Color scheme is great now. Final issue is it's really hard to read the white text against the yellow background. Hopefully changing that is a simple fix?

[jcvdav]

You are right. @jaelita and I will look into that to search for a better yellow

[spfitzgerald]

Any chance of putting a black border around the font? That might be the simplest solution.

[jcvdav]

Turns out that can be done by manipulating the css on the back. Using

.alert-warning, .bg-yellow, .callout.callout-warning, .label-warning, .modal-warning .modal-body {text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;}

The bad news is that it looks hideous (note how the leaf also turns black)

Will try some other colors, perhaps a gray will do it. Otherwise, finding a better yellow, perhaps more ocre-like, should do it.

[jcvdav]

Ends up looking like this (see difference between red, orange, yellow)

[spfitzgerald]

Definitely a ton better. I think this is good enough. Last thing you could try is making the font a very light gray instead of white, but that might make it tough to read against the other backgrounds. Again, I think if you need to move on to other things this will do nicely.

• Sean

On Thu, Feb 23, 2017 at 9:28 AM, Juan Carlos Villaseñor-Derbez < notifications@github.com> wrote:

Ends up looking like this (see difference between red, orange, yellow)

[image: image] https://cloud.githubusercontent.com/assets/11950459/23270929/6bab5b7e-f9aa-11e6-9d73-c7b91b51b7f6.png

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/turfeffect/AppDraft/issues/20#issuecomment-282061587, or mute the thread https://github.com/notifications/unsubscribe-auth/AMi3G0TWRezExkjNj407AyWioRImm8nRks5rfcHYgaJpZM4L_zwZ .