lmelgar · November 16, 2015 20:51
diff --git a/diarrhoeal.csv b/diarrhoeal.csv
diff --git a/graph1.js b/graph1.js
 var margin = {top: 20, right: 185, bottom: 130, left: 70};
 var width = 1000 - margin.left - margin.right;
 var height = 550 - margin.top - margin.bottom;

 var xScale = d3.scale.ordinal()
    .rangeRoundBands([0, width], .3);

 var yScale = d3.scale.linear()
    .rangeRound([height, 0]);

 /*var color = d3.scale.category20();*/

 var color = d3.scale.ordinal().range(["#8C703A", "#ABACDB", "#B574B5", "#DBABC4", "#DBBFAB", "#ACD7E3", "#E6E687", "#FA9D91", "#D6C789", "#72A886", "#8A5F76", "#92A147", "#E3E2AF", "#A5BBD1"]);

 var tooltip = d3.select("#graph1")
    .append("div")
    .attr("class", "tooltip");

 var percentClicked = false;

 var xAxis = d3.svg.axis()
  .scale(xScale)
  .orient("bottom")
  .innerTickSize([0]);

 var yAxis = d3.svg.axis()
  .scale(yScale)
  .orient("left");
  /*.innerTickSize(d3.format(".1"))*/;

 var stack = d3.layout
  .stack();

 var svg = d3.select("#graph1").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 + ")");

 d3.csv("diarrhoeal.csv", function(error, data) {

  if (error) {
    console.log(error);
  }

  my2013 = [];
        data.forEach(function (d) {
            if (d.year === "2013" && d.region === "Sub-Saharan Africa" /*|| d.region === "Middle East & North Africa" || d.region === "East Asia & Pacific"*/) {
            my2013.push(d);
              }
            });

            console.log(my2013);


  data.sort(function(a,b) {
    return b.country - b.country;
  });

 var illnesses = ["Diarrhoeal diseases","HIV","Pertussis","Measles","Meningitis and encephalitis","Malaria","Respiratory infections","Prematurity","Birth asphixia","Sepsis and infections","Perinatal and nutritional", "Congenital anomalies","Injuries","Other"];



 var stacked = stack(makeData(illnesses, my2013));

            console.log(stacked);

 xScale.domain(my2013.map(function(d) {
  return d.country;
 }));

 svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis)
    .selectAll("text")
      .attr("dy", ".5em")
      .attr("transform", "rotate(-45)")
      .style("text-anchor", "end");

 svg.append("g")
    .attr("class", "y axis")
    .call(yAxis)
    .append("text")
      .attr("class", "y label")
      .attr("transform", "rotate(-90)")
      .attr("y", -60)
      .attr("dy", ".5em")
      .attr("dx", 5)
      .style("text-anchor", "end")
      .text("Mortality rate under 5");

 var country = svg.selectAll(".country")
    .data(stacked)
    .enter().append("g")
        .attr("class", "country")
        .style("fill", function(d,i) {
            return color(i);
        });

 var rectangles = country.selectAll("rect")
      .data(function(d) {
        console.log("array for a rectangle", d);
        return d;
      })
      .enter().append("rect")
        .attr("width", xScale.rangeBand());

  transitionCount();

  drawLegend();

  d3.selectAll("input").on("change", handleFormClick);

  function handleFormClick() {
      if (this.value === "bypercent") {
          percentClicked = true;
          transitionPercent();
      } else {
          percentClicked = false;
          transitionCount();
      }
  }

  function makeData(illnesses, data) {
    return illnesses.map(function(illness) {
      return data.map(function(d) {
        return {
          x: d["country"],
          y: +d[illness],
          illness: illness
      };
      })
    });
  }



  function transitionPercent () {
    yAxis.tickFormat(d3.format("%"));
    stack.offset("expand"); // use this to get it to be relative/normalized!
    var stacked = stack(makeData(illnesses, my2013));
    transitionRects(stacked);
  }

  function transitionCount() {
    yAxis.tickFormat(d3.format("s")); // for the stacked totals version
    stack.offset("zero");
    var stacked = stack(makeData(illnesses, my2013));
    transitionRects(stacked);
  }


  function transitionRects(stacked) {
    yScale.domain([0, d3.max(stacked[stacked.length -1], function(d) {
      return d.y0 + d.y;
    })]);

    var country = svg.selectAll(".country")
      .data(stacked);

    country.selectAll("rect")
      .data(function(d) {
        return d;
      })

    svg.selectAll("g.country rect")
      .transition()
      .duration(350)
      .attr("x", function(d) {
        return xScale(d.x);
      })
      .attr("y", function(d) {
        return yScale(d.y0 + d.y);
      })
      .attr("height", function(d) {
        return yScale(d.y0) - yScale(d.y0 + d.y); //height is base - tallness
      });
    svg.selectAll(".y.axis")
      .transition()
      .call(yAxis)
      .selectAll("text")
        .style("text-anchor", "end");
  }

  function drawLegend() {
    var legend = svg.selectAll(".legend")
        .data(color.domain().slice())
        .enter().append("g")
        .attr("class", "legend")
        .attr("transform", function(d,i){
          return "translate(0," + i * 20 + ")";
        });

     legend.append("rect")
        .attr("x", width + 15)
        .attr("width", 15)
        .attr("height", 15)
        .style("fill", color);

      legend.append("text")
         .attr("x", width + 44)
         .attr("y", 6)
         .attr("dy", ".5em")
         .style("text-anchor", "start")
         .text(function(d, i) {
           return illnesses[i];
         });
  }

  //tooltip and interaction

  rectangles
          .on("mouseover", mouseoverFunc)
          .on("mousemove", mousemoveFunc)
          .on("mouseout", mouseoutFunc);


      function mouseoverFunc(d) {
        console.log("moused over", d.x);
          if(percentClicked) {
              tooltip
              .style("display", null)
              .html("<p><span class='tooltipHeader'>" + d.x + "</span><br><strong>"+ d.illness + ": " + d3.format(",%")(d.y) + "</strong></p>");
          } else {
                           console.log("illness", d.illness, "percent", d.y);
          tooltip
              .style("display", null)
              .html("<p><span class='tooltipHeader'>" + d.x + "</span><br><strong>"+ d.illness + ": " + (d.y) + "</strong></p>");
          }
      }

      function mousemoveFunc(d) {
          tooltip
              .style("top", (d3.event.pageY - 5) + "px")
              .style("left", (d3.event.pageX + 10) + "px");
      }

      function mouseoutFunc(d) {
          return tooltip.style("display", "none"); // this sets it to invisible!
      }


 });
