// Escribe aquí tu código!!

// Se definen dimensiones
var margin = { top: 20, right:40, bottom: 40, left: 40 },
    width = 889 - margin.left - margin.right,
    height = 430 - margin.top - margin.bottom;

// Se inserta el svg
var svg = d3.select('#mychart')
    .append('svg')
    .attr('width', width + margin.left + margin.right) // width + margin
    .attr('height', height + margin.top + margin.bottom) // height + margin
    .append('g') // se añade un grupo
    .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')'); // se traslada


//toolpit
var div = d3.select("body").append("div")
    .attr("class", "tooltip")
    .style("display", "none");

//datos
d3.csv('worldbankdataD3JS.csv', function(error, csvData) { 
  if (error) throw error;

  // Tratamiento de datos
  csvData = csvData.filter(function(d) { return d.cellular_subscriptions != ''; });
  csvData = csvData.filter(function(d) { return d.gdp_capita != ''; });
  csvData = csvData.filter(function(d) { return d.population != ''; });
  // Outliers - los quito para dar más detalle a la diferencia entre el resto de paises
  // Outlier en cellular_subscriptions
   csvData = csvData.filter(function(d) { return d.country != 'Macao SAR, China'; });
  // Outlier en gdp_capita
  csvData = csvData.filter(function(d) { return d.country != 'Luxembourg'; });
 

  
  
//Máximos
  var ccMax = d3.max(csvData,function(d){
      return parseInt(d.cellular_subscriptions);
    });
 var gdpMax = d3.max(csvData,function(d){
    return parseInt(d.gdp_capita);
  });
  
  
// Escalas
  var xScale = d3.scaleLinear()
              .domain([0, ccMax])
              .range([margin.left, width-margin.right - 0 ]);
 
  var yScale = d3.scaleLinear()
              .domain([0, gdpMax])
              .range([height-margin.bottom, margin.top]);
  
  var rScale = d3.scaleSqrt()
              .domain(d3.extent(csvData, function(d) { return +d.population; }))
              .range([5, 30]);
  
  var colorScale = d3.scaleOrdinal()
              .domain(['South Asia', 'Europe & Central Asia', 'Middle East & North Africa', 'East Asia & Pacific', 'Sub-Saharan Africa', 'Latin America & Caribbean', 'North America']) // también se pueden sacar de lo datos
              .range(['#ed7d20', '#765ba0', '#29f94b', '#fbb754', '#165916', '#14babd', '#953331']);
  
   
  // Ejes
  var xAxis = d3.axisBottom(xScale);
	var yAxis = d3.axisLeft(yScale);

	// Inserto ejes
	svg.append('g')
  	 .attr('class', 'x axis')
  	 .attr('transform', 'translate(0,' + (height - margin.bottom) + ')')
  	 .call(xAxis)
  .append('text')
  	.attr('x', width - margin.right - margin.left)
  	.attr('y', 36)
  	.text('cellular_subscriptions');

	svg.append('g')
 	   .attr('class', 'y axis')
     .attr('transform', 'translate(' + margin.left + ',' + 0 + ')')
 	   .call(yAxis)
  .append('text')
  	.text('gdp_capita');

  // Círculo animado para la transición
var seleccion = svg.append('circle')
  .attr("class", "seleccion")
  .attr('cx', 0)
  .attr('cy',0)
  .attr('r',10)
  .style('fill','none')
  .style('stroke','black')
  .style('stroke-width',2)
  .style('opacity',0);
  

  
  
  
  // Pegar los círculos que representan cada pais, con:
  // * posición x según cellular_subscriptions
  // * posición y según gdp_capita
  // * radio según población
  // * color según región
  svg.selectAll('circle')
  	.data(csvData)
  	.enter()
  	.append('circle')
  	.attr('cx', function(d) {return xScale(d.cellular_subscriptions)})
    .attr('cy', function(d) {return yScale(d.gdp_capita)})
  	.attr('r', function(d) {return rScale(d.population)})
  	.style('fill', function(d) {return colorScale(d.region)})
  	.style('stroke', 'white')
  	.style('stroke-opacity', 0.5)
  	.style('opacity', 0.7)
  	.on('mouseover', function(d){
    	// Transición - círculo animado
    	seleccion
        .attr('cx', xScale(d.cellular_subscriptions))
  			.attr('cy', yScale(d.gdp_capita))
  			.style('stroke',colorScale(d.region))
        .transition()
      	.duration(500)
      	.attr('r', rScale(d.population)+4)
    		.style('opacity',1)
      	;
    
      // Muestra toolpit
    	div.style('display', 'inline');    
    	div
       .html(d.country +  '<br/>' + '<strong>cc:</strong>' + parseFloat(d.cellular_subscriptions).toFixed(3) +  '<br/>' + '<strong>gdp:</strong>'+ parseFloat(d.gdp_capita).toFixed(3))
       .style('left', (d3.event.pageX - 34) + 'px')
       .style('top', (d3.event.pageY - 12) + 'px');

    	
		})
  	.on('mouseout', function(d){
    	// Transión - oculta círculo 
    	seleccion
    		.transition()
    		.duration(200)
    		.attr('r',0)
    		.style('opacity',0);
    
    	// Oculta toolpit
    	div.style("display", "none");
      
		});
  
  // Leyendas
  // Significado de colores - añado el objeto
 var legend = svg.selectAll(".legend")
  .data(colorScale.domain())
  .enter().append("g")
  .attr("class", "legend")
  .attr("transform", function(d, i) { return "translate("+(width+-56)+"," + i * 20 + ")"; });
  
  // Significado de colores - caja externa
  legend.append('rect')
    .attr('width', 16)
    .attr('height', 17)
  	.attr("x", -52)
  	.attr("y", -9)
    .style('fill', '#ffffff')
    .style('stroke', colorScale);
  
  // Significado de colores - añado los círculos
legend.append("circle")
  .attr("cx", -44)
  .attr("cy",-1)
  .attr('r', 5)
  .style("fill", colorScale)
  .style('opacity', 0.7);
  
  
  
  // Significado de colores - añado el texto
legend.append("text")
  .attr("x", -33)
  .attr("y", 3)
  .text(function(d) { return d;})
	.style("font-family","avenir next")
     .style("font-size","11")
     .style("font-weight","400")


  //Leyenda indicando la fuente utilizada
  d3.select("svg") 
     .append("text")
     .attr("x",margin.left)
     .attr("y",(height - margin.bottom+50))
  	 .attr("color", "#ff2605")
     .text("Fuente: worldbanckdata.csv. Datos año 2015. Filtrados Luxemburgo y Macao.")
     .style("font-family","avenir next")
     .style("font-size","11")
     .style("font-weight","400")
  	 
  	 
  
  
  
  
});