dougdowson · April 22, 2020 08:53
diff --git a/data.csv b/data.csv
diff --git a/index.html b/index.html
 <!DOCTYPE HTML>
 <meta charset="utf-8">
 <html>
 <head>

 <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400italic,600italic,700italic,200,300,400,600,700,900">
 <script src="http://d3js.org/d3.v3.min.js"></script>
 <script src="http://d3js.org/topojson.v1.min.js"></script>

 <style>

 body, h1, h2, h3, p {
  margin: 0;
  padding: 0;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 1em;
  color: #333;
  font-weight: 400;
 }

 #content {
  margin: 5px;
  padding: 20px;
  width: 805px;
  border: 1px solid #ccc;
 }

 #map {
  margin: 10px 0px 0px 0px;
  padding: 0px;
 }

 h1 {
  line-height: 1em;
  font-size: 1.75em;
  font-weight: 900;
  color: #000;
 }

 p {
  margin: 5px 0px 0px 0px;
 }

 .counties {
  fill: none;
 }

 .states {
  fill: none;
  stroke: #fff;
  stroke-linejoin: round;
 }

 select {
  margin: 5px 0px 0px 0px;
  display: block;
 }

 .tooltip {
  position: absolute;
  padding: 7px;
  font-size: 0.9em;
  pointer-events: none;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;

  -moz-box-shadow:    3px 3px 10px 0px rgba(0, 0, 0, 0.25);
  -webkit-box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.25);
  box-shadow:         3px 3px 10px 0px rgba(0, 0, 0, 0.25);
 }

 .tooltip p {
  margin: 0;
  padding: 0;
 }

 </style>

 </head>

 <body>

 <div id="content">
 <h1>Mapping Tax Day</h1>
 <p>Individual income tax statistics, 2011</p>
 <select id="varmenu">
 	<option selected value="itemized_pct">Itemized Deductions</option>
 	<option value="eitc_pct">Earned Income Credit</option>
 	<option value="mortgageded_pct">Mortgage Interest Deduction</option>
 	<option value="capgain_pct">Capital Gains</option>
 	<option value="interest_pct">Taxable Interest</option>
 	<option value="childcredit_pct">Child Credit</option>
 	<option value="prep_pct">Paid Tax Preparer</option>
 </select>
 <div id="map"></div>
 <p>Source: Internal Revenue Service.</p>
 </div>

 <script type="text/javascript" src="map.js"></script>

 </body>
 </html>


