Media Polarization (by Ideology)

by Adam Nekola

HTML

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

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

<ul>
    <li>CNN</li>
    <li>MSNBC</li>
</ul>

CSS

li {
    cursor:pointer;
}

JavaScript

$(function () {
    
var media_mountains = [
{
	name: "MSNBC",
	data:[
        [1.673960868,1.69534296,1.750342066,1.861029162,1.979915236],
        [1.979915236,2.059716885,2.074470366,2.045693319,1.986814012],
        [1.986814012,1.810413111,1.613041776,1.446792479,1.383062395],
        [1.383062395,1.331536266,1.236542073,1.130044983,0.969005375],
        [0.969005375,0.78502837,0.541010988,0.360564256,0.265673054]
    ]
}, {
	name: "CNN",
	data:[
        [2.111555313,2.230722681,2.422594385,2.621540391,2.734702343],
        [2.734702343,2.8647739,3.06561601,3.338239795,3.500353816],
        [3.500353816,3.384680795,3.091642041,2.772664747,2.486915605],
        [2.486915605,2.203267174,1.850408119,1.553719149,1.227498784],
        [1.227498784,0.961183449,0.676581542,0.496215209,0.405124755]
    ]
}];
    
    
    $('#container').highcharts({
        chart: {
            type: 'area'
        },
        xAxis: {
            min:-10,
            max:10
        },
        colors: ['#F0F0E6','#F0F0E6','#F0F0E6','#F0F0E6','#F0F0E6'],
        credits: { enabled: false },
        exporting: { enabled: false },
        legend: { enabled: false },
        tooltip: {
             positioner: function () {
                return { x: 80, y: 50 };
            }
        },
        yAxis: {
            max: 5,
            min: 0
        },
        title: { text: '' },
        plotOptions :{
            scatter:{
                marker: {
                    symbol: 'circle',
                    fillColor: '#d1a8af',
                    lineColor: '#733d47',
                    lineWidth: 1
                }
            },
            area: {
                trackByArea: true,
                events: {
                    mouseOver: function(){
                        this.update({
                            color: '#C0C0C0'
                        });
                    },
                    mouseOut: function(){
                        this.update({
                  ...