// 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('worldbankdata.csv', function(error, csvData) { 
  if (error) throw error;
	
  // filter data
  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 != '..'; });
  
  // Declare scales
  var xScale = d3.scaleLinear()
              .domain([0, d3.max(csvData, function(d) { return d.cellular_subscriptions; })])
              .range([margin.left, width-margin.right]);
 
  var yScale = d3.scaleLinear()
              .domain([0, d3.max(csvData, function(d) { return d.gdp_capita; })])
              .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', '#fbb754', '#fbb754', '#d86498', '#14babd', '#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')
    .attr('class', 'y axis')
    .attr('transform', 'translate(' + xScale.range()[0] + ',' + 0 + ')')
    .call(yAxis); 
  
  // Apend circles

  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 () {
        d3.select(this)
          .transition()
          .duration(500)
          .attr('r',35)
          .attr('stroke-width',3)
      })
      .on('mouseout', function () {
        d3.select(this)
          .transition()
          .duration(500)
          .attr('r',10)
          .attr('stroke-width',1)
      })

  
 
  
});