Week 6: Scatter tooltips.

<!DOCTYPE html>

<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>

body {
			font-family: "Verdana", sans-serif;
			color: rgba(30,30,30,0.9);
		}
		/*svg {
			background-color: rgba(235, 235, 235, 0.3);
		}*/
		#text {
			max-width: 900px;
			margin: 0 auto;
		}

h1{
			font-family: "Verdana", sans-serif;
			font-size: 40px;
			text-transform: uppercase;
			font-weight: 700;
			color: #0099FF;
			margin-top: 40px;
		}

p {
			width: 800px;
			font-family: "Verdana";
			font-size: 17px;
			font-weight: 100;
			line-height: 1.7;
		}

#source p {
			font-size: 15px;
		}

a, a:visited {
			text-decoration: none;
			color: #0099FF;
		}

a:hover {
			color: black;
		}
		/*circle.dots {
			fill: steelblue;
		}*/
		circle:hover {
			/*stroke-width: 12;*/
			opacity: 0.5;
		}

.axis path,
		.axis line {
			fill: none;
			stroke: rgba(30,30,30,0.5);
			shape-rendering: crispEdges;
		}
		.axis text {
			font-family: "Verdana", sans-serif;
			font-weight: 100;
			font-size: 13px;
			fill: rgba(30,30,30,0.8);
		}

.label {
				font-family: "Verdana", sans-serif;
				font-weight: bold;
				font-size: 14px;
				fill: rgba(30,30,30,0.6);
		}

.tooltip {
				position: absolute;
				z-index: 10;
			}
			.tooltip p {
				font-family: "Verdana";
				max-width: 210px;
				font-size: 14px;
				background-color: rgba(230,230,230,0.9);
				border: rgba(230,230,230,1) 1px solid;
				padding: 2px 7px 2px 7px;

}

span {
				font-weight:bold;
				color: #0099FF;
			}

</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="https://www.who.int/gho/en/">Global Health Observatory (GHO)</a> and <a href="https://data.worldbank.org/">World Bank</a>.</p>
			</div>
		</div>

var dotRadius = 5;

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

var yScale = d3.scale.sqrt().exponent(.35)
			.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("body")
			.append("svg")
			.attr("width", width)
			.attr("height", height);

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

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

my2013 =[];
			data.forEach(function(d){
					if(d.Year === "Year 2013") {
					my2013.push(d);

}

});

/*xScale.domain(
				d3.extent(my2013, function(d) {
					return +d.Total;
				}));

yScale.domain(
				d3.extent(my2013, function(d) {
					return +d.Health_exp;
				}));*/

xScale.domain([
	  				d3.min(my2013, function(d) {
	  					return +d.Total;
	  				}) - 2,
	  				d3.max(my2013, function (d) {
	  					return +d.Total;
	  				}) + 2
  				]);
  		yScale.domain([
	  				d3.min(my2013, function(d) {
	  					return +d.Health_exp;
	  				}) - 5,
	  				d3.max(my2013, function (d) {
	  					return +d.Health_exp;
	  				}) + 5
  				]);

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

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

if (d.Total > 100000) {
								return "rgba(222,36,20,1)";
							}

else {
								return "rgba(0,128,255,1)";
							}

});
					/*.append("title")
					.text(function(d) {
						return "In 2013 in, " + d.Country + ", the infant mortality was " + d3.format(",")(d.Total) + ". That year its health expenditure per capita was $" + d3.format(",")(d.Health_exp);
					});*/

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("Infant Mortality");

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("Health Expenditure per Capita");
			});

// add tooltip actions

</script>

</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js