From 5df0810114d5e1ae10295160de1fd0423ad8e318 Mon Sep 17 00:00:00 2001
From: Scott Murray <shm@alignedleft.com>
Date: Thu, 9 Jul 2015 10:22:06 -0700
Subject: [PATCH] Added map tooltip example

---
 38_map_tooltip.html | 495 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 495 insertions(+)
 create mode 100644 38_map_tooltip.html
diff --git a/38_map_tooltip.html b/38_map_tooltip.html
new file mode 100644
index 0000000..e2220c7
--- /dev/null
+++ b/38_map_tooltip.html
@@ -0,0 +1,495 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>D3: Zoom "presets"</title>
+	<script type="text/javascript" src="d3.js"></script>
+	<style type="text/css">
+
+
+
+		body {
+			background-color: gray;
+			font-family: Helvetica, Arial, sans-serif;
+		}
+
+		svg {
+			background-color: black;
+		}
+
+		#presetsContainer p {
+			margin-bottom: 0;
+			font-weight: bold;
+			font-size: 12px;
+			color: black;
+		}
+
+		#presetsContainer button {
+			margin-right: 10px;
+		}
+
+		/* Styling for new tooltip <div> */
+		#tooltip {
+			position: absolute;
+			top: 0;
+			left: 0;
+			z-index: 10;
+			margin: 0;
+			padding: 10px;
+			width: auto;
+			min-width: 15px;
+			height: auto;
+			color: white;
+			font-family: sans-serif;
+			font-size: 12px;
+			text-align: left;
+			background-color: rgba(0, 0, 0, 0.75);
+			opacity: 0;
+			pointer-events: none;
+		}
+
+		#tooltip p {
+			margin: 0;
+		}
+
+		#tooltip p.value {
+			font-weight: bold;
+		}
+
+
+
+	</style>
+</head>
+<body>
+
+	<p>Total 2010 carbon dioxide emissions (kilotons) by country (source: <a href="http://data.worldbank.org/indicator/EN.ATM.CO2E.KT?page=6">World Bank</a>, 2014), and populations of large world cities (source: <a href="https://en.wikipedia.org/wiki/List_of_cities_proper_by_population">Wikipedia</a>, 2015).</p>
+
+	<div id="mapContainer"></div>
+	<button id="zoomIn">Zoom In</button>
+	<button id="zoomOut">Zoom Out</button>
+	<!-- New presets container! -->
+	<div id="presetsContainer">
+		<p>Zoom to…</p>
+	</div>
+
+	<!-- New HTML div functions as our tooltip -->
+	<div id="tooltip">
+		<p class="name"></p>
+		<p class="value"></p>
+	</div>
+
+	<script type="text/javascript">
+
+
+
+		//Globals for use later
+		var countries;
+		var cities;
+
+		//Year of CO2 data to map
+		var year = "2010";
+
+		//Width and height
+		var w = 500;
+		var h = 300;
+
+		//Number formatting
+		//
+		//Create a function that take a number, adds commas for thousands,
+		//and removes decimal values, e.g. 1234567.89 --> 1,234,567
+		//
+		var valueFormat = d3.format(",");
+
+		//Define map projection + default values
+		var projection = d3.geo.mercator()
+							   .center([ 0, 40 ])
+							   .translate([ w/2, h/2 ])
+							   .scale([ w/7 ]);
+
+		//Define path generator
+		var path = d3.geo.path()
+						 .projection(projection);
+
+		//
+		//Configure zoom behavior
+		//
+		var maxZoomIn = w*2;
+		var maxZoomOut = w/7;
+
+		var zoom = d3.behavior.zoom()
+			.translate( projection.translate() )
+			.scale( projection.scale() )
+			.scaleExtent([ maxZoomOut, maxZoomIn ])
+			//Defines the on("zoom") event!  That is, what
+			//to do on double-click or mousewheel roll.
+			.on("zoom", function(d) {
+
+				//Get the translate and scale values from this event
+				var t = d3.event.translate;
+				var s = d3.event.scale;
+				
+				//Update the zoom and projection objects with these
+				zoom.translate(t);
+				projection.translate(t).scale(s);
+				
+				//Recalculate paths (given new t and s values)
+				countries.attr("d", path);
+
+				//Recalculate cities (same idea)
+				cities.attr("cx", function(d) {
+						   return projection([d.longitude, d.latitude])[0];
+					   })
+					   .attr("cy", function(d) {
+						   return projection([d.longitude, d.latitude])[1];
+					   });
+					   
+			});
+
+		//Define zoom in and out functions that we can call easily later
+		var zoomIn = function() {
+			var newScale = Math.min(projection.scale() * 2, maxZoomIn);
+			zoomTo(newScale);
+		};
+
+		var zoomOut = function() {
+			var newScale = Math.max(projection.scale() / 2, maxZoomOut);
+			zoomTo(newScale);
+		};
+
+		//Define zoomTo function to which we can pass a new scale value
+		zoomTo = function(newScale) {
+
+			var t = projection.translate(),
+				s = projection.scale();
+			
+			t[0] -= w / 2;
+			t[0] *= newScale / s;
+			t[0] += w / 2;
+
+			t[1] -= h * 0.55;
+			t[1] *= newScale / s;
+			t[1] += h * 0.55;
+			
+			zoom.translate(t).scale(newScale);
+			projection.translate(t).scale(newScale);
+
+			//Finally, transition paths and circles into place
+
+			countries.transition()
+				.ease("linear")
+				.delay(50)
+				.duration(500)
+				.attr("d", path);
+
+			cities.transition()
+				.ease("linear")
+				.duration(500)
+				.attr("cx", function(d) {
+					return projection([d.longitude, d.latitude])[0];
+				})
+				.attr("cy", function(d) {
+					return projection([d.longitude, d.latitude])[1];
+				});
+
+		};
+
+		//Assign zoom button behavior
+		d3.select("#zoomIn")
+			.on("click", function() {
+				zoomIn();
+			});
+
+		d3.select("#zoomOut")
+			.on("click", function() {
+				zoomOut();
+			});
+
+
+
+		//
+		//New zoom "preset" values
+		//
+		var zoomPresets = [
+			{
+				name: 	"All",
+				scale: 	maxZoomOut,
+				x: 		w / 2,
+				y:		h / 2
+			},
+			{
+				name: "Africa",
+				scale: 	w / 2.5,
+				x: 		w / 2.5,
+				y:		0
+			},
+			{
+				name: "Americas",
+				scale: 	w / 5,
+				x:		w * 0.8,
+				y:		h / 3
+			},
+			{
+				name: "Asia",
+				scale: 	w / 4,
+				x: 		w / 15,
+				y:		h * 0.6
+			},
+			{
+				name: "Europe",
+				scale: 	w * 0.6,
+				x: 		w / 3,
+				y:		h * 0.8
+			}
+		];
+		
+		//Create a button for each preset
+		d3.select("#presetsContainer")
+			.selectAll("button")  //Yes, using selectAll/data/enter/append…
+			.data(zoomPresets)
+			.enter()
+			.append("button")
+			.text(function(d) {
+				return d.name;
+			})
+			.on("click", function(d) {
+
+				//Define behavior on click for this button
+
+				var s = d.scale;
+				var x = d.x;
+				var y = d.y;
+		
+				//Update projection scale and translation
+				projection.scale(s)
+						  .translate([ x, y ]);
+			
+				//Update zoom behavior to match
+				zoom.scale( projection.scale() )
+					.translate( projection.translate() );
+			
+				//Finally, transition paths and circles into place
+
+				countries.transition()
+					.ease("linear")
+					.delay(50)
+					.duration(500)
+					.attr("d", path);
+
+				cities.transition()
+					.ease("linear")
+					.duration(500)
+					.attr("cx", function(d) {
+						return projection([d.longitude, d.latitude])[0];
+					})
+					.attr("cy", function(d) {
+						return projection([d.longitude, d.latitude])[1];
+					});
+
+			});
+
+
+
+		//Define quantize scale to sort data values into buckets of color
+		//Colors by Cynthia Brewer (colorbrewer2.org), YlOrRd
+		var color = d3.scale.quantize()
+							.range([ "#ffffb2", "#fecc5c", "#fd8d3c", "#f03b20", "#bd0026" ]);
+
+		//Create SVG
+		var svg = d3.select("#mapContainer")
+					.append("svg")
+					.attr("width", w)
+					.attr("height", h);
+
+		//Load in CO2 data
+		d3.csv("data/co2/co2_emissions.csv", function(data) {
+
+			//Set input domain for color scale
+			color.domain([
+				d3.min(data, function(d) { return +d[year]; }), 
+				d3.max(data, function(d) { return +d[year]; })
+			]);
+
+			//Load in GeoJSON data
+			d3.json("data/geo/mapshaper_output.json", function(json) {
+				
+				//Merge the CO2 data and GeoJSON into a single array
+				//
+				//Loop through once for each CO2 data value
+				for (var i = 0; i < data.length; i++) {
+			
+					//Grab country name
+					var dataCountryCode = data[i].countryCode;
+					
+					//Grab data value, and convert from string to float
+					var dataValue = +data[i][year];
+			
+					//Find the corresponding country inside the GeoJSON
+					for (var j = 0; j < json.features.length; j++) {
+					
+						//We'll check the official ISO country code
+						var jsonCountryCode = json.features[j].properties.iso_a3;
+			
+						if (dataCountryCode == jsonCountryCode) {
+					
+							//Copy the data value into the GeoJSON
+							json.features[j].properties.co2 = dataValue;
+							
+							//Stop looking through the JSON
+							break;
+							
+						}
+					}		
+				}
+
+				//Create a group to contain all the country paths.
+				//This is primarily to catch zoom events, even when
+				//the mouse is positioned over the ocean.
+				var countriesGroup = svg.append("g")
+										.attr("id", "countriesGroup")
+										.call(zoom);  //Bind zoom listener to the countries group
+
+				//Create a rectangle in the background.
+				//This is purely to ensure this group fills the whole
+				//SVG image, so mousewheel events are caught.
+				countriesGroup.append("rect")
+					.attr("x", 0)
+					.attr("y", 0)
+					.attr("width", w)
+					.attr("height", h);
+
+				//Bind data and create one path per GeoJSON feature
+				countries = countriesGroup.selectAll("path")
+				   .data(json.features)
+				   .enter()
+				   .append("path")
+				   .attr("d", path)
+				   .style("fill", function(d) {
+
+						//Get data value
+						var value = d.properties.co2;
+
+						if (value) {
+							//If value exists…
+							return color(value);
+						} else {
+							//If value is undefined…
+							return "#ccc";
+						}
+
+					})
+				    //
+				    //NEW: Added tooltip behavior!
+				    //
+					.on("mouseover", function(d) {
+
+						//Fill yellow to highlight
+						d3.select(this)
+							.style("fill", "yellow");
+
+						//Position the tooltip <div> and set its content
+						var x = d3.event.pageX;
+						var y = d3.event.pageY - 40;
+
+						//Populate name in tooltip
+						d3.select("#tooltip .name")
+							.text(d.properties.name);
+
+						//Populate value in tooltip
+						d3.select("#tooltip .value")
+							.text(valueFormat(d.properties.co2) + " (kt)");
+
+						//Position tooltip and make visible
+						d3.select("#tooltip")
+							.style("left", x + "px")
+							.style("top", y + "px")
+							.style("opacity", 1)
+
+					})
+					.on("mouseout", function() {
+
+						//Restore original choropleth fill
+						d3.select(this)
+						   .style("fill", function(d) {
+								var value = d.properties.co2;
+								if (value) {
+									return color(value);
+								} else {
+									return "#ccc";
+								}
+							});
+
+						//Hide the tooltip
+						d3.select("#tooltip")
+							.style("opacity", 0);
+
+					});
+
+				//Load in cities data
+				d3.csv("data/cities/cities.csv", function(data) {
+					
+					cities = svg.selectAll("circle")
+					   .data(data)
+					   .enter()
+					   .append("circle")
+					   .attr("cx", function(d) {
+						   return projection([d.longitude, d.latitude])[0];
+					   })
+					   .attr("cy", function(d) {
+						   return projection([d.longitude, d.latitude])[1];
+					   })
+					   .attr("r", function(d) {
+						   return Math.sqrt(+d.population / w * 0.001);
+					   })
+					   .style("fill", "blue")
+					   .style("opacity", 0.75)
+					   //
+					   //NEW: Added tooltip behavior!
+					   //
+					   .on("mouseover", function(d) {
+
+							//Fill yellow to highlight
+							d3.select(this)
+								.style("fill", "yellow");
+
+							//Position the tooltip <div> and set its content
+							var x = d3.event.pageX;
+							var y = d3.event.pageY - 40;
+
+							//Populate name in tooltip
+							d3.select("#tooltip .name")
+								.text(d.name);
+
+							//Populate value in tooltip
+							d3.select("#tooltip .value")
+								.text("Pop. " + valueFormat(d.population));
+
+							//Position tooltip and make visible
+							d3.select("#tooltip")
+								.style("left", x + "px")
+								.style("top", y + "px")
+								.style("opacity", 1)
+
+					   })
+					   .on("mouseout", function() {
+
+							//Restore original choropleth fill
+							d3.select(this)
+							   .style("fill", "blue");
+
+							//Hide the tooltip
+							d3.select("#tooltip")
+								.style("opacity", 0);
+
+					   });
+					
+				});
+
+			});  //End d3.json()
+
+		});  //End d3.csv()
+
+
+	
+	</script>
+</body>
+</html>
\ No newline at end of file