diff --git a/map.js b/map.js
 var width = 800,
    height = 500,
    formatPercent = d3.format(".1%");

 var color = d3.scale.quantize()
 	.domain([0, 0.58])
 		.range(["#ffffe5", "#f7fcb9", "#d9f0a3", "#addd8e", "#78c679", "#41ab5d", "#238443", "#006837", "#004529"]);

 var projection = d3.geo.albersUsa()
 	.translate([width / 2, height / 2]);

 var path = d3.geo.path()
 	.projection(projection);

 var svg = d3.select("#map").append("svg")
 	.attr("width", width)
 	.attr("height", height);

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

 d3.json("us.json", function (error, us) {
 	d3.csv("data.csv", function (error, data) {
 		var indicator = document.getElementById("varmenu").value;
 		varName = "Itemized Deductions";
 		var countyById = {};
 		var stateById = {};
 		var rateById = {};

 		data.forEach(function (d) {
 			countyById[d.id] = d.countyname;
 			stateById[d.id] = d.state;
 			rateById[d.id] = +d[indicator];
           });

 		svg.append("g")
 			.attr("class", "counties")
 			.selectAll("path")
 				.data(topojson.feature(us, us.objects.counties).features)
 				.enter().append("path")
 				.attr("class", "county")
 				.attr("d", path)
 				.style("fill", function (d) {
 					return color(rateById[d.id]);
 				});

 		svg.selectAll(".county")
 		.on("mouseover", function(d) {
 			tooltip.transition()
 			.duration(250)
 			.style("opacity", 1);
 			tooltip.html(
 			"<p><strong>" + countyById[d.id] + ", " + stateById[d.id] + "</strong></p>" +
 			"<p>" + varName + ": " + formatPercent(rateById[d.id]) + "</p>"
 			)
 			.style("left", (d3.event.pageX + 15) + "px")
 			.style("top", (d3.event.pageY - 28) + "px");
 		})
 		.on("mouseout", function(d) {
 			tooltip.transition()
 			.duration(250)
 			.style("opacity", 0);
 		});

 		svg.append("path")
 			.datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
 			.attr("class", "states")
 			.attr("d", path);

 		function update(indicator){
 			data.forEach(function (d) {
 				rateById[d.id] = +d[indicator];
 			});

 			indicator = document.getElementById("varmenu").value;
 			switch (indicator){
 			case "itemized_pct": color = d3.scale.quantize().domain([0, 0.58]).range(["#ffffe5", "#f7fcb9", "#d9f0a3", "#addd8e", "#78c679", "#41ab5d", "#238443", "#006837", "#004529"]); varName = "Itemized Deductions"; break;
 			case "eitc_pct": color = d3.scale.quantize().domain([0, 0.55]).range(["#ffffe5", "#f7fcb9", "#d9f0a3", "#addd8e", "#78c679", "#41ab5d", "#238443", "#006837", "#004529"]); varName = "Earned Income Credit"; break;
 			case "mortgageded_pct": color = d3.scale.quantize().domain([0, 0.55]).range(["#ffffe5", "#f7fcb9", "#d9f0a3", "#addd8e", "#78c679", "#41ab5d", "#238443", "#006837", "#004529"]); varName = "Mortgage Interest Deduction"; break;
 			case "capgain_pct": color = d3.scale.quantize().domain([0, 0.4]).range(["#ffffe5", "#f7fcb9", "#d9f0a3", "#addd8e", "#78c679", "#41ab5d", "#238443", "#006837", "#004529"]); varName = "Capital Gains"; break;
 			case "interest_pct": color = d3.scale.quantize().domain([0, 0.72]).range(["#ffffe5", "#f7fcb9", "#d9f0a3", "#addd8e", "#78c679", "#41ab5d", "#238443", "#006837", "#004529"]); varName = "Taxable Interest"; break;
 			case "childcredit_pct": color = d3.scale.quantize().domain([0, 0.1]).range(["#ffffe5", "#f7fcb9", "#d9f0a3", "#addd8e", "#78c679", "#41ab5d", "#238443", "#006837", "#004529"]); varName = "Child Credit"; break;
 			case "prep_pct": color = d3.scale.quantize().domain([0.28, 0.91]).range(["#ffffe5", "#f7fcb9", "#d9f0a3", "#addd8e", "#78c679", "#41ab5d", "#238443", "#006837", "#004529"]); varName = "Paid Tax Preparer"; break;
 			}

 			d3.selectAll(".counties").selectAll("path")
 				.style("fill", function (d) {
 					return color(rateById[d.id]);
 				});
 		}

 		d3.select("#varmenu")
 			.on("change", function() {
 				indicator = this.value;
 				update(indicator);
 			});

 	});
 });

 d3.select(self.frameElement).style("height", "670px");
