almccon · March 27, 2018 05:15
diff --git a/.block b/.block
 license: mit
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 	<head>
  	<meta charset="utf-8">
  	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  	<script src="//d3js.org/queue.v1.min.js"></script>
 		<script src="//d3js.org/topojson.v0.min.js"></script>
 		<style type="text/css">
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }


            .landshadow {
                fill: none;
                stroke: #ccc;
                stroke-width: 4px;
                stroke-linejoin: round;
            }
            .states {
                fill: none;
                stroke: #fff;
                stroke-linejoin: round;
            }
            .counties {
                fill: #fff;
            }
            #map-container {
                height: 500px;
                width: 1500px;
                text-align: center;
                position: relative;
            }
            #d3map {
                display: block;
                position: absolute;
                width: 100%;
                height: 100%;
                margin: 0;
            }

 		</style>
 	</head>
 	<body>
 		


 				<div id="map-container">
 					<!-- the D3 map will be rendered here -->
 					<svg id="d3map"></svg>
 				</div>
 				
 				<div id="tabs">
 					<ul>
 						<li>
 							<a href="#tabs-1">Cyan/Magenta/Yellow</a>
 						</li>
 						<li>
 							<a href="#tabs-2">Red/Green/Blue</a>
 						</li>
 						<li>
 							<a href="#tabs-3">Black and White</a>
 						</li>
 					</ul>
 					<div id="tabs-1">
 						<ul>
 							<li id="cmykbutton"> show all </li>
 							<li id="cmykpopbutton"> pop </li>
 							<li id="cmyksodabutton"> soda </li>
 							<li id="cmykcokebutton"> coke </li>
 							<li id="cmykotherbutton"> other </li>
 						</ul>
 					</div>
 					<div id="tabs-2">
 						<ul>
 							<li id="rgbbutton"> show all </li>
 							<li id="rgbpopbutton"> pop </li>
 							<li id="rgbsodabutton"> soda </li>
 							<li id="rgbcokebutton"> coke </li>
 							<li id="rgbotherbutton"> other </li>
 						</ul>
 					</div>
 					<div id="tabs-3">
 						<ul>
 							<li class="not_avail"> show all </li>
 							<li id="bwpopbutton"> pop </li>
 							<li id="bwsodabutton"> soda </li>
 							<li id="bwcokebutton"> coke </li>
 							<li id="bwotherbutton"> other </li>
 						</ul>
 					</div>
 				</div>

 		
 		<script type="application/javascript">

 			// Create some scales for univariate modes
 			var bwscale = d3.scale.linear()
 				.domain([0, 1])
 				.range(["white", "black"]);
 				
 			var cmykpop = d3.scale.linear()
 				.domain([0, 1])
 				.range(["white", "yellow"]);
 				
 			var cmyksoda = d3.scale.linear()
 				.domain([0, 1])
 				.range(["white", "cyan"]);
 				
 			var cmykcoke = d3.scale.linear()
 				.domain([0, 1])
 				.range(["white", "magenta"]);
 				
 			var rgbpop = d3.scale.linear()
 				.domain([0, 1])
 				.range(["white", "lime"]); // Note, #OOFFOO is not "green"
 				
 			var rgbsoda = d3.scale.linear()
 				.domain([0, 1])
 				.range(["white", "blue"]);
 				
 			var rgbcoke = d3.scale.linear()
 				.domain([0, 1])
 				.range(["white", "red"]);
 				
 			// Ideally, I would rewrite these as a d3.scale.trivariate() plugin.
 			// Although, this is a misnomer for two reasons: 
 			// First, the three different variables are not independent.
 			// Second, the PVS encodes other (a 4th possible value) 
 			// as black, in both the "rgb" and "cmyk" modes.
 			function cmyk(d) {
 				if (d.PCTPOP == 0 && d.PCTSODA == 0 && d.PCTCOKE == 0 && d.PCTOTHER == 0) {
 					return "white";
 				} else {
 					return "rgb(" 
 						+ Math.round((d.PCTPOP + d.PCTCOKE) * 100) + "%," 
 						+ Math.round((d.PCTSODA + d.PCTPOP) * 100) + "%," 
 						+ Math.round((d.PCTCOKE + d.PCTSODA) * 100) + "%)";
 				}
 			}
 			
 			function rgb(d) {
 				if (d.PCTPOP == 0 && d.PCTSODA == 0 && d.PCTCOKE == 0 && d.PCTOTHER == 0) {
 					return "white";
 				} else {
 					return "rgb(" 
 						+ Math.round(d.PCTCOKE * 100) + "%," 
 						+ Math.round(d.PCTPOP * 100) + "%," 
 						+ Math.round(d.PCTSODA * 100) + "%)";
 				}
 			}

 			var path = d3.geo.path()
 				.projection(d3.geo.albersUsa().translate([400,250]).scale(800));

 			var svg = d3.select("#d3map");
 		
 			// The d3_hexbinAngles and hexagon function are (obviously) 
 			// borrowed from https://github.com/d3/d3-plugins/tree/master/hexbin	
 			
 			var d3_hexbinAngles = d3.range(0, 2 * Math.PI, Math.PI / 3);
 			
 			function hexagon(radius) {
 				if (arguments.length < 1) {
 					// This is where I should calculate the correct radius
 					// based on the number of divisions in the overall triangle... but then
 					// the hexagon would have to be linked to the legend
 					// somehow.
 					radius = 8;
 				}
 				var x0 = 0, y0 = 0; // create shape centered at 0,0
 				var points = d3_hexbinAngles.map(function(angle) {
      				var x1 = Math.sin(angle) * radius,
          				y1 = -Math.cos(angle) * radius,
          				dx = x1 - x0,
          				dy = y1 - y0;
          			// I'm not sure why this line is in the hexbin code,
          			// but it was breaking my hexagons, and they work fine
          			// without it:
      				//x0 = x1, y0 = y1;
      				return [dx, dy];
    			});
    			return "M" + points.join("L") + "z";
  			}
  			
  			function rectangle(height, width) {
 				if (arguments.length < 2) {
 					// This is where I should calculate the correct size
 					// based on the number of division in the overall triangle... but then
 					// the rectangle would have to be linked to the legend
 					// somehow.
 					width = 8;
 					height = 8;
 				}
 				halfwidth = width / 2;
 				halfheight = height / 2;
 				var x0 = 0, y0 = 0; // create shape centered at 0,0
 				var points = [
 					[x0 - halfwidth, y0 - halfheight],
 					[x0 + halfwidth, y0 - halfheight],
 					[x0 + halfwidth, y0 + halfheight],
 					[x0 - halfwidth, y0 + halfheight]
 				]; 
    			return "M" + points.join("L") + "z";	
  			}
  			
  			function triangle(x, y, height) {
  				// Create the svg text representation of an equilateral triangle.
  				// Unlike the shapes above, do not create this centered on 0,0.
  				// The x and y are the coordinates of the top of the triangle. 
  		
  				x = x;	
  				y = y;
 				dy = height + 1; // 1 pixel padding so shapes overlap a little
 				dx = dy / Math.sqrt(3);
 				
  				var points = [
  					[x, y],
  					[x + dx, y + dy],
  					[x - dx, y + dy]
  				];
    			return "M" + points.join("L") + "z";	
  			}
  			
  			function upsidedown_triangle(x, y, height) {
  				// Create the svg text representation of an equilateral triangle.
  				// Unlike the shapes above, do not create this centered on 0,0.
  				// The x and y are the coordinates of the center of the top of the triangle. 
  		
  				x = x;	
  				y = y;
 				dy = height;
 				dx = dy / Math.sqrt(3);
 				
  				var points = [
  					[x - dx, y],
  					[x + dx, y],
  					[x, y + dy]
  				];
    			return "M" + points.join("L") + "z";	
  			}
 			
 			function trivariate_legend(startx, starty, width, count) {
 				// Create a one-dimensional array storing the elements 
 				// of a trivariate legend (represented as an equilateral triangle). 
 				// Returns the array, suitable for joining with a svg.
 				// Note: count is # of divisions. # of swatches will be count + 1.
 				// startx and starty are the upper left corner of the triangle's 
 				// bounding box. Width is the width of the triangle's bounding box.
 				// (Technically, the bounding box of the swatch centers.)
 				// The x and y coordinates of the center of each swatch is stored
 				// in each array element. The caller of this function is responsible
 				// for creating svg symbols at those points (circles, hexagons, etc) 
 				
 				make_triangle = true;
 				
 				array = new Array(); 
 				id = 0;
 				xstep = width / count;
 				ystep = Math.sqrt(3) * xstep / 2;
 				
 				// Create the rows
 				for (var i = 0; i <= count; i++) {
 					
 					// Create the columns 
 					// (1st column has 1 row, 2nd column has 2 rows, etc)
 					for (var j = 0; j <= i; j++ ) {
 						
 						x = startx + j * xstep + width / 2 - i * xstep / 2;
 						y = starty + i * ystep;
 						shape = triangle(x, y, ystep);
 						
 						array.push(
 							{
 								x: x,
 								y: y,
 								i: i,
 								j: j,
 								PCTSODA: (count - i) / count,
 								PCTPOP: (i - j) / count, 
 								PCTCOKE: (j) / count,
 								PCTOTHER: 0,
 								id: id++,
 								shp: shape
 							}
 						);
 						
 						if (j > 0) {
 							x = startx + j * xstep + width / 2 - i * xstep / 2 - xstep / 2;
 							y = starty + i * ystep;
 							shape = upsidedown_triangle(x, y, ystep);
 						
 							array.push(
 								{
 									x: x,
 									y: y,
 									i: i,
 									j: j,
 									PCTSODA: (count - i) / count,
 									PCTPOP: (i - j + 0.5) / count, 
 									PCTCOKE: (j - 0.5) / count,
 									PCTOTHER: 0,
 									id: id++,
 									shp: shape
 								}
 							);
 						}
 					}
 				}
 				return array;
 			}
 			
 			function univariate_legend(startx, starty, height, width, count) {
 				// Create a one-dimensional array storing the elements 
 				// of a univariate legend (represented as a series of adjoining squares). 
 				// Returns the array, suitable for joining with a svg.
 				// Note: count is # of divisions. # of swatches will be count + 1.
 				// startx and starty are the upper left corner of the legend's 
 				// bounding box. Width is the width of the legend's bounding box.
 				// The x and y coordinates of the center of each swatch is stored
 				// in each array element. The caller of this function is responsible
 				// for creating svg symbols at those points (squares, etc) 
 				// 
 				// The more appropriate d3/svg method for a univariate legend 
 				// (I think) would be to create a line with the appropriate 
 				// thickness to give the impression of a row of squares. But 
 				// here I want the squares to be consistent with the color
 				// swatches in the trivariate legend.
 				
 				array = new Array();
 				id = 0;
 				xstep = width / count;
 				
 				// Create the rows
 				for (var i = 0; i <= count; i++) {
 					array.push(
 						{
 							x: startx + i * xstep,
 							y: starty,
 							i: i,
 							PCTSODA: 0,
 							PCTPOP: 0,
 							PCTCOKE: 0,
 							PCTOTHER: i / count,
 							id: id++
 						}
 					);
 				}
 				return array;
 			}
 		
 			// Parameters for the trivariate legend	
 			var x = 660,
 				y = 400,
 				width = 60,
 				count = 10;
 			
 			tri_legend_g = svg.append("g")
 				.attr("class", "legend");
 				
 			// Add a drop shadow for the trivariate legend	
 			tri_legend_g.append("path")
 				// These calculations are a complete mess because I am calculating all my triangles
 				// in different ways. Need to make these more coherent.
 				.attr("d", triangle(x + width / 2, y, 1 + Math.sqrt(3) * (width + count / 2) / 2))
 				.attr("class", "landshadow");
 				
 			tri_legend_data = trivariate_legend(x, y, width, count);
 			
 			// Select (and create) swatch class.
 			// Do this instead of selectAll("path") to avoid binding data to the shadow path
 			tri_legend_svg = tri_legend_g.selectAll(".swatch")
 					.data(tri_legend_data)
 			  	.enter().append("path")
 			  		.attr("d", function(d) { return d.shp })
 			  		.style("fill", function(d) {
 			  			return cmyk(d);
 			  		})
 			
 			var spacing = 10;
 			 		
 			corner_labels = [
 				{
 					label: "pop",
 					x: x-spacing,
 					y: y+width+spacing
 				},
 				{
 					label: "soda",
 					x: x+width/2,
 					y: y-spacing
 				},
 				{
 					label: "coke",
 					x: x+width+spacing,
 					y: y+width+spacing
 				}
 			];

 	  		tri_legend_g.selectAll("text")
 	  			.data(corner_labels)	
 	  		  .enter().append("text")
 	  		  	.attr("text-anchor", "middle")
 	  			.attr("x", function(d) { return d.x })
 	  			.attr("y", function(d) { return d.y })
 	  			.attr("font-size", "10px")
 			  	.attr("transform", function(d) { return "translate(" + -56 + "," + -50 + ")" }) // why are they shifted?
 	  			.text(function(d) { return d.label });
 	  		
 	  		// Parameters for the univariate legend	
 	  		var x = 550,
 				y = 452,
 				width = 60,
 				height = 10,
 				count = 20;	
 			
 			uni_legend_g = svg.append("g")
 				.attr("class", "legend");
 				
 			// Add a drop shadow for the univariate legend	
 			uni_legend_g.append("path")
 			  	.attr("transform", "translate(" + ( x + width / 2 ) + "," + y + ")")
 				.attr("d", rectangle( 1 + height, 2 + width ))
 				.attr("class", "landshadow");
 			
 			uni_legend_data = univariate_legend(x, y, height, width, count);
 			
 			// Select (and create) swatch class.
 			// Do this instead of selectAll("path") to avoid binding data to the shadow path
 			uni_legend_svg = uni_legend_g.selectAll(".swatch")
 					.data(uni_legend_data)
 			  	.enter().append("path")
 			  		.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")" })
 			  		// Add 1 just to pad the hexagons a bit so they blend
 			  		.attr("d", rectangle( 1 + height, 1 + width/count ))
 			  		.style("fill", function(d) {
 			  			return bwscale(d.PCTOTHER);
 			  		});
 			  		
 			uni_labels = [
 				{
 					label: "other",
 					x: x+width/2,
 					y: y+spacing+10
 				}
 			];
 			
 	  		uni_legend_label = uni_legend_g.selectAll("text")
 	  			.data(uni_labels)	
 	  		  .enter().append("text")
 	  		  	.attr("text-anchor", "middle")
 	  			.attr("x", function(d) { return d.x })
 	  			.attr("y", function(d) { return d.y })
 	  			.attr("font-size", "10px")
 	  			.text(function(d) { return d.label });
 	  			
 	  		// Parameters for the no data swatch
 	  		var x = 490,
 	  			y = 452,
 	  			width = 20,
 	  			height = 9;
 	  			
 	  		nodata_legend_g = svg.append("g")
 				.attr("class", "legend")
 				
 	  		// Add a drop shadow for the no data swatch
 			nodata_legend_g.append("path")
 			  	.attr("transform", "translate(" + ( x + width / 2 ) + "," + y + ")")
 				.attr("d", rectangle( 1 + height, 2 + width ))
 				.attr("class", "landshadow");  		
 				
 			nodata_legend_data = new Array(
 				{
 					PCTSODA: 0,
 					PCTPOP: 0,
 					PCTCOKE: 0,
 					PCTOTHER: 0
 				}
 			);
 				
 			// Select (and create) swatch class.
 			// Do this instead of selectAll("path") to avoid binding data to the shadow path
 			nodata_legend_svg = nodata_legend_g.selectAll(".swatch") 
 					.data(nodata_legend_data)	
 				.enter().append("path")
 			  		.attr("transform", "translate(" + ( x + width / 2 ) + "," + y + ")")
 					.attr("d", rectangle( 1 + height, 2 + width ))
 					.style("fill", function(d) {
 						return cmyk(d);
 					});
 			
 			nodata_labels = [
 				{
 					label: "no data",
 					x: x+width/2,
 					y: y+spacing+10
 				}
 			];
 			
 	  		nodata_legend_g.selectAll("text")
 	  			.data(nodata_labels)	
 	  		  .enter().append("text")
 	  		  	.attr("text-anchor", "middle")
 	  			.attr("x", function(d) { return d.x })
 	  			.attr("y", function(d) { return d.y })
 	  			.attr("font-size", "10px")
 	  			.text(function(d) { return d.label });			
 	  		
 	  
 	  			
 	  		// Done creating legend	

 			// Load the TopoJSON of states and the tsv of popvssoda data in parallel
 			queue()
 				.defer(d3.json, "us.json")
 				.defer(d3.tsv, "pvscounty_fips.tsv")
 				.await(ready);

 			function ready(error, us, pvscounty_fips) {

 				pvscounty_fips.forEach(function(d) {
 					d.PCTPOP = +d.PCTPOP;
 					d.PCTSODA = +d.PCTSODA;
 					d.PCTCOKE = +d.PCTCOKE;
 					d.PCTOTHER = +d.PCTOTHER;
 				});

 				// Extract just the land from the us TopoJSON (resulting in a GeoJSON)
 				// and load that as the datum into a new SVG path. This will be the
 				// background shadow. 
 				svg.append("path").datum(topojson.object(us, us.objects.land))
 					.attr("class", "landshadow")
 					.attr("d", path);

 				var counties = svg.append("g")
 					.attr("class", "counties")
 					.selectAll("path")
 						.data(topojson.object(us, us.objects.counties).geometries)
 					.enter().append("path")
 						.attr("d", path)
 						.attr("class", "addhover");
 			
 				// Step through all the TopoJSON objects and add the pvs attributes
 				// to the correct one.
 				// I'm not sure if the "each" function is the ideal approach, but it works.
 				counties.each(function(d, i) {	
 					var d = this.__data__;
 					for (var j = 0; j < pvscounty_fips.length; j++) {
 						var p = pvscounty_fips[j];
 						if (d.id == p.id) {
 							// Copy the data values into the TopoJSON
 							// Must be a more efficient way of doing this.
 							d.PCTPOP = p.PCTPOP;
 							d.PCTSODA = p.PCTSODA;
 							d.PCTCOKE = p.PCTCOKE;
 							d.PCTOTHER = p.PCTOTHER;
 							d.County_Name = p.County_Name;
 							d.ENGTYPE = p.ENGTYPE;
 							d.State = p.State;
 							d.SUMPOP = p.SUMPOP;
 							d.SUMSODA = p.SUMSODA;
 							d.SUMCOKE = p.SUMCOKE;
 							d.SUMOTHER = p.SUMOTHER;
 							if (p.PCTPOP == 0 && p.PCTSODA == 0 && p.PCTCOKE == 0 && p.PCTOTHER == 0) {
 								d.NODATA = true
 							} else {
 								d.NODATA = false
 							}
 						}
 					}
 				});
 			
 				// Start out by filling the counties with the cmyk scheme	
 				counties	
 					.style("fill", function(d) {
 						return cmyk(d);

 				}).on("mouseover", function(d, i) {
 					d3.select(this).attr("stroke", "gray");

 				}).on("mouseout", function(d, i) {
 					d3.select(this).attr("stroke", "none");
 				});
 			
 				
 				// Add the shapes of states on top, just to have outlines.
 				svg.append("path").datum(topojson.mesh(us, us.objects.states, function(a, b) {
 					return a.id !== b.id;
 				})).attr("class", "states").attr("d", path);
 		
 				dursecs = 500;
 					
 				// Add functions to each button
 				d3.select("#cmykbutton").on("mouseover", function() {
 					tri_legend_svg.style("fill", function(d) { return cmyk(d); });
 					tri_legend_g.transition().duration(dursecs).attr("opacity", 1);
 					uni_legend_svg.style("fill", function(d) { return bwscale(d.PCTOTHER); });
 					uni_legend_label.text("other");
 					nodata_legend_g.transition().duration(dursecs).attr("opacity", 1);
 					counties.style("fill", function(d) { return cmyk(d); });
 				});
 				d3.select("#cmykpopbutton").on("mouseover", function() {
 					tri_legend_g.transition().duration(dursecs).attr("opacity", 0);
 					uni_legend_svg.style("fill", function(d) { return cmykpop(d.PCTOTHER); });
 					uni_legend_label.text("pop");
 					nodata_legend_g.transition().duration(dursecs).attr("opacity", 0);
 					counties.style("fill", function(d) { return cmykpop(d.PCTPOP); });
 				});
 				d3.select("#cmyksodabutton").on("mouseover", function() {
 					tri_legend_g.transition().duration(dursecs).attr("opacity", 0);
 					uni_legend_svg.style("fill", function(d) { return cmyksoda(d.PCTOTHER); });
 					uni_legend_label.text("soda");
 					nodata_legend_g.transition().duration(dursecs).attr("opacity", 0);
 					counties.style("fill", function(d) { return cmyksoda(d.PCTSODA); });
 				});
 				d3.select("#cmykcokebutton").on("mouseover", function() {
 					tri_legend_g.transition().duration(dursecs).attr("opacity", 0);
 					uni_legend_svg.style("fill", function(d) { return cmykcoke(d.PCTOTHER); });
 					uni_legend_label.text("coke");
 					nodata_legend_g.transition().duration(dursecs).attr("opacity", 0);
 					counties.style("fill", function(d) { return cmykcoke(d.PCTCOKE); });
 				});
 				d3.select("#cmykotherbutton").on("mouseover", function() {
 					tri_legend_g.transition().duration(dursecs).attr("opacity", 0);
 					uni_legend_svg.style("fill", function(d) { return bwscale(d.PCTOTHER); });
 					uni_legend_label.text("other");
 					nodata_legend_g.transition().duration(dursecs).attr("opacity", 0);
 					counties.style("fill", function(d) { return bwscale(d.PCTOTHER) });
 				});
 				d3.select("#rgbbutton").on("mouseover", function() {
 					tri_legend_svg.style("fill", function(d) { return rgb(d); });
 					tri_legend_g.transition().duration(dursecs).attr("opacity", 1);
 					uni_legend_svg.style("fill", function(d) { return bwscale(d.PCTOTHER); });
 					uni_legend_label.text("other");
 					nodata_legend_g.transition().duration(dursecs).attr("opacity", 1);
 					counties.style("fill", function(d) { return rgb(d) });
 				});
 				d3.select("#rgbpopbutton").on("mouseover", function() {
 					tri_legend_g.transition().duration(dursecs).attr("opacity", 0);
 					uni_legend_svg.style("fill", function(d) { return rgbpop(d.PCTOTHER); });
 					uni_legend_label.text("pop");
 					nodata_legend_g.transition().duration(dursecs).attr("opacity", 0);
 					counties.style("fill", function(d) { return rgbpop(d.PCTPOP); });
 				});
 				d3.select("#rgbsodabutton").on("mouseover", function() {
 					tri_legend_g.transition().duration(dursecs).attr("opacity", 0);
 					uni_legend_svg.style("fill", function(d) { return rgbsoda(d.PCTOTHER); });
 					uni_legend_label.text("soda");
 					nodata_legend_g.transition().duration(dursecs).attr("opacity", 0);
 					counties.style("fill", function(d) { return rgbsoda(d.PCTSODA); });
 				});
 				d3.select("#rgbcokebutton").on("mouseover", function() {
 					tri_legend_g.transition().duration(dursecs).attr("opacity", 0);
 					uni_legend_svg.style("fill", function(d) { return rgbcoke(d.PCTOTHER); });
 					uni_legend_label.text("coke");
 					nodata_legend_g.transition().duration(dursecs).attr("opacity", 0);
 					counties.style("fill", function(d) { return rgbcoke(d.PCTCOKE); });
 				});
 				d3.select("#rgbotherbutton").on("mouseover", function() {
 					tri_legend_g.transition().duration(dursecs).attr("opacity", 0);
 					uni_legend_svg.style("fill", function(d) { return bwscale(d.PCTOTHER); });
 					uni_legend_label.text("other");
 					nodata_legend_g.transition().duration(dursecs).attr("opacity", 0);
 					counties.style("fill", function(d) { return bwscale(d.PCTOTHER) });
 				});
 				d3.select("#bwpopbutton").on("mouseover", function() {
 					tri_legend_g.transition().duration(dursecs).attr("opacity", 0);
 					uni_legend_svg.style("fill", function(d) { return bwscale(d.PCTOTHER); });
 					uni_legend_label.text("pop");
 					nodata_legend_g.transition().duration(dursecs).attr("opacity", 0);
 					counties.style("fill", function(d) { return bwscale(d.PCTPOP) });
 				});
 				d3.select("#bwsodabutton").on("mouseover", function() {
 					tri_legend_g.transition().duration(dursecs).attr("opacity", 0);
 					uni_legend_svg.style("fill", function(d) { return bwscale(d.PCTOTHER); });
 					uni_legend_label.text("soda");
 					nodata_legend_g.transition().duration(dursecs).attr("opacity", 0);
 					counties.style("fill", function(d) { return bwscale(d.PCTSODA) });
 				});
 				d3.select("#bwcokebutton").on("mouseover", function() {
 					tri_legend_g.transition().duration(dursecs).attr("opacity", 0);
 					uni_legend_svg.style("fill", function(d) { return bwscale(d.PCTOTHER); });
 					uni_legend_label.text("coke");
 					nodata_legend_g.transition().duration(dursecs).attr("opacity", 0);
 					counties.style("fill", function(d) { return bwscale(d.PCTCOKE) });
 				});
 				d3.select("#bwotherbutton").on("mouseover", function() {
 					tri_legend_g.transition().duration(dursecs).attr("opacity", 0);
 					uni_legend_svg.style("fill", function(d) { return bwscale(d.PCTOTHER); });
 					uni_legend_label.text("other");
 					nodata_legend_g.transition().duration(dursecs).attr("opacity", 0);
 					counties.style("fill", function(d) { return bwscale(d.PCTOTHER) });
 				});
 			}

 		</script>
 	</body>
 </html>
