Federal Reserve Districts by U.S. County

author(s): Mike Zavarello

by Mike Zavarello

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<div id="container" style="height: 520px; width: 800px; margin: 0 auto; text-align:center; line-height: 520px">
    Downloading map...
</div>

<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/data.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="https://code.highcharts.com/maps/modules/offline-exporting.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/us/us-all-all-highres.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js"></script>

JavaScript

$(document).ready(function(){

	Highcharts.setOptions({
		colors: [
			'#0E4768', /* "Bank" blue */
			'#768F40', /* green */
			'#F5892F', /* orange */
			'#581F54', /* purple */
			'#5588A3', /* light blue */
			'#084225', /* dark green */
			'#B59236', /* gold */
			'#8B4823', /* dark orange */
			'#756A5C', /* brown */
			'#A01D23', /* red */
			'#000000', /* black */
			'#B89078', /* faded dark orange; tan */
			'#CF8788', /* faded red; coral */
			'#AB8EA9', /* faded purple; mauve */
			'#9BB4A9', /* faded dark green; mint */
			'#B5C7D1'  /* faded "Bank" blue; sky */
		]
	});
	
    /**
     * Data parsed from http://www.bls.gov/lau/#tables
     *
     * 1. Go to http://www.bls.gov/lau/laucntycur14.txt (or similar, updated datasets)
     * 2. In the Chrome Developer tools console, run this code:
     * copy(JSON.stringify(document.body.innerHTML.split('\n').filter(function (s) { return s.indexOf('<PUT DATE HERE IN FORMAT e.g. Feb-14>') !== -1; }).map(function (row) { row = row.split('|'); return { code: 'us-' + row[3].trim().slice(-2).toLowerCase() + '-' + row[2].trim(), name: row[3].trim(), value: parseFloat(row[8]) }; })))
     * 3. The data is now on your clipboard, paste it below
     */

    var countiesMap = Highcharts.geojson(Highcharts.maps['countries/us/us-all-all-highres']),
        // Extract the line paths from the GeoJSON
        lines = Highcharts.geojson(Highcharts.maps['countries/us/us-all-all-highres'], 'mapline'),
        // Filter out the state borders and separator lines, we want these in separate series
        borderLines = Highcharts.grep(lines, function (l) {
            return l.properties['hc-group'] === '__border_lines__';
        }),
        separatorLines = Highcharts.grep(lines, function (l) {
            return l.properties['hc-group'] === '__separator_lines__';
        });

    // Add state acronym for tooltip
    Highcharts.each(countiesMap, function (mapPoint) {
        mapPoint.name = mapPoint.name + ', ' +...