Week 5: Scatterplot

<!DOCTYPE html>

<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Formatting Ticks</title>
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
		<style type="text/css">
			@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700);

body {
				background-color: white;
				font-family: "Open Sans", Helvetica, Arial, sans-serif;
			}
			h1 {
				font-size: 24px;
				color: rgba(30,30,30,0.7);
				margin: 0;
			}
			p {
				font-size: 14px;
				margin: 10px 0 0 0;
			}
			svg {
				background-color: white;
				margin-top: 45px;
			}
			/*circle.dots {
				fill: steelblue;
			}*/
			circle:hover {
				/*stroke-width: 12;*/
				fill: rgba(30,30,30,0.4);
			}

.axis path,
			.axis line {
				fill: none;
				stroke: rgba(30,30,30,0.5);
				stroke-dasharray: 10,10;
				shape-rendering: crispEdges;
			}
			.axis text {
				font-family: "Opens Sans", sans-serif;
				font-size: 13px;
			}

.label {
					font-family: "Opens Sans", sans-serif;
					font-size: 15px;
					font-weight: 600;
					fill: rgba(30,30,30,0.7);
			}

</style>
	</head>
	<body>

<h1>Life Satisfaction</h1>

<p>Better Life Index &ldquo;Life Satisfaction&rdquo; scores vs. years in education. Source: <a href="https://stats.oecd.org/Index.aspx?DataSetCode=BLI">OECD</a>, 2014</p>

yScale.domain(
						d3.extent(data, function(d) {
							return +d.lifeSatisfaction;

// pick a data value to plot on x axis
						}));*/

d3.csv("betterlifeindex.csv", function(data) {
						// look at the data file and pick 2 columns to contrast with each other.
				xScale.domain([13, d3.max(data, function(d) {
							return +d.yearsInEducation;
							})]);

yScale.domain([4, d3.max(data, function(d) {
					return +d.lifeSatisfaction;
				})]);

var circles = svg.selectAll("circle")
					.data(data)
					.enter()
					.append("circle")

circles.attr("class", "dots")
								// fill in the rest of the data, enter, append here.
				// add a class to the circles - ".dots".
				// Circles in SVG have cx, cy, and r attributes. x location, y location, radius.
				circles.attr("cx", function(d) {
						return xScale(+d.yearsInEducation);
						// return the value to use for your x scale here
					})
					.attr("cy", function(d) {
							return yScale(+d.lifeSatisfaction);
						// return the value to use for your y scale here
					})
					.attr("r", dotRadius)  // you might want to increase your dotRadius
					.attr("fill", function(d) {
						if (d.country === "Israel") {
							return "rgba(247,106,109,0.9)";
						}

else {
							return "rgba(106,172,247,0.8)";
						}

}) // add a fill rule with a special case for one of the countries
					.append("title")
					.text(function(d) {
							return "People in " + d.country + " has an average number of " + d.yearsInEducation + " years in education. Their life satisfaction's level is " + d.lifeSatisfaction;
						// fill in a text string here for your cheap tooltip
					});
				// 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);// fill in the name of your yaxis function here).
				svg.append("g")
					.attr("class", "y axis")
					.attr("transform", "translate(" + (margin.left) + ",0)")
					.call(yAxis);// fill in the name of your yaxis function here).

svg.append("text")
						.attr("class", "x label")
	        	.attr("transform", "translate(" + (margin.left + width / 3) + " ," +
	        				(height / 1.4 + margin.bottom) + ")")
	        	.style("text-anchor", "middle")
	        	.attr("dy", "26")
	        	.text("Years in Education");

svg.append("text")
						.attr("class", "y label")
 						.attr("transform", "translate(" + (margin.right + width / 9) + " ," +
									(height / 2.8 + margin.top) + ") rotate(-90)")
						.style("text-anchor", "middle")
						.attr("dy", "-60")
						.text("Life satisfaction");
		});

</script>

</body>
</html>

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