var w = 500,
	h = 500;

var colorscale = d3.scale.category10();

//Legend titles
var LegendOptions = ['CiU','Barcelona en Comú'];

//Data
var d = [
		  [
		  		{axis:"Horta",value:0.179},
{axis:"La Font d'en Fargues",value:0.234},
{axis:"Guinardo",value:0.206},
{axis:"Montbau",value:0.194},
{axis:"Vall d'Hebron",value:0.15},
{axis:"Carmel",value:0.071},
{axis:"la Clota",value:0.118},
{axis:"Can Baro",value:0.192},
{axis:"Baix Guinardo",value:0.236},
{axis:"Sant Genis dels Agudells",value:0.131},
{axis:"Teixonera",value:0.081},
{axis:"El Coll",value:0.201},
{axis:"La Salut",value:0.289},
{axis:"Vallcarca i Penitents",value:0.284},
{axis:"Camp d'en Grassot i Gracia Nova",value:0.284},
{axis:"Vila de Gracia",value:0.247},
{axis:"Vallvidrera Tibidabo",value:0.306},
{axis:"Sant Gervasi-Bonanova",value:0.423},
{axis:"Putxet i el Farr",value:0.375},
{axis:"Sarria",value:0.431},
{axis:"Tres Torres",value:0.45},
{axis:"Sant Gervasi-Galvany",value:0.422},
{axis:"Pedralbes",value:0.409},
{axis:"Maternitat i Sant Ramon",value:0.268},
{axis:"Les Corts",value:0.333},
{axis:"Sants-Badal",value:0.194},
{axis:"Sants",value:0.241},
{axis:"Bordeta",value:0.185},
{axis:"Hostafrancs",value:0.208},
{axis:"Font de la Guatlla",value:0.174},
{axis:"Marina del Prat Vermell-Zona Franca",value:0.083},
{axis:"Marina de Port",value:0.097},
{axis:"Poble Sec-Parc Montjuic",value:0.167},
{axis:"Esquerra de l'Eixample",value:0.338},
{axis:"Nova Esquerra de l'Eixample",value:0.302},
{axis:"Sant Antoni",value:0.259},
{axis:"Raval",value:0.149},
{axis:"Barri Gotic",value:0.167},
{axis:"Barceloneta",value:0.154},
{axis:"Sant Pere Santa Caterina i la Ribera",value:0.159},
{axis:"Dreta de l'Eixample",value:0.341},
{axis:"Fort Pienc",value:0.266},
{axis:"Sagrada Familia",value:0.263},
{axis:"Poblenou",value:0.208},
{axis:"Camp de l'Arpa",value:0.228},
{axis:"Clot",value:0.185},
{axis:"Vila Olimpica",value:0.213},
{axis:"Llacuna",value:0.175},
{axis:"Provencals del Poblenou",value:0.148},
{axis:"Sant Marti de Provencals",value:0.134},
{axis:"Diagonal Mar",value:0.183},
{axis:"Besos i Maresme",value:0.083},
{axis:"Verneda i La Pau",value:0.088},
{axis:"Ciutat Meridiana",value:0.052},
{axis:"Torre Baro",value:0.043},
{axis:"Vallbona",value:0.056},
{axis:"Baro de Viver",value:0.056},
{axis:"Trinitat Vella",value:0.067},
{axis:"Trinitat Nova",value:0.077},
{axis:"Roquetes",value:0.048},
{axis:"Canyelles",value:0.06},
{axis:"Prosperitat",value:0.073},
{axis:"Verdun",value:0.069},
{axis:"Guineueta",value:0.115},
{axis:"Porta",value:0.116},
{axis:"Turo de la Peira",value:0.116},
{axis:"Can Peguera",value:0.079},
{axis:"Vilapicina i Torre Lobeta",value:0.156},
{axis:"Bon Pastor",value:0.094},
{axis:"Sant Andreu",value:0.163},
{axis:"Sagrera",value:0.151},
{axis:"Congres",value:0.204},
{axis:"Navas",value:0.206}


		],[
{axis:"Horta",value:0.28},
{axis:"La Font d'en Fargues",value:0.24},
{axis:"Guinardo",value:0.264},
{axis:"Montbau",value:0.255},
{axis:"Vall d'Hebron",value:0.259},
{axis:"Carmel",value:0.348},
{axis:"la Clota",value:0.368},
{axis:"Can Baro",value:0.276},
{axis:"Baix Guinardo",value:0.243},
{axis:"Sant Genis dels Agudells",value:0.335},
{axis:"Teixonera",value:0.354},
{axis:"El Coll",value:0.285},
{axis:"La Salut",value:0.212},
{axis:"Vallcarca i Penitents",value:0.204},
{axis:"Camp d'en Grassot i Gracia Nova",value:0.218},
{axis:"Vila de Gracia",value:0.265},
{axis:"Vallvidrera Tibidabo",value:0.2},
{axis:"Sant Gervasi-Bonanova",value:0.087},
{axis:"Putxet i el Farr",value:0.157},
{axis:"Sarria",value:0.108},
{axis:"Tres Torres",value:0.053},
{axis:"Sant Gervasi-Galvany",value:0.09},
{axis:"Pedralbes",value:0.054},
{axis:"Maternitat i Sant Ramon",value:0.181},
{axis:"Les Corts",value:0.153},
{axis:"Sants-Badal",value:0.245},
{axis:"Sants",value:0.23},
{axis:"Bordeta",value:0.247},
{axis:"Hostafrancs",value:0.26},
{axis:"Font de la Guatlla",value:0.297},
{axis:"Marina del Prat Vermell-Zona Franca",value:0.377},
{axis:"Marina de Port",value:0.367},
{axis:"Poble Sec-Parc Montjuic",value:0.33},
{axis:"Esquerra de l'Eixample",value:0.189},
{axis:"Nova Esquerra de l'Eixample",value:0.202},
{axis:"Sant Antoni",value:0.25},
{axis:"Raval",value:0.354},
{axis:"Barri Gotic",value:0.369},
{axis:"Barceloneta",value:0.315},
{axis:"Sant Pere Santa Caterina i la Ribera",value:0.359},
{axis:"Dreta de l'Eixample",value:0.187},
{axis:"Fort Pienc",value:0.226},
{axis:"Sagrada Familia",value:0.229},
{axis:"Poblenou",value:0.292},
{axis:"Camp de l'Arpa",value:0.25},
{axis:"Clot",value:0.28},
{axis:"Vila Olimpica",value:0.248},
{axis:"Llacuna",value:0.298},
{axis:"Provencals del Poblenou",value:0.309},
{axis:"Sant Marti de Provencals",value:0.306},
{axis:"Diagonal Mar",value:0.304},
{axis:"Besos i Maresme",value:0.346},
{axis:"Verneda i La Pau",value:0.318},
{axis:"Ciutat Meridiana",value:0.359},
{axis:"Torre Baro",value:0.389},
{axis:"Vallbona",value:0.403},
{axis:"Baro de Viver",value:0.374},
{axis:"Trinitat Vella",value:0.331},
{axis:"Trinitat Nova",value:0.396},
{axis:"Roquetes",value:0.377},
{axis:"Canyelles",value:0.375},
{axis:"Prosperitat",value:0.378},
{axis:"Verdun",value:0.364},
{axis:"Guineueta",value:0.312},
{axis:"Porta",value:0.308},
{axis:"Turo de la Peira",value:0.317},
{axis:"Can Peguera",value:0.379},
{axis:"Vilapicina i Torre Lobeta",value:0.279},
{axis:"Bon Pastor",value:0.378},
{axis:"Sant Andreu",value:0.292},
{axis:"Sagrera",value:0.286},
{axis:"Congres",value:0.276},
{axis:"Navas",value:0.254}
		  ]
		];

