// Cógido

// Definición de las dimensiones
var margin = { top: 10, right:10, bottom: 40, left: 40 },
    width = 850 - margin.left - margin.right,
    height = 450 - margin.top - margin.bottom;

// 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 + ')'); 


d3.csv('MediasDecada.csv', function(error, csvData) { 
    
  if (error) throw error;
	
  
// Escalas
 
  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([4, 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'])
              .range(['#ed2421', '#039969', '#e5e109', '#fbb754', '#d86498', '#6a0375', '#3882a6']);
 
 
// Ejes
 
  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)");
  
// Tooltip
  var tooltip = d3.select('body').append('div')
    .style('position','absolute')
    .style('padding','0 10px')
    .style('opacity',0)
    .attr('class','tooltip')
  
// Circulos
  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)
 
// Mouseover - Mouseout - transition
    .on('mouseover', function(d) {
      tooltip.transition()
        .style('opacity', 0.9)

      tooltip.html('<b/>'+d.region+' ('+d.year+')'+'<br/>GDP per capita: '+d3.format(".2f")(d.gdp_capita/1000)+'k US$ '+'<br/>Tasa Fertilidad: '+d3.format(".2f")(d.births_per_woman)+'<br/>Población: '+d3.format(".2f")(d.population/1000000)+' mill. habitantes')
        .style('left',(600) + 'px')
        .style('top', (300) + 'px')
   })
    .on('mouseout', function(d) {
      tooltip.transition()
        .style('opacity', 0)
})
});

// Linea ab (Tasa de Reemplazo)
  line = svg.append("line")      
    .style("stroke", "red")
    .style("stroke-dasharray", "1")  
    .attr("x1", 170 + margin.left)   
    .attr("y1", 0)     
    .attr("x2", 170 + margin.left)      
    .attr("y2", 380);