Polarization Layercake

by Adam Nekola

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>

<div id="chart" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function () {

    var polarization_chart = {
		chart: {
			animation: {
				duration: 900	
			},
			marginTop: 100,
			marginRight: 25,
			marginBottom: 100,
			marginLeft: 50
		},
		colors: ['#eee', '#436983', '#666', '#666'], // Rep / Dem
		title: {
			enabled: true,
			text: '',
			align: 'left',
			style: {
				color: '#ccc',
				fontFamily: '"abril-text", Georgia, "Times New Roman", Times, serif',
				fontSize: '2em',
				fontStyle: 'italic'
			}
		},
		subtitle: {
			enabled: false,
			text: '',
			align: 'left',
			style: {
				color: '#727272',
				fontFamily: '"franklin-gothic-urw", Verdana, Geneva, sans-serif',
				fontSize: '1.2em'
			},
			y: 40
		},
		xAxis: {
			labels: {
				step: 1,
				style: {
					fontFamily: '"franklin-gothic-urw", Verdana, Geneva, sans-serif',
					textAlign: 'center',
					width: 'auto',
					overflow: 'visible'
				},
				y: 20,
				align: 'center',
				useHTML: true,
				formatter: function() {
					if (this.value == -10) {
						return "Very<br/>consistantly<br/><b>liberal</b>";
					} else if (this.value == 10) {
						return "Very<br/>consistantly<br/><b>conservative</b>";
					} else if (this.value == 0) {
						return "50/50<br/>liberal and<br/>conservative";
					}
					return "";
				}
			},
            tickmarkPlacement: 'on',
			categories: [ -10, -9, -8, -7, -6, -5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
		},
		yAxis: {
			title: {
				text: null
			},
			labels: {
				style: {
					fontFamily: '"franklin-gothic-urw", Verdana, Geneva, sans-serif'	
				},
				formatter: function() {
					return '';
				}
			},
			max:750,
			tickInterval: 150
		},
		tooltip: {
			shared: true,
			crosshairs: true,
			useHTML: true,
			borderColor: '#ccc'
		},
		exporting: {
			enabled: false
		},
		credits: {
			enabled: false
		},
		labels: {
			items: {
				style: {
					fontFamily: '"franklin-gothic-urw", Verdana, Geneva, sans-serif'	
				}
			}
		},
		legend: {
			borderWidth: 0,
			floating: true,
			align:...