// 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 = 380 - 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('worldbankdata2015.csv', function(error, csvData) { 
  if (error) throw error;

  // filter data
  csvData = csvData.filter(function(d) { return d.literacy != '..'; });
  csvData = csvData.filter(function(d) { return d.internet_users != '..'; });
  csvData = csvData.filter(function(d) { return d.population != '..'; });
  
  // Declare scales
  var xScale = d3.scaleLinear()
              .domain([0, d3.max(csvData, function(d) { return d.literacy; })])
              .range([margin.left, width-margin.right-40]);
 
  var yScale = d3.scaleLinear()
              .domain([0, d3.max(csvData, function(d) { return d.internet_users; })])
              .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);

	// Append axis
	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', -10)
  	.text('literacy');

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

  // Apend circles
  svg.selectAll('circle')
  	.data(csvData)
  	.enter()
  	.append('circle')
  	.attr('cx', function(d) {return xScale(d.literacy)})
    .attr('cy', function(d) {return yScale(d.internet_users)})
  	.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){
    	d3.select(this)
      	.style('opacity', 1);
    
    	svg.append('text')
      	.attr('class', 'tooltip')
      	.attr('y', height + 5)
      	.text(d.country + ' (' + d.region +')')
		})
  	.on('mouseout', function(d){
    	d3.select(this)
      	.style('opacity', 0.7);
    
    	d3.select('.tooltip')
      	.remove();
		});
});