Week8/scatter_data_update.html

<!DOCTYPE html>
<!-- A modified example from Scott Murray's Knight d3 course. -->

<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Toys at Home: Update Data</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;
				padding: 50px;
			}

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

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

			.clicker {
				font-weight: bolder;
				color: red;
				cursor: pointer;
			}

			svg {
				background-color: white;
			}

			.dots {
				fill: steelblue;
				opacity: .7;
			}

			.dotlabels {
				font-size: 10px;
				color: black;
			}

			.highlighted {
				fill: orange;
			}

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

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

			.xlabel{
				font-size: 15px;
				fill: gray;
			}
			.ylabel{
				font-size: 15px;
				fill: gray;
			}

			#menu {
				padding-left: 500px;
				font-weight: bolder;
			}

		</style>
	</head>
	<body>

		<h1>Toys at Home by Richest 20% and Poorest 20%</h1>

		<p>Source: World Development Indicators, <a href="http://datacatalog.worldbank.org">World Bank SOWC All Countries Update 214</a>, latest data 2013</p>

		<p id="menu">
			<select>
				<option value="all">All Countries</option>
				<option value="rich">10 Richest</option>
				<option value="poor">10 Poorest</option>
			</select>
		</p>


		<script type="text/javascript">


		// All the global setup is here:

			var fullwidth = 700;
			var fullheight = 600;

			var margin = { top: 20, right: 10, bottom: 50, left: 50 };

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

			// redo this with an object for the margin settings: var margin = {top...}

			var dotRadius = 3; // fix this to a nice value.

			// fill in the margin values here.  Also, we set domain to 0 to 100 since it's percents,
			// plus some padding room!
			var xScale = d3.scale.linear()
								.range([ 0, width])
								.domain([-1, 100]);

			// top to bottom, padding just in case
			var yScale = d3.scale.linear()
								.range([ height, 0 ])
								.domain([-1, 100]);

			//  Custom tick count if you want it.
			// Create your axes here.
			var xAxis = d3.svg.axis()
							.scale(xScale)
							.orient("bottom")
							.ticks(10);  // fix this to a good number of ticks for your scale later.

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

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

		// utility for label placement jitter
		function getRandomInt(min, max) {
  			return Math.floor(Math.random() * (max - min + 1) + min);
				}


			d3.csv("data/books_toys_by_rich_poor2013.csv", function(data) {

				var menu = d3.select("#menu select")
        		.on("change", filter);

				// Set the intial value of drop-down when page loads
      	menu.property("value", "all");

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

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

				svg.append("text")
					.attr("class", "xlabel")
					.attr("transform", "translate(" + (width / 2) + " ," +
								(height + 25) + ")")
					.style("text-anchor", "middle")
					.attr("dy", 12)
					.text("Poorest 20%");

				svg.append("text")
					.attr("class", "ylabel")
					.attr("transform", "rotate(-90) translate(" + (-height/2)
								 + ",0)")
					.style("text-anchor", "middle")
					.attr("dy", -30)
					.text("Richest 20%");


				var curSelection = menu.property("value");
      	render(data);  // do the full dataset render first.


      	// Functions for handling updates and drawing with data

				function filter() {
					// Handle the menu change -- filter the data set if needed, rerender:

						curSelection = menu.property("value");

					  if (curSelection === "all") {
					  	var newData = data; // set it equal to all the data
					  } else if (curSelection === "rich") { //poorest 10
						  	var newData = data.sort(function(a,b) {
							  		return b.poorToys - a.poorToys;
							  	}).slice(0, 10);
					  } else if (curSelection === "poor") {  // descending
						  	var newData = data.sort(function(a,b) { // richest 10
											return a.poorToys - b.poorToys;
							  	}).slice(0, 10);
					  }
					  console.log(newData);
					  render(newData);
				}


				function render(mydata) {

						// Here we set domains, and draw the circles based on what data set it is.


							xScale.domain([
								d3.min(mydata, function(d) {
			  					return +d.poorToys;
			  				}) - 2,
			  				d3.max(mydata, function (d) {
			  					return +d.poorToys;
			  				}) + 2
			  			]);

							yScale.domain([
								d3.min(mydata, function(d) {
			  					return +d.richToys;
			  				}) - 2,
			  				d3.max(mydata, function (d) {
			  					return +d.richToys;
			  				}) + 2
			  			]);


							// data join
							var circles = svg.selectAll("circle")
									.data(mydata, function(d) {return d.country;}); // key function!


							// enter and create new ones if needed
							circles
								.enter()
								.append("circle")
								 // this section is to fix some of the animation direction problems
								.attr("cx", function (d) {
									if (curSelection == "rich") {
										return width - margin.right;
									}
									else if (curSelection == "poor") {
										return margin.left;
									}
								})
								.attr("cy", function (d) {
									if (curSelection == "rich") {
										return margin.top;
									}
									else if (curSelection == "poor") {
										return height - margin.bottom;
									}
								})  // */
								.attr("class", "dots")
								.append("title")
								.text(function(d) {
									return d.country + " reports toys for " + d.poorToys + "% kids in poor areas and " + d.richToys + "% in rich areas.";
								});

							// transition of them
							circles
								.transition()
								.duration(2000)
            		.attr("cx", function(d) {
									return xScale(+d.poorToys);
									// return the value to use for your x scale here
								})
								.attr("cy", function(d) {
									return yScale(+d.richToys);
								})
								.attr("r", function() {
									if (curSelection !== "all") {
										return dotRadius * 2;
									}
									else {
										return dotRadius;
									}
								});


								// fade out the ones that aren't in the current data set
							circles
								.exit()
								.transition()
								.duration(1000)
								.style("opacity", 0)
								.remove();

								// Update the axes - also animated. this is really easy.
							 svg.select(".x.axis")
                  .transition()
                  .duration(1000)
                  .call(xAxis);

                // Update Y Axis
                svg.select(".y.axis")
                    .transition()
                    .duration(1000)
                    .call(yAxis);

                // label the dots if you're only showing 10.
              if (curSelection !== "all") {

	              	// data join with a key
									var labels = svg.selectAll("text.dotlabels")
										.data(mydata, function(d) {
											return d.country;
										});

									// enter and create any news ones we need. Put minimal stuff here.
									labels
											.enter()
											.append("text")
											.attr("transform", function(d) {
											 return "translate(" + xScale(+d.poorToys) + "," + yScale(+d.richToys) + ")";
											})
											.attr("dx", 5)
											.attr("dy", function(d) {
												// adding some space for the overlapping ones
												if (d.country == "Costa Rica" || d.country == "Uzbekistan") {
													return -12;
												} else {
													return -4;
												}
											})
											.attr("class", "dotlabels")
											.style("opacity", 0)
											.text(function(d) {return d.country});

											// transition them.
									labels.transition()
										.duration(2000)
										.style("opacity", 1);

										// remove ones that we don't have now
									labels.exit().remove(); // these could have a transition too...

							} else {
								// if we're showing "all countries" - fade out any labels.

								svg.selectAll("text.dotlabels")
								.transition()
								.duration(1000)
								.style("opacity", 0)
								.remove();

							}

						} // end of render

			});


		</script>

	</body>
</html>