diff --git a/graph2.js b/graph2.js
 var margin = {top: 20, right: 120, bottom: 120, left: 70};
 var width = 1000 - margin.left - margin.right;
 var height = 650 - margin.top - margin.bottom;

 var dotRadius = 5;

 		var xScale = d3.scale.sqrt()
 			.range([ margin.left, width - margin.right - margin.left ]);

 		var yScale = d3.scale.linear()
 			.range([ height - margin.bottom, margin.top ]);

 		var xAxis = d3.svg.axis()
 			.scale(xScale)
 			.orient("bottom")
 			.ticks(5);

 		var yAxis = d3.svg.axis()
 			.scale(yScale)
 			.orient("left")
 			.ticks(5);

 		var svg = d3.select("#graph2")
 			.append("svg")
 			.attr("width", width)
 			.attr("height", height);

 		var tooltip = d3.select("#graph2")
 	     .append("div")
 	     .attr("class", "tooltip");

 		d3.csv("water.csv", function(data) {


 			xScale.domain([
 	  				d3.min(data, function(d) {
 	  					return +d.Total_drinking;
 	  				}) - 2,
 	  				d3.max(data, function (d) {
 	  					return +d.Total_drinking;
 	  				}) + 2
  				]);
  		yScale.domain([
 	  				d3.min(data, function(d) {
 	  					return +d.rate;
 	  				}) - 5,
 	  				d3.max(data, function (d) {
 	  					return +d.rate;
 	  				}) + 5
  				]);

 			var circles = svg.selectAll("circle")
 				.data(data)
 				.enter()
 				.append("circle")
 				.attr("class", "dots");


 			circles.attr("cx", function(d) {
 					return xScale(+d.Total_drinking);
 				})
 				.attr("cy", function(d) {
 					return yScale(+d.rate);
 				})
 					.attr("r", dotRadius)  // you might want to increase your dotRadius
 					/*.attr("fill", "rgba(0,128,255,1)");*/
 					.attr("fill", function(d) {

 							if (d.country === "Angola") {
 								return "#B574B5";
 							}

 							else {
 								return "#B8C76D";
 							}

 					});

 			circles
 						.on("mouseover", mouseoverFunc)
 						.on("mousemove", mousemoveFunc)
 						.on("mouseout", mouseoutFunc);

 				// fix these translates so they use your margin and height width as needed
 				svg.append("g")
 					.attr("class", "x axis")
 					.attr("transform", "translate(0," + (height - margin.bottom) + ")")
 					.call(xAxis);
 				svg.append("g")
 					.attr("class", "y axis")
 					.attr("transform", "translate(" + (margin.left) + ",0)")
 					.call(yAxis);

 					svg.append("text")
 							.attr("class", "x label")
 		        	.attr("transform", "translate(" + (margin.left + width / 3.5) + " ," +
 		        				(height / 1.3 + margin.bottom) + ")")
 		        	.style("text-anchor", "middle")
 		        	.attr("dy", "35")
 		        	.text("Population using improved drinking-water sources");

 					svg.append("text")
 							.attr("class", "y label")
 	 						.attr("transform", "translate(" + (margin.right + width / 6) + " ," +
 										(height / 2.65 + margin.top) + ") rotate(-90)")
 							.style("text-anchor", "middle")
 							.attr("dy", "-57")
 							.text("Infant Mortality rate");
 			});

 			// add tooltip actions

 				function mouseoverFunc(d) {
 					// console.log(d);
 					return tooltip
 						.style("display", null) // this removes the display none setting from it
 						.html("<p>" + "<span>" + d.country + "</span>" +
 								  "<br>Infant mortality rate: " + "<span>" + d3.format("s")(d.rate) + "</span>" +
 									"<br>Population using improved drinking-water sources: <span>%" + d.Total_drinking + "</span>" + "</p>");
 					}
 				function mousemoveFunc(d) {
 					//console.log("events", window.event, d3.event);
 					return tooltip
 						.style("top", (d3.event.pageY - 10) + "px" )
 						.style("left", (d3.event.pageX + 10) + "px");
 				}
 				function mouseoutFunc(d) {
 			    return tooltip.style("display", "none");  // this sets it to invisible!
 			  }
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <!-- A modified example from Scott Murray's Knight d3 course. -->

 <html lang="en">
 	<head>
 		<meta charset="utf-8">
 		<title>Infant Mortality and Health Expenditure</title>
 		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>

 		<style>
 	  @import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700);


 	  body {
 	    font-family: "Open Sans", Helvetica, sans-serif;
 	    font-size: 13px;
 	    padding: 50px;
 	  }

 	  #form {
 	        position: relative;
 	        right: 10px;
 	        top: 10px;
 	        padding-bottom: 20px;
 	  }

 	  .axis path,
 	  .axis line {
 	    fill: none;
 	    stroke: #000;
 	    shape-rendering: crispEdges;
 	  }

 	  .bar {
 	    fill: steelblue;
 	  }

 	  text {
 	    font-size: 11px;
 	  }

 	  .x.axis path {
 	    display: none;
 	  }

 	  .axis text {
 	    font-size: 11px;
 	    fill: rgba(75,75,75,1);
 	    margin-right: 10px;
 	  }


 	  .tooltip {
 	    position: absolute;
 	    z-index: 10;
 	    opacity:1;
 	  }
 	  .tooltip p {
 	    font-family: "Open Sans", sans-serif;
 	    line-height: 1.4;
 	    color: black;
 	    font-size: 13px;
 			background-color: rgba(255,255,255,0.8);
 			border: rgba(230,230,230,1) 1px solid;
 			padding: 5px 7px 5px 7px;
 	  }



 	  </style>
 	</head>
 	<body>

 		<div id="text">
 		<h1>Infant Mortality vs. Health Expenditure in 2013</h1>

 			<p>This scatterplot shows infant mortality by country in 2013, among children under 5 years-old, compared to the health expedenditure per capita.</p>
 			<p>According to the World Bank, the health expenditure "is the sum of public and private health expenditures as a ratio of total population. It covers the provision of health services (preventive and curative), family planning activities, nutrition activities, and emergency aid designated for health."
 			<div id="source">
 				<p>Source: <a href="http://www.who.int/gho/en/">Global Health Observatory (GHO)</a> and <a href="http://data.worldbank.org/">World Bank</a>.</p>
 			</div>
 		</div>
 		<div id="form">
 			<label><input type="radio" name="mode" value="bycount" checked>Raw Count</label>
 			<label><input type="radio" name="mode" value="bypercent">Percent of Illness</label>
 		</div>
 		<div id="graph1"></div>
 		<p>Otro grafico</p>
 		<p>Otro grafico</p>
 		<div id="graph2"></div>
 		<div id="graph3"></div>
 	</body>


 	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
 	<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
 	<script src="http://d3js.org/queue.v1.min.js"></script>
 	<script src="graph1.js"></script>
 	<script src="graph2.js"></script>
 </html>
