// Escribe aquí tu código!!

// Se definen dimensiones
var margin = { top: 10, right:10, bottom: 40, left: 40 },
    width = 850 - margin.left - margin.right,
    height = 450 - margin.top - margin.bottom;

// Se inserta el svg
var svg = d3.select('#realchart')
    .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


d3.csv('Medias.csv', function(error, csvData) { 
  if (error) throw error;
	
  // filter data
 
  
  // Declare scales
  
 
  var xScale = d3.scaleLinear()
              .domain([1, 6])
              .range([margin.left, width-margin.right]);
 
  var yScale = d3.scaleSqrt()
              .domain([0, 80000])
              .range([height-margin.bottom, margin.top]);
  
  var rScale = d3.scaleSqrt()
              .domain(d3.extent(csvData, function(d) { return +d.population; }))
              .range([5, 25]);
  
  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(['#ed2421', '#039969', '#e5e109', '#fbb754', '#d86498', '#6a0375', '#3882a6']);
  
  // Declara e inserta los ejes aquí!
  
  var xAxis = d3.axisBottom(xScale);
  var yAxis = d3.axisLeft(yScale);
 
  
  svg.append('g')
    .attr('class', 'x axis')
    .attr('transform', 'translate(' + 0 + ',' + yScale.range()[0] + ')')
    .call(xAxis);
  
    svg.append('g')
      .append("text")
      .attr("class", "label")
      .attr("x", width)
      .attr("dy", "33em")
      .style("text-anchor", "end")
      .style("font-size","12px")    
      .text("Nacimientos por mujer (Tasa de Fertilidad)");
  
  
    svg.append('g')
    .attr('class', 'y axis')
    .attr('transform', 'translate(' + xScale.range()[0] + ',' + 0 + ')')
     .call(yAxis);
  
     svg.append('g')
    .append("text")
    .attr("class", "label")
    .attr("transform", "rotate(-90)")
    .attr("dy", "-2em")
    .style("text-anchor", "end")
    .style("font-size","12px")  
    .text("GDP per capita (US$ Actuales)");
  

 
 var tooltip = d3.select('body').append('div')
  .style('position','absolute')
  .style('padding','0 10px')
  .style('opacity',0)
  .attr('class','tooltip')
 
  // Apend circles

  svg.selectAll('circle')
  	  .data(csvData)
  	  .enter()
  	.append('circle')
  	  .attr('cx', function(d) {return xScale(d.births_per_woman)})
      .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.7)
  	  .style('opacity', 0.7)
  
 .on('mouseover', function(d) {
      tooltip.transition()
        .style('opacity', .9)
        .style('background', 'transparent')
      tooltip.html(d.region+' ('+d.year+')')
        .style('left',(d3.event.pageX - 40) + 'px')
        .style('top', (d3.event.pageY - 25) + 'px')
   })
   .on('mouseout', function(d) {
      tooltip.transition()
        .style('opacity', 0)
})
});

line = svg.append("line")         // attach a line
    .style("stroke", "red")
    .style("stroke-dasharray", "1")  // colour the line
    .attr("x1", 170 + margin.left)     // x position of the first end of the line
    .attr("y1", 0)      // y position of the first end of the line
    .attr("x2", 170 + margin.left)     // x position of the second end of the line
    .attr("y2", 380);