//Options for the Radar chart, other than default
var mycfg = {
  w: w,
  h: h,
  maxValue: 0.6,
  levels: 6,
  ExtraWidthX: 300
}

//Call function to draw the Radar chart
//Will expect that data is in %'s
RadarChart.draw("#chart", d, mycfg);

////////////////////////////////////////////
/////////// Initiate legend ////////////////
////////////////////////////////////////////

var svg = d3.select('#body')
	.selectAll('svg')
	.append('svg')
	.attr("width", w+300)
	.attr("height", h)

//Create the title for the legend
var text = svg.append("text")
	.attr("class", "title")
	.attr('transform', 'translate(90,0)') 
	.attr("x", w - 70)
	.attr("y", 10)
	.attr("font-size", "12px")
	.attr("fill", "#404040")
	.text("Percentatge de vots per barri");
		
//Initiate Legend	
var legend = svg.append("g")
	.attr("class", "legend")
	.attr("height", 100)
	.attr("width", 200)
	.attr('transform', 'translate(90,20)') 
	;
	//Create colour squares
	legend.selectAll('rect')
	  .data(LegendOptions)
	  .enter()
	  .append("rect")
	  .attr("x", w - 65)
	  .attr("y", function(d, i){ return i * 20;})
	  .attr("width", 10)
	  .attr("height", 10)
	  .style("fill", function(d, i){ return colorscale(i);})
	  ;
	//Create text next to squares
	legend.selectAll('text')
	  .data(LegendOptions)
	  .enter()
	  .append("text")
	  .attr("x", w - 52)
	  .attr("y", function(d, i){ return i * 20 + 9;})
	  .attr("font-size", "11px")
	  .attr("fill", "#737373")
	  .text(function(d) { return d; })
	  ;