Scatterplot

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Scatterplot - Internet Access by Mean Years of Schooling</title>
		<script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
		<link rel="stylesheet" type="text/css" href="styles_scatter.css">
		
	</head>
	<body>

<p><h2>Internet Access by Mean Years of Schooling</h2></p>
		
		<div id="box">
			Internet access has become a vital tool in the past 20 years. Lack of ready access to high speed internet may limit economic and educational opportunities as well as political expression especially in the developing world. Indeed internet access may become one of many indicators showing a widening gap between rich and poor. 
			<br /><br />
			The scatter plot below shows the percentage of population with access to the internet contrasted with mean years of schooling. Mean years of schooling is an indicator of investment in education and a key comonent of the UN's human development index (HDI). The colors of the plot points represent different regions including: <font color="red">Asia</font>, <font color="blue">Europe</font>, <font color="black">Africa</font>, <font color="aqua">Pacific</font>, <font color="ff69b4">Middle East</font>, <font color="ffa500">North America</font> and <font color="00ff00">South America</font>.

</div>
		<br />
		<script type="text/javascript">		
			
			var w = 1000;
			var h = 600;
			var padding = [20, 10, 70, 70]; //Top, right, bottom, left
			
			var xScale = d3.scale.linear()
								.range([padding[3], w - padding[1] ]);
								
			var yScale = d3.scale.linear()
								.range([ padding [0], h - padding [2] ]);
			
			
			var xAxis = d3.svg.axis()
							.scale(xScale)
							.orient("bottom")
							.tickFormat(function (d) {
								return d+"%";
							});
					
			var yAxis = d3.svg.axis()
							.scale(yScale)
							.orient("left");
									
		
			var svg = d3.select("body")
				.append("svg")
				.attr("width", w)
				.attr("height", h);
				
						
				
			//Load in contents of CSV file
			d3.csv("HDR2014.csv", function(data) {

//Sort data descending
				data.sort(function(a,b) {
					return d3.descending(+a.InternetPerc, +b.InternetPerc);
				});
				
				xScale.domain([
				0, 
				//can use d3.min with same function to adjust your scale for both x and y axis. Set low end to lowest value.
				d3.max(data, function(d) {
					return +d.InternetPerc;
					}) 
				]);
				
				yScale.domain([
					d3.max(data, function(d) {
					return +d.MeanSchooling;
					}),
					0					
					]);
				
			//create circle for scatterplot based on data in csv file
			var circles = svg.selectAll("circle")
				.data(data)
				.enter()
				.append("circle");
									
			circles.attr("cx", function(d) {
					return xScale(d.InternetPerc);
			})
			
				.attr("cy", function(d) {
					return yScale(d.MeanSchooling); 
			})
				.attr("r", 1)
				
			
						
			// Highlight circles meeting certain criteria
			.attr("class", function(d) {
				if (d.region == "africa") {return "highlightafrica"}
				else if (d.region == "europe") {return "highlighteurope"}
				else if (d.region == "asia") {return "highlightasia"}
				else if (d.region == "middleeast") {return "highlightmiddleeast"}
				else if (d.region == "northamerica") {return "highlightnorthamerica"}
				else if (d.region == "southamerica") {return "highlightsouthamerica"}
				else if (d.region == "pacific") {return "highlightpacific"}
					else {return ""}
				})
				
			.attr("fill", "maroon")
			.append("title")
			.text(function(d) {
				return d.InternetPerc + "% of " + d.country + "'s population has internet access and on average " +d.MeanSchooling + " years of schooling";
			});
			
			circles.sort(function(a,b) {
				return d3.ascending(+a.InternetPerc, +b.InternetPerc);
				})
				.transition()
				.delay(function(d,i) {
					return i*20;
					})
				.duration(10)
				.attr("r", 5);
			
			svg.append("g")
				.attr("class", "x axis")
				.attr("transform", "translate(0," + (h - padding[2]) + ")")
				//.attr("transform", "translate(" + padding[3] + "," + padding[0] + ")")
				.call(xAxis);
			
			//Add Title
			svg.append("text")
				.attr("class", "title")
				.attr("x", w/2)
				.style("text-anchor", "middle")
				.text("Percent of Population with Internet Access by Mean Years of Schooling");
			
			//add text label for x axis
			svg.append("text") 
				.attr("class", "labelaxis")
				.attr("transform", "translate(0," + (h - 20) + ")")
				.attr("x", w/2 + 10)
				.attr("dy", "1em")
				.style("text-anchor", "middle")
				.text("Internet Access (% of Population)");
					
			
			svg.append("g")
				.attr("class", "y axis")
				.attr("transform", "translate(" + padding[3] + ",0)")
				.call(yAxis);
				
			//add text label for y axis
			svg.append("text")
				.attr("class", "labelaxis")
				.attr("transform", "rotate(-90)")
				.attr("y", 0-padding[4])
				.attr("x", 50 - (h/2))
				.attr("dy", "1em")
				.style("text-anchor", "middle")
				.text("Mean Years of Schooling");
				
		});

</script>
		<p><b>Source:</b><a href="www.hdr.undp.org/en/data" target="_blank">UNDP. 2014</a> </p>
	</body>
</html>

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

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