// Cargamos loa datos. Al eliminar los registros NA vemos que el año más reciente del que tenemos datos de la esperanza de vida y ratio de fertilidad es el 2014
  d3.csv('datosWB2014.csv', function (error, csvData) {
	var data = csvData.map(function (d) {    
	return {
			pais: d.country_name,
			ExpVida: +d.life_expectancy,
			RatioFert: +d.fertility_rate,
			Poblacion: +d.population,
			Region: d.region_value
		}
	});

 // Establecer tamaño de las burbujas
 
   var minBubbleSize = 8, maxBubbleSize = 30;
   
//Establecer layaout
	
   var margin = {
		left: maxBubbleSize, top: maxBubbleSize,
		bottom: maxBubbleSize, right: maxBubbleSize
	};
  			
	var axisPadding = 10;
	
	var graphWidth = 800, graphHeight = 500;
	
	var totalWidth = graphWidth + margin.left + margin.right;
	
	var totalHeight = graphHeight + margin.top + margin.bottom;

// Mapear variables
	var EsperanzaVida = data.map(function (d) { return d.ExpVida; });
	var RatioFertilidad = data.map(function (d) { return d.RatioFert; });
	var Poblacion = data.map(function (d) { return d.Poblacion; });
	var Regiones = data.map(function (d) { return d.Region; });

// Establecer escalas
	var xScale = d3.scale.linear()
		.domain([d3.min(EsperanzaVida), d3.max(EsperanzaVida)])
		.range([0, graphWidth]);

	var yScale = d3.scale.linear()
		.domain([d3.max(RatioFertilidad), 0])
		.range([0, graphHeight]);

	var popDomain = [d3.min(Poblacion), d3.max(Poblacion)];
   
    var popScale = d3.scale.linear()
		.domain(popDomain)
		.range([minBubbleSize, maxBubbleSize]);

	var uRegiones = d3.set(Regiones).values();
	
    var regionColor = d3.scale.ordinal()
		.domain(uRegiones)
		.range(d3.scale.category10().range());
		
	var svg = d3.select("body").append('svg')
		.attr('width', totalWidth)
		.attr('height', totalHeight);
          
	var yAxis = d3.svg.axis().scale(yScale).orient('left');
	   
	var yAxisNodes = svg.append('g')
		.attr('transform', 'translate(' + (margin.left - axisPadding) + ',' + margin.top + ')')
		.call(yAxis);
		styleAxis(yAxisNodes);
	
	var xAxis = d3.svg.axis().scale(xScale).orient('bottom');
		
	var xAxisNodes = svg.append('g')
			.attr('transform', 'translate(' + margin.left + ',' + (totalHeight - margin.bottom + axisPadding) + ')')
			.call(xAxis);
		styleAxis(xAxisNodes);

	// Incluir leyenda	
	var tip = d3.tip()
	  .attr('class', 'd3-tip')
	  .offset([-10, 0])
	  .html(function(d) {
		return "<strong> EspVida " + d.pais +":</strong> <br /> <span style='color:orange'>" +  d.ExpVida + "</span>";
	  })
	  
	//Crear objeto svg
	
		svg.call(tip); 
	  
		svg.append('g')
			.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
			.selectAll('circle')                
			.data(data)
			.enter()            
			.append('circle')  
			.on('mouseover', tip.show)
			.on('mouseout', tip.hide)		
			.each(function (d) {
				d3.select(this).attr({
					cx: xScale(d.ExpVida),
					cy: yScale(d.RatioFert),
					r: popScale(d.Poblacion),
					fill: regionColor(d.Region),                        
					stroke: regionColor(d.Region),
					'fill-opacity': 0.5,			  
				});		  
			});
	  
	   
// Definir leyenda
	  var legend = d3.select('svg')
				.append("g")
				.selectAll("g")
				.data(regionColor.domain())
				.enter()
				.append('g')
				.attr('class', 'legend')
				.attr('transform', function(d, i) {
					var height = 20;
					var x = 640;
					var y = i * height;
					return 'translate(' + x + ',' + y + ')';
		});


	  legend.append('rect')
		  .attr('width', 20)
		  .attr('height', 10)
		  .style('fill', regionColor)
		  .style('stroke', regionColor);

	  legend.append('text')
		  .attr('x', 30)
		  .attr('y', 10)
		  .text(function(d) { return d; });  
  
	});


// Insertar ejes

	function styleAxis(axisNodes) {
		axisNodes.selectAll('.domain') 
		
			.attr({
				fill: 'none',
				'stroke-width': 0.5,
				stroke: 'black'                    
			})
		
		axisNodes.selectAll('.tick line')
			.attr({
				fill: 'none',
				'stroke-width': 0.5,
				stroke: 'black'
			});
	}