vhxs · October 16, 2023 21:06 · vhxs · Oct 10, 2022
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="utf-8">
 <script src="https://d3js.org/d3.v3.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js"></script>
 <style type="text/css">

 /* states I've visited
 ripped and modified from here: http://bl.ocks.org/travisdoesmath/fc945804e31bf35f3ba7ddd4f659429c
 bl.ocks was built and maintained by Mike Bostock, who also created d3.js
 */

 /* On mouse hover, lighten state color */
 path:hover {
 	fill-opacity: .7;
 }
 /* Style for Custom Tooltip */
 div.tooltip {   
 	position: absolute;           
 	text-align: center;           
 	width: 60px;                  
 	height: 28px;                 
 	padding: 2px;             
 	font: 12px sans-serif;        
 	background: white;   
 	border: 0px;      
 	border-radius: 8px;           
 	pointer-events: none;         
 }
        
 /* Legend Font Style */
 body {
 	font: 11px sans-serif;
 }
        
 /* Legend Position Style */
 .legend {
 	position:absolute;
 	left:800px;
 	top:350px;
 }
 </style>
 </head>
 <body>
 <script type="text/javascript">
 	/*  This visualization was made possible by modifying code provided by:
 	Michelle Chandra, Basic US State Map - D3
 	http://bl.ocks.org/michellechandra/0b2ce4923dc9b5809922
 	Scott Murray, Choropleth example from "Interactive Data Visualization for the Web" 
 	https://github.com/alignedleft/d3-book/blob/master/chapter_12/05_choropleth.html   
 			
 	Malcolm Maclean, tooltips example tutorial
 	http://www.d3noob.org/2013/01/adding-tooltips-to-d3js-graph.html
 	Mike Bostock, Pie Chart Legend
 	http://bl.ocks.org/mbostock/3888852  */
 			
 	//Width and height of map
 	var width = 960;
 	var height = 500;
 	// D3 Projection
 	var projection = d3.geo.albersUsa()
 					   .translate([width/2, height/2])    // translate to center of screen
 					   .scale([1000]);          // scale things down so see entire US
 	        
 	// Define path generator
 	var path = d3.geo.path()               // path generator that will convert GeoJSON to SVG paths
 			  	 .projection(projection);  // tell path generator to use albersUsa projection
 			
 	// Define linear scale for output
 	var color = d3.scale.linear()
 				  .range(["#dfe3ef","#9ecae1"]).domain([0,1]);
 	var legendText = ["Visited", "Unvisited"];

 	//Create SVG element and append map to the SVG
 	var svg = d3.select("body")
 				.append("svg")
 				.attr("width", width)
 				.attr("height", height);
 	        
 	// Append Div for tooltip to SVG
 	var div = d3.select("body")
 			    .append("div")   
 	    		.attr("class", "tooltip")               
 	    		.style("opacity", 0);

 	queue()
 		.defer(d3.tsv, "./statesvisited.tsv")
 		.defer(d3.json, "./us-states.json")
 		.await(ready);

 	function ready(error, data, us, route) {
 		if (error) {alert(error); } 
 		else {
 			// Loop through each state data value in the .csv file
 			for (var i = 0; i < data.length; i++) {
 				// Grab State Name
 				var dataState = data[i].state;
 				// Grab data value 
 				var dataValue = data[i].visited;
 				// Find the corresponding state inside the GeoJSON
 				for (var j = 0; j < us.features.length; j++)  {
 					var jsonState = us.features[j].properties.name;
 					if (dataState == jsonState) {
 					// Copy the data value into the JSON
 					us.features[j].properties.visited = dataValue; 
 					// Stop looking through the JSON
 					break;
 					}
 				}
 			}

 			svg.selectAll("path")
 			.data(us.features)
 			.enter()
 			.append("path")
 			.attr("d", path)
 			.style("stroke", "#fff")
 			.style("stroke-width", "1")
 			.style("fill", function(d) {
 				// Get data value
 				var value = d.properties.visited;
 				if (value) {
 					//If value exists…
 					return color(value);
 				} 
 				else {
 					//If value is undefined…
 					return "#dfe3ef";
 				}
 			});

 			var legend = svg.append("g")
 				.attr("class","legend")
 				.attr("transform","translate(800,350)")
 				.selectAll("g")
 				.data(color.domain().slice().reverse())
 				.enter()
 				.append("g")
 				.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

 		  	legend.append("rect")
 		   		  .attr("width", 18)
 		   		  .attr("height", 18)
 		   		  .style("fill", color);

 		  	legend.append("text")
 		  		  .data(legendText)
 		      	  .attr("x", 24)
 		      	  .attr("y", 9)
 		      	  .attr("dy", ".35em")
 		      	  .text(function(d) { return d; });
      	}
 	};
 		      	
 </script>
 </body>
 </html>