diff --git a/pvscounty_fips.tsv b/pvscounty_fips.tsv
diff --git a/thumbnail.png b/thumbnail.png
diff --git a/us.json b/us.json
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	<script src="//d3js.org/queue.v1.min.js"></script>
	<script src="//d3js.org/topojson.v0.min.js"></script>
	<style type="text/css">
	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }


	.landshadow {
	fill: none;
	stroke: #ccc;
	stroke-width: 4px;
	stroke-linejoin: round;
	}
	.states {
	fill: none;
	stroke: #fff;
	stroke-linejoin: round;
	}
	.counties {
	fill: #fff;
	}
	#map-container {
	height: 500px;
	width: 1500px;
	text-align: center;
	position: relative;
	}
	#d3map {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	margin: 0;
	}

	</style>
	</head>
	<body>



	<div id="map-container">
	<!-- the D3 map will be rendered here -->
	<svg id="d3map"></svg>
	</div>

	<div id="tabs">
	<ul>
	<li>
	<a href="#tabs-1">Cyan/Magenta/Yellow</a>
	</li>
	<li>
	<a href="#tabs-2">Red/Green/Blue</a>
	</li>
	<li>
	<a href="#tabs-3">Black and White</a>
	</li>
	</ul>
	<div id="tabs-1">
	<ul>
	<li id="cmykbutton"> show all </li>
	<li id="cmykpopbutton"> pop </li>
	<li id="cmyksodabutton"> soda </li>
	<li id="cmykcokebutton"> coke </li>
	<li id="cmykotherbutton"> other </li>
	</ul>
	</div>
	<div id="tabs-2">
	<ul>
	<li id="rgbbutton"> show all </li>
	<li id="rgbpopbutton"> pop </li>
	<li id="rgbsodabutton"> soda </li>
	<li id="rgbcokebutton"> coke </li>
	<li id="rgbotherbutton"> other </li>
	</ul>
	</div>
	<div id="tabs-3">
	<ul>
	<li class="not_avail"> show all </li>
	<li id="bwpopbutton"> pop </li>
	<li id="bwsodabutton"> soda </li>
	<li id="bwcokebutton"> coke </li>
	<li id="bwotherbutton"> other </li>
	</ul>
	</div>
	</div>


	<script type="application/javascript">

	// Create some scales for univariate modes
	var bwscale = d3.scale.linear()
	.domain([0, 1])
	.range(["white", "black"]);

	var cmykpop = d3.scale.linear()
	.domain([0, 1])
	.range(["white", "yellow"]);

	var cmyksoda = d3.scale.linear()
	.domain([0, 1])
	.range(["white", "cyan"]);

	var cmykcoke = d3.scale.linear()
	.domain([0, 1])
	.range(["white", "magenta"]);

	var rgbpop = d3.scale.linear()
	.domain([0, 1])
	.range(["white", "lime"]); // Note, #OOFFOO is not "green"

	var rgbsoda = d3.scale.linear()
	.domain([0, 1])
	.range(["white", "blue"]);

	var rgbcoke = d3.scale.linear()
	.domain([0, 1])
	.range(["white", "red"]);

	// Ideally, I would rewrite these as a d3.scale.trivariate() plugin.
	// Although, this is a misnomer for two reasons:
	// First, the three different variables are not independent.
	// Second, the PVS encodes other (a 4th possible value)
	// as black, in both the "rgb" and "cmyk" modes.
	function cmyk(d) {
	if (d.PCTPOP == 0 && d.PCTSODA == 0 && d.PCTCOKE == 0 && d.PCTOTHER == 0) {
	return "white";
	} else {
	return "rgb("
	+ Math.round((d.PCTPOP + d.PCTCOKE) * 100) + "%,"
	+ Math.round((d.PCTSODA + d.PCTPOP) * 100) + "%,"
	+ Math.round((d.PCTCOKE + d.PCTSODA) * 100) + "%)";
	}
	}

	function rgb(d) {
	if (d.PCTPOP == 0 && d.PCTSODA == 0 && d.PCTCOKE == 0 && d.PCTOTHER == 0) {
	return "white";
	} else {
	return "rgb("
	+ Math.round(d.PCTCOKE * 100) + "%,"
	+ Math.round(d.PCTPOP * 100) + "%,"
	+ Math.round(d.PCTSODA * 100) + "%)";
	}
	}

	var path = d3.geo.path()
	.projection(d3.geo.albersUsa().translate([400,250]).scale(800));

	var svg = d3.select("#d3map");

	// The d3_hexbinAngles and hexagon function are (obviously)
	// borrowed from https://github.com/d3/d3-plugins/tree/master/hexbin

	var d3_hexbinAngles = d3.range(0, 2 * Math.PI, Math.PI / 3);

	function hexagon(radius) {
	if (arguments.length < 1) {
	// This is where I should calculate the correct radius
	// based on the number of divisions in the overall triangle... but then
	// the hexagon would have to be linked to the legend
	// somehow.
	radius = 8;
	}
	var x0 = 0, y0 = 0; // create shape centered at 0,0
	var points = d3_hexbinAngles.map(function(angle) {
	var x1 = Math.sin(angle) * radius,
	y1 = -Math.cos(angle) * radius,
	dx = x1 - x0,
	dy = y1 - y0;
	// I'm not sure why this line is in the hexbin code,
	// but it was breaking my hexagons, and they work fine
	// without it:
	//x0 = x1, y0 = y1;
	return [dx, dy];
	});
	return "M" + points.join("L") + "z";
	}

	function rectangle(height, width) {
	if (arguments.length < 2) {
	// This is where I should calculate the correct size
	// based on the number of division in the overall triangle... but then
	// the rectangle would have to be linked to the legend
	// somehow.
	width = 8;
	height = 8;
	}
	halfwidth = width / 2;
	halfheight = height / 2;
	var x0 = 0, y0 = 0; // create shape centered at 0,0
	var points = [
	[x0 - halfwidth, y0 - halfheight],
	[x0 + halfwidth, y0 - halfheight],
	[x0 + halfwidth, y0 + halfheight],
	[x0 - halfwidth, y0 + halfheight]
	];
	return "M" + points.join("L") + "z";
	}

	function triangle(x, y, height) {
	// Create the svg text representation of an equilateral triangle.
	// Unlike the shapes above, do not create this centered on 0,0.
	// The x and y are the coordinates of the top of the triangle.

	x = x;
	y = y;
	dy = height + 1; // 1 pixel padding so shapes overlap a little
	dx = dy / Math.sqrt(3);

	var points = [
	[x, y],
	[x + dx, y + dy],
	[x - dx, y + dy]
	];
	return "M" + points.join("L") + "z";
	}

	function upsidedown_triangle(x, y, height) {
	// Create the svg text representation of an equilateral triangle.
	// Unlike the shapes above, do not create this centered on 0,0.
	// The x and y are the coordinates of the center of the top of the triangle.

	x = x;
	y = y;
	dy = height;
	dx = dy / Math.sqrt(3);

	var points = [
	[x - dx, y],
	[x + dx, y],
	[x, y + dy]
	];
	return "M" + points.join("L") + "z";
	}

	function trivariate_legend(startx, starty, width, count) {
	// Create a one-dimensional array storing the elements
	// of a trivariate legend (represented as an equilateral triangle).
	// Returns the array, suitable for joining with a svg.
	// Note: count is # of divisions. # of swatches will be count + 1.
	// startx and starty are the upper left corner of the triangle's
	// bounding box. Width is the width of the triangle's bounding box.
	// (Technically, the bounding box of the swatch centers.)
	// The x and y coordinates of the center of each swatch is stored
	// in each array element. The caller of this function is responsible
	// for creating svg symbols at those points (circles, hexagons, etc)

	make_triangle = true;

	array = new Array();
	id = 0;
	xstep = width / count;
	ystep = Math.sqrt(3) * xstep / 2;

	// Create the rows
	for (var i = 0; i <= count; i++) {

	// Create the columns
	// (1st column has 1 row, 2nd column has 2 rows, etc)
	for (var j = 0; j <= i; j++ ) {

	x = startx + j * xstep + width / 2 - i * xstep / 2;
	y = starty + i * ystep;
	shape = triangle(x, y, ystep);

	array.push(
	{
	x: x,
	y: y,
	i: i,
	j: j,
	PCTSODA: (count - i) / count,
	PCTPOP: (i - j) / count,
	PCTCOKE: (j) / count,
	PCTOTHER: 0,
	id: id++,
	shp: shape
	}
	);

	if (j > 0) {
	x = startx + j * xstep + width / 2 - i * xstep / 2 - xstep / 2;
	y = starty + i * ystep;
	shape = upsidedown_triangle(x, y, ystep);

	array.push(
	{
	x: x,
	y: y,
	i: i,
	j: j,
	PCTSODA: (count - i) / count,
	PCTPOP: (i - j + 0.5) / count,
	PCTCOKE: (j - 0.5) / count,
	PCTOTHER: 0,
	id: id++,
	shp: shape
	}
	);
	}
	}
	}
	return array;
	}

	function univariate_legend(startx, starty, height, width, count) {
	// Create a one-dimensional array storing the elements
	// of a univariate legend (represented as a series of adjoining squares).
	// Returns the array, suitable for joining with a svg.
	// Note: count is # of divisions. # of swatches will be count + 1.
	// startx and starty are the upper left corner of the legend's
	// bounding box. Width is the width of the legend's bounding box.
	// The x and y coordinates of the center of each swatch is stored
	// in each array element. The caller of this function is responsible
	// for creating svg symbols at those points (squares, etc)
	//
	// The more appropriate d3/svg method for a univariate legend
	// (I think) would be to create a line with the appropriate
	// thickness to give the impression of a row of squares. But
	// here I want the squares to be consistent with the color
	// swatches in the trivariate legend.

	array = new Array();
	id = 0;
	xstep = width / count;

	// Create the rows
	for (var i = 0; i <= count; i++) {
	array.push(
	{
	x: startx + i * xstep,
	y: starty,
	i: i,
	PCTSODA: 0,
	PCTPOP: 0,
	PCTCOKE: 0,
	PCTOTHER: i / count,
	id: id++
	}
	);
	}
	return array;
	}

	// Parameters for the trivariate legend
	var x = 660,
	y = 400,
	width = 60,
	count = 10;

	tri_legend_g = svg.append("g")
	.attr("class", "legend");

	// Add a drop shadow for the trivariate legend
	tri_legend_g.append("path")
	// These calculations are a complete mess because I am calculating all my triangles
	// in different ways. Need to make these more coherent.
	.attr("d", triangle(x + width / 2, y, 1 + Math.sqrt(3) * (width + count / 2) / 2))
	.attr("class", "landshadow");

	tri_legend_data = trivariate_legend(x, y, width, count);

	// Select (and create) swatch class.
	// Do this instead of selectAll("path") to avoid binding data to the shadow path
	tri_legend_svg = tri_legend_g.selectAll(".swatch")
	.data(tri_legend_data)
	.enter().append("path")
	.attr("d", function(d) { return d.shp })
	.style("fill", function(d) {
	return cmyk(d);
	})

	var spacing = 10;

	corner_labels = [
	{
	label: "pop",
	x: x-spacing,
	y: y+width+spacing
	},
	{
	label: "soda",
	x: x+width/2,
	y: y-spacing
	},
	{
	label: "coke",
	x: x+width+spacing,
	y: y+width+spacing
	}
	];

	tri_legend_g.selectAll("text")
	.data(corner_labels)
	.enter().append("text")
	.attr("text-anchor", "middle")
	.attr("x", function(d) { return d.x })
	.attr("y", function(d) { return d.y })
	.attr("font-size", "10px")
	.attr("transform", function(d) { return "translate(" + -56 + "," + -50 + ")" }) // why are they shifted?
	.text(function(d) { return d.label });

	// Parameters for the univariate legend
	var x = 550,
	y = 452,
	width = 60,
	height = 10,
	count = 20;

	uni_legend_g = svg.append("g")
	.attr("class", "legend");

	// Add a drop shadow for the univariate legend
	uni_legend_g.append("path")
	.attr("transform", "translate(" + ( x + width / 2 ) + "," + y + ")")
	.attr("d", rectangle( 1 + height, 2 + width ))
	.attr("class", "landshadow");

	uni_legend_data = univariate_legend(x, y, height, width, count);

	// Select (and create) swatch class.
	// Do this instead of selectAll("path") to avoid binding data to the shadow path
	uni_legend_svg = uni_legend_g.selectAll(".swatch")
	.data(uni_legend_data)
	.enter().append("path")
	.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")" })
	// Add 1 just to pad the hexagons a bit so they blend
	.attr("d", rectangle( 1 + height, 1 + width/count ))
	.style("fill", function(d) {
	return bwscale(d.PCTOTHER);
	});

	uni_labels = [
	{
	label: "other",
	x: x+width/2,
	y: y+spacing+10
	}
	];

	uni_legend_label = uni_legend_g.selectAll("text")
	.data(uni_labels)
	.enter().append("text")
	.attr("text-anchor", "middle")
	.attr("x", function(d) { return d.x })
	.attr("y", function(d) { return d.y })
	.attr("font-size", "10px")
	.text(function(d) { return d.label });

	// Parameters for the no data swatch
	var x = 490,
	y = 452,
	width = 20,
	height = 9;

	nodata_legend_g = svg.append("g")
	.attr("class", "legend")

	// Add a drop shadow for the no data swatch
	nodata_legend_g.append("path")
	.attr("transform", "translate(" + ( x + width / 2 ) + "," + y + ")")
	.attr("d", rectangle( 1 + height, 2 + width ))
	.attr("class", "landshadow");

	nodata_legend_data = new Array(
	{
	PCTSODA: 0,
	PCTPOP: 0,
	PCTCOKE: 0,
	PCTOTHER: 0
	}
	);

	// Select (and create) swatch class.
	// Do this instead of selectAll("path") to avoid binding data to the shadow path
	nodata_legend_svg = nodata_legend_g.selectAll(".swatch")
	.data(nodata_legend_data)
	.enter().append("path")
	.attr("transform", "translate(" + ( x + width / 2 ) + "," + y + ")")
	.attr("d", rectangle( 1 + height, 2 + width ))
	.style("fill", function(d) {
	return cmyk(d);
	});

	nodata_labels = [
	{
	label: "no data",
	x: x+width/2,
	y: y+spacing+10
	}
	];

	nodata_legend_g.selectAll("text")
	.data(nodata_labels)
	.enter().append("text")
	.attr("text-anchor", "middle")
	.attr("x", function(d) { return d.x })
	.attr("y", function(d) { return d.y })
	.attr("font-size", "10px")
	.text(function(d) { return d.label });



	// Done creating legend

	// Load the TopoJSON of states and the tsv of popvssoda data in parallel
	queue()
	.defer(d3.json, "us.json")
	.defer(d3.tsv, "pvscounty_fips.tsv")
	.await(ready);

	function ready(error, us, pvscounty_fips) {

	pvscounty_fips.forEach(function(d) {
	d.PCTPOP = +d.PCTPOP;
	d.PCTSODA = +d.PCTSODA;
	d.PCTCOKE = +d.PCTCOKE;
	d.PCTOTHER = +d.PCTOTHER;
	});

	// Extract just the land from the us TopoJSON (resulting in a GeoJSON)
	// and load that as the datum into a new SVG path. This will be the
	// background shadow.
	svg.append("path").datum(topojson.object(us, us.objects.land))
	.attr("class", "landshadow")
	.attr("d", path);

	var counties = svg.append("g")
	.attr("class", "counties")
	.selectAll("path")
	.data(topojson.object(us, us.objects.counties).geometries)
	.enter().append("path")
	.attr("d", path)
	.attr("class", "addhover");

	// Step through all the TopoJSON objects and add the pvs attributes
	// to the correct one.
	// I'm not sure if the "each" function is the ideal approach, but it works.
	counties.each(function(d, i) {
	var d = this.__data__;
	for (var j = 0; j < pvscounty_fips.length; j++) {
	var p = pvscounty_fips[j];
	if (d.id == p.id) {
	// Copy the data values into the TopoJSON
	// Must be a more efficient way of doing this.
	d.PCTPOP = p.PCTPOP;
	d.PCTSODA = p.PCTSODA;
	d.PCTCOKE = p.PCTCOKE;
	d.PCTOTHER = p.PCTOTHER;
	d.County_Name = p.County_Name;
	d.ENGTYPE = p.ENGTYPE;
	d.State = p.State;
	d.SUMPOP = p.SUMPOP;
	d.SUMSODA = p.SUMSODA;
	d.SUMCOKE = p.SUMCOKE;
	d.SUMOTHER = p.SUMOTHER;
	if (p.PCTPOP == 0 && p.PCTSODA == 0 && p.PCTCOKE == 0 && p.PCTOTHER == 0) {
	d.NODATA = true
	} else {
	d.NODATA = false
	}
	}
	}
	});

	// Start out by filling the counties with the cmyk scheme
	counties
	.style("fill", function(d) {
	return cmyk(d);

	}).on("mouseover", function(d, i) {
	d3.select(this).attr("stroke", "gray");

	}).on("mouseout", function(d, i) {
	d3.select(this).attr("stroke", "none");
	});


	// Add the shapes of states on top, just to have outlines.
	svg.append("path").datum(topojson.mesh(us, us.objects.states, function(a, b) {
	return a.id !== b.id;
	})).attr("class", "states").attr("d", path);

	dursecs = 500;

	// Add functions to each button
	d3.select("#cmykbutton").on("mouseover", function() {
	tri_legend_svg.style("fill", function(d) { return cmyk(d); });
	tri_legend_g.transition().duration(dursecs).attr("opacity", 1);
	uni_legend_svg.style("fill", function(d) { return bwscale(d.PCTOTHER); });
	uni_legend_label.text("other");
	nodata_legend_g.transition().duration(dursecs).attr("opacity", 1);
	counties.style("fill", function(d) { return cmyk(d); });
	});
	d3.select("#cmykpopbutton").on("mouseover", function() {
	tri_legend_g.transition().duration(dursecs).attr("opacity", 0);
	uni_legend_svg.style("fill", function(d) { return cmykpop(d.PCTOTHER); });
	uni_legend_label.text("pop");
	nodata_legend_g.transition().duration(dursecs).attr("opacity", 0);
	counties.style("fill", function(d) { return cmykpop(d.PCTPOP); });
	});
	d3.select("#cmyksodabutton").on("mouseover", function() {
	tri_legend_g.transition().duration(dursecs).attr("opacity", 0);
	uni_legend_svg.style("fill", function(d) { return cmyksoda(d.PCTOTHER); });
	uni_legend_label.text("soda");
	nodata_legend_g.transition().duration(dursecs).attr("opacity", 0);
	counties.style("fill", function(d) { return cmyksoda(d.PCTSODA); });
	});
	d3.select("#cmykcokebutton").on("mouseover", function() {
	tri_legend_g.transition().duration(dursecs).attr("opacity", 0);
	uni_legend_svg.style("fill", function(d) { return cmykcoke(d.PCTOTHER); });
	uni_legend_label.text("coke");
	nodata_legend_g.transition().duration(dursecs).attr("opacity", 0);
	counties.style("fill", function(d) { return cmykcoke(d.PCTCOKE); });
	});
	d3.select("#cmykotherbutton").on("mouseover", function() {
	tri_legend_g.transition().duration(dursecs).attr("opacity", 0);
	uni_legend_svg.style("fill", function(d) { return bwscale(d.PCTOTHER); });
	uni_legend_label.text("other");
	nodata_legend_g.transition().duration(dursecs).attr("opacity", 0);
	counties.style("fill", function(d) { return bwscale(d.PCTOTHER) });
	});
	d3.select("#rgbbutton").on("mouseover", function() {
	tri_legend_svg.style("fill", function(d) { return rgb(d); });
	tri_legend_g.transition().duration(dursecs).attr("opacity", 1);
	uni_legend_svg.style("fill", function(d) { return bwscale(d.PCTOTHER); });
	uni_legend_label.text("other");
	nodata_legend_g.transition().duration(dursecs).attr("opacity", 1);
	counties.style("fill", function(d) { return rgb(d) });
	});
	d3.select("#rgbpopbutton").on("mouseover", function() {
	tri_legend_g.transition().duration(dursecs).attr("opacity", 0);
	uni_legend_svg.style("fill", function(d) { return rgbpop(d.PCTOTHER); });
	uni_legend_label.text("pop");
	nodata_legend_g.transition().duration(dursecs).attr("opacity", 0);
	counties.style("fill", function(d) { return rgbpop(d.PCTPOP); });
	});
	d3.select("#rgbsodabutton").on("mouseover", function() {
	tri_legend_g.transition().duration(dursecs).attr("opacity", 0);
	uni_legend_svg.style("fill", function(d) { return rgbsoda(d.PCTOTHER); });
	uni_legend_label.text("soda");
	nodata_legend_g.transition().duration(dursecs).attr("opacity", 0);
	counties.style("fill", function(d) { return rgbsoda(d.PCTSODA); });
	});
	d3.select("#rgbcokebutton").on("mouseover", function() {
	tri_legend_g.transition().duration(dursecs).attr("opacity", 0);
	uni_legend_svg.style("fill", function(d) { return rgbcoke(d.PCTOTHER); });
	uni_legend_label.text("coke");
	nodata_legend_g.transition().duration(dursecs).attr("opacity", 0);
	counties.style("fill", function(d) { return rgbcoke(d.PCTCOKE); });
	});
	d3.select("#rgbotherbutton").on("mouseover", function() {
	tri_legend_g.transition().duration(dursecs).attr("opacity", 0);
	uni_legend_svg.style("fill", function(d) { return bwscale(d.PCTOTHER); });
	uni_legend_label.text("other");
	nodata_legend_g.transition().duration(dursecs).attr("opacity", 0);
	counties.style("fill", function(d) { return bwscale(d.PCTOTHER) });
	});
	d3.select("#bwpopbutton").on("mouseover", function() {
	tri_legend_g.transition().duration(dursecs).attr("opacity", 0);
	uni_legend_svg.style("fill", function(d) { return bwscale(d.PCTOTHER); });
	uni_legend_label.text("pop");
	nodata_legend_g.transition().duration(dursecs).attr("opacity", 0);
	counties.style("fill", function(d) { return bwscale(d.PCTPOP) });
	});
	d3.select("#bwsodabutton").on("mouseover", function() {
	tri_legend_g.transition().duration(dursecs).attr("opacity", 0);
	uni_legend_svg.style("fill", function(d) { return bwscale(d.PCTOTHER); });
	uni_legend_label.text("soda");
	nodata_legend_g.transition().duration(dursecs).attr("opacity", 0);
	counties.style("fill", function(d) { return bwscale(d.PCTSODA) });
	});
	d3.select("#bwcokebutton").on("mouseover", function() {
	tri_legend_g.transition().duration(dursecs).attr("opacity", 0);
	uni_legend_svg.style("fill", function(d) { return bwscale(d.PCTOTHER); });
	uni_legend_label.text("coke");
	nodata_legend_g.transition().duration(dursecs).attr("opacity", 0);
	counties.style("fill", function(d) { return bwscale(d.PCTCOKE) });
	});
	d3.select("#bwotherbutton").on("mouseover", function() {
	tri_legend_g.transition().duration(dursecs).attr("opacity", 0);
	uni_legend_svg.style("fill", function(d) { return bwscale(d.PCTOTHER); });
	uni_legend_label.text("other");
	nodata_legend_g.transition().duration(dursecs).attr("opacity", 0);
	counties.style("fill", function(d) { return bwscale(d.PCTOTHER) });
	});
	}

	</script>
	</body>
	</html>