venn hack

by jlbriggs

HTML

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

<div id="container" style="height:400px;width:700px;"></div>

JavaScript

var chart = new Highcharts.Chart({
    chart: {
        renderTo:'container',
        type:'scatter'
    },
    title:{
        text:'Chart Title'
    },
    credits:{enabled:false},
    legend:{},
    plotOptions: {
        series: {
            shadow:false,
            borderWidth:0,
            marker:{
                symbol:'circle'
            }                            
        }
    },
    xAxis:{
        min:0,
        max:10,
        lineWidth:0,
        gridLineWidth:0,
        title:{text:''},
        labels:{enabled:false}
    },
    yAxis:{
        min:0,
        max:100,
        lineWidth:0,
        gridLineWidth:0,
        title:{text:''},
        labels:{enabled:false}
    },    
    series: [{
        color:'rgba(90,155,212,.5)',
        name:'this thing',
        data: [{
            x:3,
            y:50,
            marker:{
                radius:150,
                fillColor:'rgba(90,155,212,.5)',
                lineColor:'rgba(90,155,212,.75)',
                lineWidth:1,
                states:{
                    hover:{
                        radius:150
                    }
                }
            }
        }]
    },{
       color:'rgba(241,90,96,.5)',
       name:'that thing',
       data: [{
           x:6,
           y:60,
           marker:{
               radius:125,
               fillColor:'rgba(241,90,96,.5)',
               lineColor:'rgba(241,90,96,.75)',
               lineWidth:1,
               states:{
                   hover:{
                       radius:125
                   }
               }
           }
       }]
    },{
       color:'rgba(250,250,91,.5)',
       name:'the other thing',
       data: [{
           x:5,
           y:25,
           marker:{
               radius:50,
               fillColor:'rgba(250,250,91,.5)',
               lineColor:'rgba(250,250,91,.75)',
               lineWidth:1,
               states:{
                   hover:{
                       radius:50
              ...