diff --git a/water.csv b/water.csv
	var margin = {top: 20, right: 185, bottom: 130, left: 70};
	var width = 1000 - margin.left - margin.right;
	var height = 550 - margin.top - margin.bottom;

	var xScale = d3.scale.ordinal()
	.rangeRoundBands([0, width], .3);

	var yScale = d3.scale.linear()
	.rangeRound([height, 0]);

	/var color = d3.scale.category20();/

	var color = d3.scale.ordinal().range(["#8C703A", "#ABACDB", "#B574B5", "#DBABC4", "#DBBFAB", "#ACD7E3", "#E6E687", "#FA9D91", "#D6C789", "#72A886", "#8A5F76", "#92A147", "#E3E2AF", "#A5BBD1"]);

	var tooltip = d3.select("#graph1")
	.append("div")
	.attr("class", "tooltip");

	var percentClicked = false;

	var xAxis = d3.svg.axis()
	.scale(xScale)
	.orient("bottom")
	.innerTickSize([0]);

	var yAxis = d3.svg.axis()
	.scale(yScale)
	.orient("left");
	/.innerTickSize(d3.format(".1"))/;

	var stack = d3.layout
	.stack();

	var svg = d3.select("#graph1").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 + ")");

	d3.csv("diarrhoeal.csv", function(error, data) {

	if (error) {
	console.log(error);
	}

	my2013 = [];
	data.forEach(function (d) {
	if (d.year === "2013" && d.region === "Sub-Saharan Africa" /\|\| d.region === "Middle East & North Africa" \|\| d.region === "East Asia & Pacific"/) {
	my2013.push(d);
	}
	});

	console.log(my2013);


	data.sort(function(a,b) {
	return b.country - b.country;
	});

	var illnesses = ["Diarrhoeal diseases","HIV","Pertussis","Measles","Meningitis and encephalitis","Malaria","Respiratory infections","Prematurity","Birth asphixia","Sepsis and infections","Perinatal and nutritional", "Congenital anomalies","Injuries","Other"];



	var stacked = stack(makeData(illnesses, my2013));

	console.log(stacked);

	xScale.domain(my2013.map(function(d) {
	return d.country;
	}));

	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis)
	.selectAll("text")
	.attr("dy", ".5em")
	.attr("transform", "rotate(-45)")
	.style("text-anchor", "end");

	svg.append("g")
	.attr("class", "y axis")
	.call(yAxis)
	.append("text")
	.attr("class", "y label")
	.attr("transform", "rotate(-90)")
	.attr("y", -60)
	.attr("dy", ".5em")
	.attr("dx", 5)
	.style("text-anchor", "end")
	.text("Mortality rate under 5");

	var country = svg.selectAll(".country")
	.data(stacked)
	.enter().append("g")
	.attr("class", "country")
	.style("fill", function(d,i) {
	return color(i);
	});

	var rectangles = country.selectAll("rect")
	.data(function(d) {
	console.log("array for a rectangle", d);
	return d;
	})
	.enter().append("rect")
	.attr("width", xScale.rangeBand());

	transitionCount();

	drawLegend();

	d3.selectAll("input").on("change", handleFormClick);

	function handleFormClick() {
	if (this.value === "bypercent") {
	percentClicked = true;
	transitionPercent();
	} else {
	percentClicked = false;
	transitionCount();
	}
	}

	function makeData(illnesses, data) {
	return illnesses.map(function(illness) {
	return data.map(function(d) {
	return {
	x: d["country"],
	y: +d[illness],
	illness: illness
	};
	})
	});
	}



	function transitionPercent () {
	yAxis.tickFormat(d3.format("%"));
	stack.offset("expand"); // use this to get it to be relative/normalized!
	var stacked = stack(makeData(illnesses, my2013));
	transitionRects(stacked);
	}

	function transitionCount() {
	yAxis.tickFormat(d3.format("s")); // for the stacked totals version
	stack.offset("zero");
	var stacked = stack(makeData(illnesses, my2013));
	transitionRects(stacked);
	}


	function transitionRects(stacked) {
	yScale.domain([0, d3.max(stacked[stacked.length -1], function(d) {
	return d.y0 + d.y;
	})]);

	var country = svg.selectAll(".country")
	.data(stacked);

	country.selectAll("rect")
	.data(function(d) {
	return d;
	})

	svg.selectAll("g.country rect")
	.transition()
	.duration(350)
	.attr("x", function(d) {
	return xScale(d.x);
	})
	.attr("y", function(d) {
	return yScale(d.y0 + d.y);
	})
	.attr("height", function(d) {
	return yScale(d.y0) - yScale(d.y0 + d.y); //height is base - tallness
	});
	svg.selectAll(".y.axis")
	.transition()
	.call(yAxis)
	.selectAll("text")
	.style("text-anchor", "end");
	}

	function drawLegend() {
	var legend = svg.selectAll(".legend")
	.data(color.domain().slice())
	.enter().append("g")
	.attr("class", "legend")
	.attr("transform", function(d,i){
	return "translate(0," + i * 20 + ")";
	});

	legend.append("rect")
	.attr("x", width + 15)
	.attr("width", 15)
	.attr("height", 15)
	.style("fill", color);

	legend.append("text")
	.attr("x", width + 44)
	.attr("y", 6)
	.attr("dy", ".5em")
	.style("text-anchor", "start")
	.text(function(d, i) {
	return illnesses[i];
	});
	}

	//tooltip and interaction

	rectangles
	.on("mouseover", mouseoverFunc)
	.on("mousemove", mousemoveFunc)
	.on("mouseout", mouseoutFunc);


	function mouseoverFunc(d) {
	console.log("moused over", d.x);
	if(percentClicked) {
	tooltip
	.style("display", null)
	.html("<p><span class='tooltipHeader'>" + d.x + "</span><br><strong>"+ d.illness + ": " + d3.format(",%")(d.y) + "</strong></p>");
	} else {
	console.log("illness", d.illness, "percent", d.y);
	tooltip
	.style("display", null)
	.html("<p><span class='tooltipHeader'>" + d.x + "</span><br><strong>"+ d.illness + ": " + (d.y) + "</strong></p>");
	}
	}

	function mousemoveFunc(d) {
	tooltip
	.style("top", (d3.event.pageY - 5) + "px")
	.style("left", (d3.event.pageX + 10) + "px");
	}

	function mouseoutFunc(d) {
	return tooltip.style("display", "none"); // this sets it to invisible!
	}


	});
	var margin = {top: 20, right: 120, bottom: 120, left: 70};
	var width = 1000 - margin.left - margin.right;
	var height = 650 - margin.top - margin.bottom;

	var dotRadius = 5;

	var xScale = d3.scale.sqrt()
	.range([ margin.left, width - margin.right - margin.left ]);

	var yScale = d3.scale.linear()
	.range([ height - margin.bottom, margin.top ]);

	var xAxis = d3.svg.axis()
	.scale(xScale)
	.orient("bottom")
	.ticks(5);

	var yAxis = d3.svg.axis()
	.scale(yScale)
	.orient("left")
	.ticks(5);

	var svg = d3.select("#graph2")
	.append("svg")
	.attr("width", width)
	.attr("height", height);

	var tooltip = d3.select("#graph2")
	.append("div")
	.attr("class", "tooltip");

	d3.csv("water.csv", function(data) {


	xScale.domain([
	d3.min(data, function(d) {
	return +d.Total_drinking;
	}) - 2,
	d3.max(data, function (d) {
	return +d.Total_drinking;
	}) + 2
	]);
	yScale.domain([
	d3.min(data, function(d) {
	return +d.rate;
	}) - 5,
	d3.max(data, function (d) {
	return +d.rate;
	}) + 5
	]);

	var circles = svg.selectAll("circle")
	.data(data)
	.enter()
	.append("circle")
	.attr("class", "dots");


	circles.attr("cx", function(d) {
	return xScale(+d.Total_drinking);
	})
	.attr("cy", function(d) {
	return yScale(+d.rate);
	})
	.attr("r", dotRadius) // you might want to increase your dotRadius
	/.attr("fill", "rgba(0,128,255,1)");/
	.attr("fill", function(d) {

	if (d.country === "Angola") {
	return "#B574B5";
	}

	else {
	return "#B8C76D";
	}

	});

	circles
	.on("mouseover", mouseoverFunc)
	.on("mousemove", mousemoveFunc)
	.on("mouseout", mouseoutFunc);

	// fix these translates so they use your margin and height width as needed
	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + (height - margin.bottom) + ")")
	.call(xAxis);
	svg.append("g")
	.attr("class", "y axis")
	.attr("transform", "translate(" + (margin.left) + ",0)")
	.call(yAxis);

	svg.append("text")
	.attr("class", "x label")
	.attr("transform", "translate(" + (margin.left + width / 3.5) + " ," +
	(height / 1.3 + margin.bottom) + ")")
	.style("text-anchor", "middle")
	.attr("dy", "35")
	.text("Population using improved drinking-water sources");

	svg.append("text")
	.attr("class", "y label")
	.attr("transform", "translate(" + (margin.right + width / 6) + " ," +
	(height / 2.65 + margin.top) + ") rotate(-90)")
	.style("text-anchor", "middle")
	.attr("dy", "-57")
	.text("Infant Mortality rate");
	});

	// add tooltip actions

	function mouseoverFunc(d) {
	// console.log(d);
	return tooltip
	.style("display", null) // this removes the display none setting from it
	.html("<p>" + "<span>" + d.country + "</span>" +
	"<br>Infant mortality rate: " + "<span>" + d3.format("s")(d.rate) + "</span>" +
	"<br>Population using improved drinking-water sources: <span>%" + d.Total_drinking + "</span>" + "</p>");
	}
	function mousemoveFunc(d) {
	//console.log("events", window.event, d3.event);
	return tooltip
	.style("top", (d3.event.pageY - 10) + "px" )
	.style("left", (d3.event.pageX + 10) + "px");
	}
	function mouseoutFunc(d) {
	return tooltip.style("display", "none"); // this sets it to invisible!
	}
	<!DOCTYPE html>
	<!-- A modified example from Scott Murray's Knight d3 course. -->

	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Infant Mortality and Health Expenditure</title>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>

	<style>
	@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700);


	body {
	font-family: "Open Sans", Helvetica, sans-serif;
	font-size: 13px;
	padding: 50px;
	}

	#form {
	position: relative;
	right: 10px;
	top: 10px;
	padding-bottom: 20px;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}

	.bar {
	fill: steelblue;
	}

	text {
	font-size: 11px;
	}

	.x.axis path {
	display: none;
	}

	.axis text {
	font-size: 11px;
	fill: rgba(75,75,75,1);
	margin-right: 10px;
	}


	.tooltip {
	position: absolute;
	z-index: 10;
	opacity:1;
	}
	.tooltip p {
	font-family: "Open Sans", sans-serif;
	line-height: 1.4;
	color: black;
	font-size: 13px;
	background-color: rgba(255,255,255,0.8);
	border: rgba(230,230,230,1) 1px solid;
	padding: 5px 7px 5px 7px;
	}



	</style>
	</head>
	<body>

	<div id="text">
	<h1>Infant Mortality vs. Health Expenditure in 2013</h1>

	<p>This scatterplot shows infant mortality by country in 2013, among children under 5 years-old, compared to the health expedenditure per capita.</p>
	<p>According to the World Bank, the health expenditure "is the sum of public and private health expenditures as a ratio of total population. It covers the provision of health services (preventive and curative), family planning activities, nutrition activities, and emergency aid designated for health."
	<div id="source">
	<p>Source: <a href="http://www.who.int/gho/en/">Global Health Observatory (GHO)</a> and <a href="http://data.worldbank.org/">World Bank</a>.</p>
	</div>
	</div>
	<div id="form">
	<label><input type="radio" name="mode" value="bycount" checked>Raw Count</label>
	<label><input type="radio" name="mode" value="bypercent">Percent of Illness</label>
	</div>
	<div id="graph1"></div>
	<p>Otro grafico</p>
	<p>Otro grafico</p>
	<div id="graph2"></div>
	<div id="graph3"></div>
	</body>


	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
	<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
	<script src="http://d3js.org/queue.v1.min.js"></script>
	<script src="graph1.js"></script>
	<script src="graph2.js"></script>
	</html>
