Health Spending comparison years 2008 - 2011

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Adding Tooltips</title>
		<script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
		<style type="text/css">
			
			body {
				background-color: #ddddff;
			}

svg {
				background-color: white;
			}

</style>
	</head>
	<body>
        <h2>Health Care Spending as a Percent of GDP </h2>
		<script type="text/javascript">

var svg = d3.select("body")
						.append("svg")
						.attr("width", 500)
						.attr("height", 400);

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

data.sort(function(a, b) {
					return d3.descending(+a.YR2008, +b.YR2008);
				});

var GSelect = svg.selectAll("g")
								.data(data)
								.enter()
                                .append("g");

GSelect.append("rect").attr("x", 0)
					.attr("y", function(d, i) {
						return i * 20;
					})
					.attr("width", function(d) {
						return d.YR2011 * 30;
					})
					.attr("height", 8)
                    .attr("fill", "red")
					.append("title")
					.text(function(d) {
						return d.location + "'s health spending as percent of GDP " + d.YR2011;
					});

GSelect.append("rect").attr("x", 0)
					.attr("y", function(d, i) {
						return i * 20 + 10;
					})
					.attr("width", function(d) {
						return d.YR2008 * 30;
					})
					.attr("height", 8)
                    .attr("fill", "blue")
					.append("title")
					.text(function(d) {
						return d.location + "'s health spending as percent of GDP " + d.YR2008;
                     });
                     
					GSelect.append("text")
					.attr("x", 0)
					.attr("y", function(d,i) {
						return i * 20 + 7; })
					.attr("fill", "#FFFFFF")
					.attr("font-size", "8px")
					.attr("font-weight", "bold")
					.attr("font-family", "sans-serif")
					.text(function(d) {
						return d.location + " 2011";
                    });
                    
                    GSelect.append("text")
					.attr("x", 0)
					.attr("y", function(d,i) {
						return i * 20 + 17; })
					.attr("fill", "white")
					.attr("font-size", "8px")
					.attr("font-weight", "bold")
					.attr("font-family", "sans-serif")
					.text(function(d) {
						return d.location + " 2008";
                    });
			});

</script>

</body>
</html>

Modified http://d3js.org/d3.v3.js to a secure url

https://d3js.org/d3.v3.js