Pop vs Soda trivariate choropleth

Trivariate choropleth map from the Pop vs Soda Page

CC-BY Alan McConchie (@mappingmashups)

The original code is here (and it's really really old)

Built with blockbuilder.org

forked from almccon's block: Pop vs Soda trivariate choropleth

<!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">
					
					<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>

// 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));

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);

}).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>

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

https://d3js.org/queue.v1.min.js

https://d3js.org/topojson.v0.min.js