Week7/emissions_linescatterplot.html

<!DOCTYPE html>
<!-- Modified version of Scott Murray's Line Chart from Knight d3 -->
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Line Chart With Scatterplot</title>
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
		<style type="text/css">

			body {
				background-color: white;
				font-family: Helvetica, Arial, sans-serif;
			}

			h1 {
				font-size: 24px;
				margin: 0;
			}

			p {
				font-size: 14px;
				margin: 10px 0 0 0;
			}

			svg {
				background-color: white;
			}

			circle {
				fill: steelblue;
			}

			circle:hover {
				stroke: gray;
			}

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

			.axis text {
				font-family: sans-serif;
				font-size: 11px;
			}

			.tooltip {
				position: absolute;
				z-index: 10;
			}

			.tooltip p {
				background-color: white;
				border: gray 1px solid;
				padding: 2px;
			}

		</style>
	</head>
	<body>

		<h1>United States CO2 Emissions</h1>

		<p>The United States&rsquo; carbon dioxide emissions, 1961-2010. Source: <a href="http://data.worldbank.org/indicator/EN.ATM.CO2E.KT?page=6">World Bank</a>, 2014. Example with rollover tooltips. Based off a Scott Murray example.</p>

		<script type="text/javascript">


			var fullwidth = 700;
			var fullheight = 600;
			var margin = { top: 20, right: 10, bottom: 50, left: 100};


			var width = fullwidth - margin.left - margin.right;
			var height = fullheight - margin.top - margin.bottom;


			//Set up date formatting and years
			var dateFormat = d3.time.format("%Y");


			var xScale = d3.time.scale()
								.range([ 0, width ]);

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


			var xAxis = d3.svg.axis()
							.scale(xScale)
							.orient("bottom")
							.ticks(15)
							.tickFormat(function(d) {
								return dateFormat(d);
							});

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


			var line = d3.svg.line()
				.x(function(d) {
					return xScale(dateFormat.parse(d.year));
				})
				.y(function(d) {
					return yScale(d.emissions);
				});

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

			var svg = d3.select("body")
						.append("svg")
						.attr("width", fullwidth)
						.attr("height", fullheight)
						.append("g")
						.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

			d3.csv("data/usa_co2_emissions.csv", function(myData) {

				// get the min and max of the years in the data, after parsing as dates!
				xScale.domain(d3.extent(myData, function(d){
						return dateFormat.parse(d.year);
						})
				);

				// the domain is from the max of the emissions to 0 - remember it's reversed.
				yScale.domain([ d3.max(myData, function(d) {
						return +d.emissions;
					}),
					0
				]);

				console.log("my data", myData);

				//Line
				//

				// Lines take a single array of data as their input.  So we don't give it data(data).

				// you could do this:
				// .data([data])
				// or use the d3 "datum" which is for single data elements.

				svg.datum(myData)
					.append("path")
					.attr("class", "line usa")
					.attr("d", line)  // line is a function that will operate on the data array, with x and y.
					.attr("fill", "none")
					.attr("stroke", "steelblue")
					.attr("stroke-width", 2);

				// dots go on top of the line!

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

				circles.attr("cx", function(d) {
						return xScale(dateFormat.parse(d.year));
					})
					.attr("cy", function(d) {
						return yScale(d.emissions);
					})
					.attr("r", 3)
					.style("opacity", 0); // this is optional - if you want visible dots or not!


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

				svg.append("g")
					.attr("class", "x axis")
					.attr("transform", "translate(0," + height + ")")
					.call(xAxis);

				svg.append("g")
					.attr("class", "y axis")
					.call(yAxis);

			});

	function mouseoverFunc(d) {
		// Adding a subtle animation to increase the dot size when over it!
			d3.select(this)
				.transition()
				.duration(50)
				.style("opacity", 1)
				.attr("r", 7);
			tooltip
				.style("display", null) // this removes the display none setting from it
				.html("<p>Year: " + d.year +
						  "<br>Emissions: " + d.emissions + " kt</p>");
			}

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

	function mouseoutFunc(d) {
		// shrink it back down:
			d3.select(this)
				.transition()
				.style("opacity", 0)
				.attr("r", 3);
		  tooltip.style("display", "none");  // this sets it to invisible!
	  }


		</script>

	</body>
</html>