country	rate	Rural_drinking	Urban_drinking	Total_drinking	Rural_sanitation	Urban_sanitation	Total_sanitation
Afghanistan	99.3	56	90	64	23	47	29
Albania	15.4	94	97	96	86	95	91
Algeria	25.4	79	85	84	88	98	95
Andorra	2.9	100	100	100	100	100	100
Angola	171.1	34	68	54	20	87	60
Antigua and Barbuda	9.6	98	98	98
Argentina	13.7	95	99	99	99	97	97
Armenia	16.5	100	100	100	81	96	91
Australia	4.3	100	100	100	100	100	100
Austria	4.0	100	100	100	100	100	100
Azerbaijan	35.1	71	88	80	78	86	82
Bahamas	13.2	98	98	98	92	92	92
Bahrain	6.7	100	100	100	99	99	99
Bangladesh	43.3	84	86	85	58	55	57
Barbados	14.4	100	100	100
Belarus	5.2	99	100	100	95	94	94
Belgium	4.4	100	100	100	100	100	100
Belize	17.2	100	98	99	88	94	91
Benin	86.5	69	85	76	5	25	14
Bhutan	37.8	97	99	98	31	75	47
Bolivia	40.2	72	96	88	24	57	46
Bosnia and Herzegovina	6.9	99	100	100	92	99	95
Botswana	47.0	93	99	97	42	78	64
Brazil	14.4	85	100	98	49	87	81
Bulgaria	12.0	99	100	99	100	100	100
Burkina Faso	99.8	76	97	82	7	50	19
Burundi	82.7	73	92	75	48	43	47
Cote d'Ivoire	100.1	68	92	80	10	33	22
Cabo Verde	26.7	86	91	89	47	75	65
Cambodia	38.7	66	94	71	25	82	37
Cameroon	96.3	52	94	74	27	62	45
Canada	5.3	99	100	100	99	100	100
Central African Republic	141.3	54	90	68	7	44	22
Chad	147.7	45	72	51	6	31	12
Chile	8.4	91	100	99	89	100	99
China	13.3	85	98	92	56	74	65
Colombia	17.4	74	97	91	66	85	80
Comoros	79.2	97
Congo	51.1	39	96	75	6	20	15
Cook Islands	7.9	100	100	100	97	97	97
Costa Rica	9.8	91	100	97	92	95	94
Croatia	4.8	97	100	99	98	99	98
Cuba	6.6	87	96	94	88	94	93
Cyprus	3.6	100	100	100	100	100	100
Czech Republic	3.9	100	100	100	100	100	100
North Korea	28.6	97	99	98	73	88	82
Democratic Republic of the Congo	119.4	29	79	46	33	29	31
Denmark	3.6	100	100	100	100	100	100
Djibouti	84.7	65	100	92	22	73	61
Dominica	11.3		96
Dominican Republic	29.2	77	82	81	74	86	82
Ecuador	23.0	75	92	86	76	86	83
Egypt	22.0	99	100	99	94	98	96
El Salvador	16.0	81	95	90	53	80	70
Eritrea	52.8				4
Estonia	3.7	98	100	99	94	96	95
Ethiopia	66.1	42	97	52	23	27	24
Fiji	23.8	92	100	96	82	92	87
Finland	2.7	100	100	100	100	100	100
France	4.3	100	100	100	100	100	100
Gabon	56.9	63	97	92	32	43	41
Gambia	73.8	84	94	90	55	64	60
Georgia	14.0	97	100	99	91	96	93
Germany	4	100	100	100	100	100	100
Ghana	79.1	81	93	87	8	20	14
Greece	4.5	99	100	100	97	99	99
Grenada	12.3	95	99	97	98	98	98
Guatemala	32.0	89	99	94	72	88	80
Guinea	103.3	65	92	75	11	33	19
Guinea-Bissau	125.7	56	96	74	8	34	20
Guyana	38.4	98	97	98	82	88	84
Haiti	74.6	47	75	62	16	31	24
Honduras	22.9	82	97	90	74	85	80
Hungary	6.2	100	100	100	100	100	100
Iceland	2.3	100	100	100	100	100	100
India	54.1	91	97	93	25	60	36
Indonesia	30.7	76	93	85	46	71	59
Iran	17.3	92	98	96	82	93	89
Iraq	34.5	69	94	85	82	86	85
Ireland	3.9	100	100	100	98	100	99
Israel	4.4	100	100	100	100	100	100
Italy	3.6	100	100	100
Jamaica	17.0	89	97	93	82	78	80
Japan	3.1	100	100	100	100	100	100
Jordan	18.9	90	97	96	98	98	98
Kazakhstan	17.7	86	99	93	98	97	97
Kenya	72.3	55	82	62	29	31	30
Kiribati	59.2	51	87	67	31	51	40
Kuwait	9.7	99	99	99	100	100	100
Kyrgyzstan	25.7	82	97	88	92	92	92
Laos	72.9	65	84	72	50	90	65
Latvia	8.6	96	100	98
Lebanon	9.5	100	100	100		100
Lesotho	97.8	77	93	81	27	37	30
Liberia	74.2	63	87	75	6	28	17
Libya	15.4				96	97	97
Lithuania	5.4	89	99	96	85	99	94
Luxembourg	2.2	100	100	100	100	100	100
Madagascar	57.3	35	78	50	11	19	14
Malawi	69.9	83	95	85	8	22	10
Malaysia	8.4	99	100	100	95	96	96
Maldives	10.6	98	100	99	100	97	99
Mali	121.0	54	91	67	15	35	22
Malta	6.0	100	100	100	100	100	100
Marshall Islands	38.5	98	93	95	56	84	76
Mauritania	91.0	48	52	50	9	51	27
Mauritius	14.8	100	100	100	90	92	91
Mexico	15.3	91	96	95	79	87	85
Micronesia	37.5	87	95	89	49	85	57
Monaco	3.3		100	100		100	100
Mongolia	32.3	61	95	85	35	65	56
Montenegro	5.6	95	100	98	87	92	90
Morocco	30.6	64	98	84	63	85	75
Mozambique	89.8	35	80	49	11	44	21
Myanmar	52.4	81	95	86	74	84	77
Namibia	49.5	87	98	92	17	56	32
Nauru	40.2		96	96		66	66
Nepal	45.7	88	90	88	34	51	37
Netherlands	4.3	100	100	100	100	100	100
New Zealand	6.3	100	100	100
Nicaragua	24.2	68	98	85	37	63	52
Niger	105.1	42	99	52	4	33	9
Nigeria	117.8	49	79	64	25	31	28
Niue	47.6	99	99	99	100	100	100
Norway	2.8	100	100	100	100	100	100
Oman	11.0	86	95	93	95	97	97
Pakistan	85.8	89	96	91	34	72	48
Palau	20.0		97		100	100	100
Panama	18.5	87	97	94	52	80	73
Papua New Guinea	62.7	33	88	40	13	56	19
Paraguay	22.6	83	100	94	53	96	80
Peru	17.5	72	91	87	45	81	73
Philippines	30.4	91	92	92	69	79	74
Poland	5.3		100			96
Portugal	3.8	100	100	100	100	100	100
Qatar	8.1	100	100	100	100	100	100
South Korea	3.9	88	100	98	100	100	100
Moldova	15.9	94	99	97	84	89	87
Romania	12.5		99
Russia	10.5	92	99	97	59	74	70
Rwanda	53.2	68	81	71	64	61	64
Saint Kitts and Nevis	10.2	98	98	98
Saint Lucia	15	93	99	94
Saint Vincent and the Grenadines	19.3	95	95	95
Samoa	18.4	99	97	99	91	93	92
Sao Tome and Principe	52.6	94	99	97	23	41	34
Saudi Arabia	16.2	97	97	97	100	100	100
Senegal	56.9	60	92	74	40	67	52
Serbia	7.1	99	99	99	96	99	97
Seychelles	14.4	96	96	96	97	97	97
Sierra Leone	167.4	42	87	60	7	22	13
Singapore	2.9		100	100		100	100
Slovakia	9.4	100	100	100	100	100	100
Slovenia	4.1	99	100	100	100	100	100
Solomon Islands	34.8	77	93	81	15	81	29
Somalia	169.9	88	99	95	62	82	74
South Africa	75.9	55	63	57	7	16	9
Spain	5.4	100	100	100	100	100	100
Sri Lanka	12.8	93	99	94	94	83	92
Sudan	87.5	50	66	55	13	44	24
Suriname	29.0	88	98	95	61	88	80
Swaziland	122.6	69	94	74	56	63	57
Sweden	3.3	100	100	100	100	100	100
Switzerland	5.0	100	100	100	100	100	100
Syria	18.1	87	92	90	95	96	96
Tajikistan	61.1	64	93	72	95	94	94
Thailand	17.2	95	97	96	96	89	93
Macedonia	13.0	99	100	99	83	97	91
Timor-Leste	75.7	61	95	70	27	69	39
Togo	101.2	41	92	61	2	25	11
Tonga	14.9	99	99	99	89	99	91
Trinidad and Tobago	26.0		97		92	92	92
Tunisia	21.1	90	100	97	77	97	90
Turkey	29.2	99	100	100	75	97	91
Turkmenistan	68.2	54	89	71	98	100	99
Tuvalu	37.2	97	98	98	80	86	83
Uganda	98.1	71	95	75	34	33	34
Ukraine	13.6	98	98	98	89	96	94
United Arab Emirates	9.4	100	100	100	95	98	98
United Kingdom	6.0	100	100	100	100	100	100
Tanzania	80.3	44	78	53	7	25	12
United States of America	7.9	98	99	99	100	100	100
Uruguay	14.2	95	100	99	96	96	96
Uzbekistan	55.1	81	98	87	100	100	100
Vanuatu	20.9	88	98	91	55	65	58
Viet Nam	28.3	94	98	95	67	93	75
Yemen	75.2	47	72	55	34	93	53
Zambia	124.6	49	85	63	34	56	43
Zimbabwe	96.4	69	97	80	32	52	40