diff --git a/thumbnail.png b/thumbnail.png
diff --git a/us.json b/us.json
	<!DOCTYPE HTML>
	<meta charset="utf-8">
	<html>
	<head>

	<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400italic,600italic,700italic,200,300,400,600,700,900">
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://d3js.org/topojson.v1.min.js"></script>

	<style>

	body, h1, h2, h3, p {
	margin: 0;
	padding: 0;
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 1em;
	color: #333;
	font-weight: 400;
	}

	#content {
	margin: 5px;
	padding: 20px;
	width: 805px;
	border: 1px solid #ccc;
	}

	#map {
	margin: 10px 0px 0px 0px;
	padding: 0px;
	}

	h1 {
	line-height: 1em;
	font-size: 1.75em;
	font-weight: 900;
	color: #000;
	}

	p {
	margin: 5px 0px 0px 0px;
	}

	.counties {
	fill: none;
	}

	.states {
	fill: none;
	stroke: #fff;
	stroke-linejoin: round;
	}

	select {
	margin: 5px 0px 0px 0px;
	display: block;
	}

	.tooltip {
	position: absolute;
	padding: 7px;
	font-size: 0.9em;
	pointer-events: none;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 4px;

	-moz-box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.25);
	-webkit-box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.25);
	box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.25);
	}

	.tooltip p {
	margin: 0;
	padding: 0;
	}

	</style>

	</head>

	<body>

	<div id="content">
	<h1>Mapping Tax Day</h1>
	<p>Individual income tax statistics, 2011</p>
	<select id="varmenu">
	<option selected value="itemized_pct">Itemized Deductions</option>
	<option value="eitc_pct">Earned Income Credit</option>
	<option value="mortgageded_pct">Mortgage Interest Deduction</option>
	<option value="capgain_pct">Capital Gains</option>
	<option value="interest_pct">Taxable Interest</option>
	<option value="childcredit_pct">Child Credit</option>
	<option value="prep_pct">Paid Tax Preparer</option>
	</select>
	<div id="map"></div>
	<p>Source: Internal Revenue Service.</p>
	</div>

	<script type="text/javascript" src="map.js"></script>

	</body>
	</html>
	var width = 800,
	height = 500,
	formatPercent = d3.format(".1%");

	var color = d3.scale.quantize()
	.domain([0, 0.58])
	.range(["#ffffe5", "#f7fcb9", "#d9f0a3", "#addd8e", "#78c679", "#41ab5d", "#238443", "#006837", "#004529"]);

	var projection = d3.geo.albersUsa()
	.translate([width / 2, height / 2]);

	var path = d3.geo.path()
	.projection(projection);

	var svg = d3.select("#map").append("svg")
	.attr("width", width)
	.attr("height", height);

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

	d3.json("us.json", function (error, us) {
	d3.csv("data.csv", function (error, data) {
	var indicator = document.getElementById("varmenu").value;
	varName = "Itemized Deductions";
	var countyById = {};
	var stateById = {};
	var rateById = {};

	data.forEach(function (d) {
	countyById[d.id] = d.countyname;
	stateById[d.id] = d.state;
	rateById[d.id] = +d[indicator];
	});

	svg.append("g")
	.attr("class", "counties")
	.selectAll("path")
	.data(topojson.feature(us, us.objects.counties).features)
	.enter().append("path")
	.attr("class", "county")
	.attr("d", path)
	.style("fill", function (d) {
	return color(rateById[d.id]);
	});

	svg.selectAll(".county")
	.on("mouseover", function(d) {
	tooltip.transition()
	.duration(250)
	.style("opacity", 1);
	tooltip.html(
	"<p><strong>" + countyById[d.id] + ", " + stateById[d.id] + "</strong></p>" +
	"<p>" + varName + ": " + formatPercent(rateById[d.id]) + "</p>"
	)
	.style("left", (d3.event.pageX + 15) + "px")
	.style("top", (d3.event.pageY - 28) + "px");
	})
	.on("mouseout", function(d) {
	tooltip.transition()
	.duration(250)
	.style("opacity", 0);
	});

	svg.append("path")
	.datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
	.attr("class", "states")
	.attr("d", path);

	function update(indicator){
	data.forEach(function (d) {
	rateById[d.id] = +d[indicator];
	});

	indicator = document.getElementById("varmenu").value;
	switch (indicator){
	case "itemized_pct": color = d3.scale.quantize().domain([0, 0.58]).range(["#ffffe5", "#f7fcb9", "#d9f0a3", "#addd8e", "#78c679", "#41ab5d", "#238443", "#006837", "#004529"]); varName = "Itemized Deductions"; break;
	case "eitc_pct": color = d3.scale.quantize().domain([0, 0.55]).range(["#ffffe5", "#f7fcb9", "#d9f0a3", "#addd8e", "#78c679", "#41ab5d", "#238443", "#006837", "#004529"]); varName = "Earned Income Credit"; break;
	case "mortgageded_pct": color = d3.scale.quantize().domain([0, 0.55]).range(["#ffffe5", "#f7fcb9", "#d9f0a3", "#addd8e", "#78c679", "#41ab5d", "#238443", "#006837", "#004529"]); varName = "Mortgage Interest Deduction"; break;
	case "capgain_pct": color = d3.scale.quantize().domain([0, 0.4]).range(["#ffffe5", "#f7fcb9", "#d9f0a3", "#addd8e", "#78c679", "#41ab5d", "#238443", "#006837", "#004529"]); varName = "Capital Gains"; break;
	case "interest_pct": color = d3.scale.quantize().domain([0, 0.72]).range(["#ffffe5", "#f7fcb9", "#d9f0a3", "#addd8e", "#78c679", "#41ab5d", "#238443", "#006837", "#004529"]); varName = "Taxable Interest"; break;
	case "childcredit_pct": color = d3.scale.quantize().domain([0, 0.1]).range(["#ffffe5", "#f7fcb9", "#d9f0a3", "#addd8e", "#78c679", "#41ab5d", "#238443", "#006837", "#004529"]); varName = "Child Credit"; break;
	case "prep_pct": color = d3.scale.quantize().domain([0.28, 0.91]).range(["#ffffe5", "#f7fcb9", "#d9f0a3", "#addd8e", "#78c679", "#41ab5d", "#238443", "#006837", "#004529"]); varName = "Paid Tax Preparer"; break;
	}

	d3.selectAll(".counties").selectAll("path")
	.style("fill", function (d) {
	return color(rateById[d.id]);
	});
	}

	d3.select("#varmenu")
	.on("change", function() {
	indicator = this.value;
	update(indicator);
	});

	});
	});

	d3.select(self.frameElement).style("height", "670px");