search

cfinst / cfinst.github.io

Campaign Finance Institute data exploration and download tool.
https://cfinst.github.io
GNU General Public License v3.0
12 stars 0 forks source link

Introduce gradation for disclosure #247

Closed curran closed 7 years ago

curran commented 7 years ago

https://vis4.net/labs/multihue/#colors=#36858c,#9cffe3|steps=5|bez=1|coL=1

image

curran commented 7 years ago

https://vis4.net/labs/multihue/#colors=#36858c,#afe0d3|steps=5|bez=1|coL=1

image

['#36858c', '#579b9d', '#75b2af', '#92c8c1', '#afe0d3']
curran commented 7 years ago

@bglavin This is the color gradation I propose for the disclosures section. It is perceptually linear with respect to changes in lightness, with a consistently moving hue through the gradations. This makes it easier to read and compare relative values than the previous color choices, which differ in hue as well as lightness.

I used the tools Chroma.js Color Scale Helper and jQuery MiniColors to make this.

Before: image

After: image

The above screenshot is from PR #250. Feel free to merge that PR if you like this change. Also I'm happy to hear any feedback on how this looks, and if any other shades would be preferable.

curran commented 7 years ago

Here's another option with more contrast between the colors (arguably more readable than the first option):

image

If you prefer this option, merge PR #251

curran commented 7 years ago

Here's a third option (a bit more blueish):

image

This is interpolating between #087d94 and #c5f0eb (using Chroma.js Helper), which are the endpoints of the contribution limits threshold colors, just shifted towards a more green hue a bit.

It you prefer this option, then merge PR #253