diff --git a/statesvisited.tsv b/statesvisited.tsv
diff --git a/us-states.json b/us-states.json
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v3.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js"></script>
	<style type="text/css">

	/* states I've visited
	ripped and modified from here: http://bl.ocks.org/travisdoesmath/fc945804e31bf35f3ba7ddd4f659429c
	bl.ocks was built and maintained by Mike Bostock, who also created d3.js
	*/

	/* On mouse hover, lighten state color */
	path:hover {
	fill-opacity: .7;
	}
	/* Style for Custom Tooltip */
	div.tooltip {
	position: absolute;
	text-align: center;
	width: 60px;
	height: 28px;
	padding: 2px;
	font: 12px sans-serif;
	background: white;
	border: 0px;
	border-radius: 8px;
	pointer-events: none;
	}

	/* Legend Font Style */
	body {
	font: 11px sans-serif;
	}

	/* Legend Position Style */
	.legend {
	position:absolute;
	left:800px;
	top:350px;
	}
	</style>
	</head>
	<body>
	<script type="text/javascript">
	/* This visualization was made possible by modifying code provided by:
	Michelle Chandra, Basic US State Map - D3
	http://bl.ocks.org/michellechandra/0b2ce4923dc9b5809922
	Scott Murray, Choropleth example from "Interactive Data Visualization for the Web"
	https://github.com/alignedleft/d3-book/blob/master/chapter_12/05_choropleth.html

	Malcolm Maclean, tooltips example tutorial
	http://www.d3noob.org/2013/01/adding-tooltips-to-d3js-graph.html
	Mike Bostock, Pie Chart Legend
	http://bl.ocks.org/mbostock/3888852 */

	//Width and height of map
	var width = 960;
	var height = 500;
	// D3 Projection
	var projection = d3.geo.albersUsa()
	.translate([width/2, height/2]) // translate to center of screen
	.scale([1000]); // scale things down so see entire US

	// Define path generator
	var path = d3.geo.path() // path generator that will convert GeoJSON to SVG paths
	.projection(projection); // tell path generator to use albersUsa projection

	// Define linear scale for output
	var color = d3.scale.linear()
	.range(["#dfe3ef","#9ecae1"]).domain([0,1]);
	var legendText = ["Visited", "Unvisited"];

	//Create SVG element and append map to the SVG
	var svg = d3.select("body")
	.append("svg")
	.attr("width", width)
	.attr("height", height);

	// Append Div for tooltip to SVG
	var div = d3.select("body")
	.append("div")
	.attr("class", "tooltip")
	.style("opacity", 0);

	queue()
	.defer(d3.tsv, "./statesvisited.tsv")
	.defer(d3.json, "./us-states.json")
	.await(ready);

	function ready(error, data, us, route) {
	if (error) {alert(error); }
	else {
	// Loop through each state data value in the .csv file
	for (var i = 0; i < data.length; i++) {
	// Grab State Name
	var dataState = data[i].state;
	// Grab data value
	var dataValue = data[i].visited;
	// Find the corresponding state inside the GeoJSON
	for (var j = 0; j < us.features.length; j++) {
	var jsonState = us.features[j].properties.name;
	if (dataState == jsonState) {
	// Copy the data value into the JSON
	us.features[j].properties.visited = dataValue;
	// Stop looking through the JSON
	break;
	}
	}
	}

	svg.selectAll("path")
	.data(us.features)
	.enter()
	.append("path")
	.attr("d", path)
	.style("stroke", "#fff")
	.style("stroke-width", "1")
	.style("fill", function(d) {
	// Get data value
	var value = d.properties.visited;
	if (value) {
	//If value exists…
	return color(value);
	}
	else {
	//If value is undefined…
	return "#dfe3ef";
	}
	});

	var legend = svg.append("g")
	.attr("class","legend")
	.attr("transform","translate(800,350)")
	.selectAll("g")
	.data(color.domain().slice().reverse())
	.enter()
	.append("g")
	.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

	legend.append("rect")
	.attr("width", 18)
	.attr("height", 18)
	.style("fill", color);

	legend.append("text")
	.data(legendText)
	.attr("x", 24)
	.attr("y", 9)
	.attr("dy", ".35em")
	.text(function(d) { return d; });
	}
	};

	</script>
	</body>
	</html>
	state	visited
	Alabama	0
	Alaska	0
	Arkansas	0
	Arizona	0
	California	2
	Colorado	2
	Connecticut	2
	Delaware	2
	Florida	2
	Georgia	2
	Hawaii	2
	Iowa	0
	Idaho	0
	Illinois	2
	Indiana	2
	Kansas	2
	Kentucky	2
	Louisiana	0
	Maine	0
	Maryland	2
	Massachusetts	2
	Michigan	2
	Minnesota	2
	Missouri	2
	Mississippi	0
	Montana	0
	North Carolina	2
	North Dakota	0
	Nebraska	0
	New Hampshire	2
	New Jersey	2
	New Mexico	2
	Nevada	2
	New York	2
	Ohio	2
	Oklahoma	0
	Oregon	0
	Pennsylvania	2
	Rhode Island	2
	South Carolina	0
	South Dakota	0
	Tennessee	2
	Texas	2
	Utah	0
	Virginia	2
	Vermont	2
	Washington	0
	Wisconsin	2
	West Virginia	2
	Wyoming	0