// Se escribe el título

d3.select('#title')
	.append('h3')
	.text('¿Cuanto cuesta nuestra salud?');

d3.select('#summary')
	.text('La esperanza de vida de cada país está fuertemente ligada a la región del mundo a la que pertenezca. Una de estas causas es el gasto en sanidad que se hace en cada zona del mundo. En esta gráfica podemos ver cuanto es lo que se gasta en cada región por individuo al año en relación con la esperanza de vida promedio de este.');


// Se definen dimensiones


var margin = { top: 10, right:10, bottom: 10, left: 40 },
    width = 850 - margin.left - margin.right,
    height = 350 - margin.top - margin.bottom;


d3.select('#footer')
	.append('g')
	.attr('transform', 'translate(' + margin.left + ',0 )');


// Se inserta el svg


var svg = d3.select('#graphic')
    .append('svg')
    .attr('width', width + margin.left + margin.right) 
    .attr('height', height + margin.top + margin.bottom) 
  .append('g') 
    .attr('transform', 'translate(' + margin.left + ',' + (margin.top) + ')');


   // Viñeta

d3.csv('dataset.csv', function(error, data) {
  if (error) throw error;

var tooltip = d3.select("body").append("div")
    .attr("class", "stacked_tooltip")
    .style("opacity", 0);  
  
  
  // Se hace el escalado
  
  
  
var gastoScale = d3.scaleLinear()
					         //.domain([0,d3.min(data, function(d) { return d.gasto; })])
									 .domain([0,5300])
					         .range([height-margin.bottom, margin.top]);

var esperanzaScale = d3.scaleLinear()
					             .domain([d3.min(data, function(d) { return d.esperanza; })-5,
                                d3.max(data, function(d) { return d.esperanza; })-(-5)])
					             .range([height-margin.bottom, margin.top]);  
  
  
var regionScale = d3.scaleOrdinal()
              .domain(['','South Asia', 'Europe & Central Asia', 'Middle East & North Africa', 'East Asia & Pacific', 'Sub-Saharan Africa', 'Latin America & Caribbean', 'North America','']) 
              .range([40,100,200,300,400,500,600,700,760]);

  
  
  
  // Declaramos los eje
  
  var y1Axis = d3.axisLeft(esperanzaScale);
	var y2Axis = d3.axisRight(gastoScale);
  var xAxis = d3.axisBottom(regionScale);
  
  svg.append('g')
  	.attr('id','y2Axis')
  	.attr('transform', 'translate(' +( width + width -margin.left)+ ',0)')
  	.call(y2Axis);
  
  svg.append('g')
  	.attr('transform', 'translate(' + margin.left + ',0)')
  	.call(y1Axis);
  
  svg.append("text")
     .attr("text-anchor", "middle")
     .attr("transform", "translate("+ (0) +","+(height/2)+")rotate(-90)") 
     .text("Esperanza de vida (años)")
     .style("font-size", "15px");
  
  svg.append("text")
  	 .attr("id", "y2text")
     .attr("text-anchor", "middle")
     .attr("transform", "translate("+ ( width + width -margin.left) +","+(height/2)+")rotate(90)") 
     .text("Gasto en salud")
     .style("font-size", "15px");
  
    svg.append('g')
    .attr('id','xAxis')
  	.attr('transform', 'translate(0,'+ (height-margin.bottom)+ ')')
  	.call(xAxis);
  
  //Creamos las columnas
  
  
svg.append('g')
	 .attr('id','nuevas')
   .selectAll('rect')
 	 .data(data)
	 .enter()
	 .append('rect')
	 //.attr('id',function(d){return ( 'esperanza ' + d.region );} )
	 .attr('class', function(d){return d.gasto;})
   .attr('x', function(d) {return regionScale(d.region) - margin.left*0.7})
   //.attr('x', function(d,i) {return i*120+75})
   .attr('y', function(d) { return  height - margin.top; })
	 .attr('width', margin.left*1.4)
	 .attr('height', function(d) { return 0; })
	 .style('fill','#f81f10')
   .style('opacity', 1);
  
svg.append('g')
	 .attr('id','viejas')
   .selectAll('rect')
 	 .data(data)
	 .enter()
	 .append('rect')
	 //.attr('id',function(d){return ( 'esperanza ' + d.region );} )
	 .attr('class', function(d){return d.gasto;})
   .attr('x', function(d) {return regionScale(d.region) - margin.left*0.7})
   //.attr('x', function(d,i) {return i*120+75})
   .attr('y', function(d) { return  esperanzaScale(d.esperanza); })
	 .attr('width', margin.left*1.4)
	 .attr('height', function(d) { return height-margin.top- esperanzaScale(d.esperanza); })
	 .style('fill','#023D4A')
   .style('opacity', 0.5)
	 
   .on('mouseover', function(d) {
  
  
  		var thisdata = d3.select(this).data()[0];
  
  
//Columnas de gasto
  
  		svg.select('#nuevas')
         .selectAll('rect')
         .filter(function(d) { return d.region == thisdata.region; })
      	 .transition()
         .attr('y', function(d) { return  gastoScale(d.gasto); })
         .attr('height', function(d) { return height-margin.top- gastoScale(d.gasto); }) 
         .duration(500)
         
         .style('fill','#f81f10')
         .style('opacity', 1);
      	 

       
      
//Eje derecho      
      
        svg.select('#y2Axis')
           .transition()
           .duration(300)
  	       .attr('transform', 'translate(' +(regionScale(thisdata.region)+margin.left*0.7)+ ',0)')
  	       .call(y2Axis);
  
        svg.select("#y2text")
           .transition()
           .duration(300)
           .attr("transform", 'translate(' +(regionScale(thisdata.region) + margin.left*2) +","+(height/2)+")rotate(90)") 
           .text("Gasto en salud (USA $)");
  
//Etiqueta
  
  
      tooltip.transition()
          .duration(500)
          .style("opacity", .8);

      tooltip.html(thisdata.region + '<br> Gasto en salud: <strong>' + thisdata.gasto + '</strong> <br> Esperanza de Vida: <strong>' + thisdata.esperanza + '</strong> ')
          .style("left", (regionScale(thisdata.region))-160)
          .style("top",( gastoScale(thisdata.gasto) )); 
})



   .on('mouseout', function(d) {
  
        tooltip.transition()
          .duration(500)
          .style("opacity", 0);
  
        svg.select('#y2Axis')
           .transition()
           .duration(300)
  	       .attr('transform', 'translate(' +( width + width -margin.left)+ ',0)')
           .call(y2Axis);
  
  			svg.select("#y2text")
           .transition()
           .duration(300)
           .attr("transform", 'translate('+( width + width -margin.left)+","+(height/2)+")rotate(90)") 
           .text("Gasto en salud");
  
        svg.select('#nuevas')
           .selectAll('rect')
        	 .transition()
           .duration(300)
           .attr('y', function(d) { return height - margin.top; ; })
	         .attr('height', function(d) { return 0; })
        })
    
});