// Setup svg using Bostock's margin convention

var margin = {top: 28, right: 354, bottom: 35, left: 30};

var width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var svg = d3.select("body")
  .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 + ")");
  /* Data in strings like it would be if imported from a csv */
  
var data[
 {country:"China",health_expenditure:"419.73424056",life_expectancy:"75.7822682926829"},
  {country:"Indonesia",health_expenditure: "99.41035911",life_expectancy:"68.8884878048781"},
	{country:"Japan",health_expenditure: "3702.95277544",life_expectancy:"83.5878048780488"},
	{country:"Philippines",health_expenditure: "135.20222581",life_expectancy:"68.2656341463415"},
	{country:"Russian Federation",health_expenditure: "892.85156292",life_expectancy:"70.3658536585366"},
	{country:"Germany",health_expenditure: "5410.63463897",life_expectancy:"80.8439024390244"},
	{country:"Turkey",health_expenditure: "567.63112672",life_expectancy:"75.163512195122"},
	{country:"France",health_expenditure: "4958.98922627",life_expectancy:"82.3731707317073"},
	{country:"United Kingdom",health_expenditure: "3934.82356101",life_expectancy:"81.0560975609756"},
	{country:"Italy",health_expenditure: "3257.7534099",life_expectancy:"82.690243902439"},
	{country:"Spain",health_expenditure: "2658.27042388",life_expectancy:"83.0780487804878"},
	{country:"Argentina",health_expenditure: "605.1878448",life_expectancy:"76.1586097560976"},
	{country:"Peru",health_expenditure: "358.5769444",life_expectancy:"74.5255365853659"},
{country:"Venezuela, RB",health_expenditure: "873.38432219",life_expectancy:"74.2361951219512"},
	{country:"Chile",health_expenditure: "1137.35626532",life_expectancy:"81.4961951219512"},
	{country:"Egypt, Arab Rep.",health_expenditure: "177.76836063",life_expectancy:"71.1217073170732"},
	{country:"Iran, Islamic Rep.",health_expenditure: "350.7386071",life_expectancy:"75.3893170731708"},
{country:"Algeria",health_expenditure: "361.7291743",life_expectancy:"74.8080975609756"},
	{country:"Iraq",health_expenditure: "292.00437883",life_expectancy:"69.3996829268293"},
	{country:"United States",health_expenditure: "9402.53697133",life_expectancy:"78.9414634146341"},
	{country:"Canada",health_expenditure: "5291.74613048",life_expectancy:"81.9566097560976"},
	{country:"India",health_expenditure: "74.99460433",life_expectancy:"68.0138048780488"},
	{country:"Pakistan",health_expenditure: "36.15485065",life_expectancy:"66.1833658536585"},
	{country:"Bangladesh",health_expenditure: "30.83346991",life_expectancy:"71.6259024390244"},
	{country:"Afghanistan",health_expenditure: "56.57452735",life_expectancy:"60.3744634146342"},
	{country:"Nigeria",health_expenditure: "117.52054496",life_expectancy:"52.7542682926829"},
	{country:"Ethiopia",health_expenditure: "26.64777614",life_expectancy:"64.0350243902439"},
	{country:"Congo, Dem. Rep.",health_expenditure: "19.0536902",life_expectancy:"58.6591951219512"},
	{country:"South Africa",health_expenditure: "570.20607359",life_expectancy:"57.1821219512195"},
];

// Transpose the data into layers
var dataset = d3.layout.stack()(["health_expenditure", "life_expectancy"].map(function(fruit) {
  return data.map(function(d) {
    return {x: parse(d.country), y: +d[fruit]};
  });
}));
  // Set x, y and colors
var x = d3.scale.ordinal()
  .domain(dataset[0].map(function(d) { return d.x; }))
  .rangeRoundBands([10, width-10], 0.02);

var y = d3.scale.linear()
  .domain([0, d3.max(dataset, function(d) {  return d3.max(d, function(d) { return d.y0 + d.y; });  })])
  .range([height, 0]);

var colors = ["b33040", "#d25c4d", "#f2b447", "#d9d574"];


// Define and draw axes
var xAxis = d3.axisBottom(xScale);
	var yAxis = d3.axisLeft(yScale);
var yAxis = d3.svg.axis()
  .scale(y)
  .orient("left")
  .ticks(5)
  .tickSize(-width, 0, 0)
  .tickFormat( function(d) { return d } );

var xAxis = d3.svg.axis()
  .scale(x)
  .orient("bottom")
  .tickFormat(d3.time.format("%Y"));

svg.append("g")
  .attr("class", "y axis")
  .call(yAxis);
  svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis);


// Create groups for each series, rects for each segment 
var groups = svg.selectAll("g.cost")
  .data(dataset)
  .enter().append("g")
  .attr("class", "cost")
  .style("fill", function(d, i) { return colors[i]; });

var rect = groups.selectAll("rect")
  .data(function(d) { return d; })
  .enter()
  .append("rect")
  .attr("x", function(d) { return x(d.x); })
  .attr("y", function(d) { return y(d.y0 + d.y); })
  .attr("height", function(d) { return y(d.y0) - y(d.y0 + d.y); })
  .attr("width", x.rangeBand())
  .on("mouseover", function() { tooltip.style("display", null); })
  .on("mouseout", function() { tooltip.style("display", "none"); })
  .on("mousemove", function(d) {var xPosition = d3.mouse(this)[0] - 15;
    var yPosition = d3.mouse(this)[1] - 25;
    tooltip.attr("transform", "translate(" + xPosition + "," + yPosition + ")");
    tooltip.select("text").text(d.y);
  });


// Draw legend
var legend = svg.selectAll(".legend")
  .data(colors)
  .enter().append("g")
  .attr("class", "legend")
  .attr("transform", function(d, i) { return "translate(30," + i * 19 + ")"; });
 
legend.append("rect")
  .attr("x", width - 18)
  .attr("width", 18)
  .attr("height", 18)
  .style("fill", function(d, i) {return colors.slice().reverse()[i];});
 
legend.append("text")
  .attr("x", width + 5)
  .attr("y", 9)
  .attr("dy", ".35em")
  .style("text-anchor", "start")
  .text(function(d, i) { 
    switch (i) {
      case 0: return "Inversión en sanidad";
      case 1: return "Esperanza de vida";
    }
  });
  // Prep the tooltip bits, initial display is hidden
var tooltip = svg.append("g")
  .attr("class", "tooltip")
  .style("display", "none");
    
tooltip.append("rect")
  .attr("width", 30)
  .attr("height", 20)
  .attr("fill", "white")
  .style("opacity", 0.5);

tooltip.append("text")
  .attr("x", 15)
  .attr("dy", "1.2em")
  .style("text-anchor", "middle")
  .attr("font-size", "12px")
  .attr("font-weight", "bold");