18F/doi-extractives-data — pull request #249 by shawnbot (2014-11-19 00:24:36+00:00)
Title: Update map colors

This is a pretty straightforward update to map colors. I'm using a sequential color scheme from [ColorBrewer](http://colorbrewer2.org/?type=sequential&scheme=OrRd&n=9). To update the color scheme, all you should need to do is go to [ColorBrewer](http://colorbrewer2.org/), pick your scheme (remember to set the number of data classes, preferably 7+), and click on the "EXPORT" link in the lower right-hand UI panel, which will expand this form:

![image](https://cloud.githubusercontent.com/assets/113896/5098688/575795dc-6f3e-11e4-82b9-b38fbf53c586.png)

...from which you can just copy the contents of the JavaScript text input and paste it as the new value for `mapColors` [in onrrrmap.js](https://github.com/18F/doi-extractives-data/blob/feature/update-map-colors/static/js/onrrmap.js#L30).

The color scale in the legend is populated [using d3](https://github.com/18F/doi-extractives-data/blob/feature/update-map-colors/static/js/onrrmap.js#L43-L53) with a series of divs that are styled as `display: inline-block` so they stack up horizontally. They're given a fractional percentage CSS width, which may need to be tweaked if the number of colors changes, because different browsers round fractional percentages differently, which may cause the last div to wrap to the next line.

The 3D "depth" of each shape is simply its fill color's index in the `mapColors` array. You can multiply this by 2 in [getMapColorDepth()](https://github.com/18F/doi-extractives-data/blob/feature/update-map-colors/static/js/onrrmap.js#L530-L533) to get a more exaggerated look.

Let me know what you think!