Annual Report: median household income map

author(s): Mike Zavarello

by Mike Zavarello

HTML

<!-- Atlanta Fed scripts -->
<script src="https://www.frbatlanta.org/~/media/javascript/system/UniversalGoogleAnalytics.js"></script>
<script src="https://www.frbatlanta.org/~/media/javascript/economy-matters/annual-report/2018/highcharts-global-settings_2018-annual-report_min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Francois+One" rel="stylesheet"> 
<script src="https://www.frbatlanta.org/~/media/javascript/economy-matters/annual-report/2018/MedianIncomeData.js"></script>

<!-- standard Highcharts scripts -->
<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.js"></script>

<div id="container_MedianIncomeMap" class="economyMattersMap">
    Downloading map...
</div>

CSS

.economyMattersMap { height: 575px; width: 100%; margin: 0 auto; }

JavaScript

$(document).ready(function(){

	/* set chart dimensions based on iframe and container sizes */
	var iframeWidth_MedianIncomeMap = $("#container_MedianIncomeMap").width();
	var iframeHeight_MedianIncomeMap = $("#container_MedianIncomeMap").height();

	var countiesMap = Highcharts.geojson(Highcharts.maps['countries/us/us-all-all']),
		lines = Highcharts.geojson(Highcharts.maps['countries/us/us-all-all'], 'mapline'),
		chartOptions_MedianIncomeMap;

	// Add state acronym for tooltip
	Highcharts.each(countiesMap, function (mapPoint) {
		mapPoint.name = mapPoint.name + ', ' + mapPoint.properties['hc-key'].substr(3, 2);
	});
	
	var chart_MedianIncomeMap = '';
	
	var sourceLine_MedianIncomeMap = 'Note: In 2012 dollars, adjusted for inflation based on Personal Consumption Expenditures index.<br />Source: U.S. Census Bureau; Moody\'s Analytics Estimated';
	setChartDefaults(iframeWidth_MedianIncomeMap,iframeHeight_MedianIncomeMap,sourceLine_MedianIncomeMap,0);
	var chartOptions_MedianIncomeMap = {
		chart: { marginLeft: 20, marginRight: 60, marginBottom: 100, renderTo: 'container_MedianIncomeMap', type: 'map', zoomType: 'xy' },
		colorAxis: {
			dataClasses: [
				{ from: 0, to: 15000 },
				{ from: 15000, to: 30000 },
				{ from: 30000, to: 45000 },
				{ from: 45000, to: 60000 },
				{ from: 60000, to: 75000 },
				{ from: 75000, to: 90000 },
				{ from: 90000 }
			], maxColor: '#704e2f', minColor: '#e6ecef'
		},
		exporting: {
			buttons: {
				contextButton: { text: 'Export' }
			},
			chartOptions: {
      	legend: { enabled: true }
		  },
			filename: 'economy-matters_us-hispanic-population-map'
		},
		legend: { 
			enabled: true, floating: true, align: 'right', verticalAlign: 'bottom', layout: 'vertical', borderWidth: 0, x: -10, y: -80, backgroundColor: 'none',
			padding: 2, itemMarginTop: 0, itemMarginBottom: 4, symbolRadius: 0, symbolHeight: 12, symbolWidth: 12,
			labelFormatter: function () {
				var legendItem = '';
				if (this.from == 0) {
					legendItem +=...