United States: Utah, Georgia, Florida

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>US Map</title>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-geo-projection/0.2.15/d3.geo.projection.min.js" charset="utf-8"></script>

		<style type="text/css">

body {
				background-color: white;
			}

svg {
				background-color: white;
			}
			#container {
				width: 550px;
				margin-left: auto;
				margin-right: auto;
				margin-top: 0px;
				padding: 10px 20px 0px 40px;
				background-color: white;
				box-shadow: 2px 2px 7px 3px #E5E5E5;
			}

</style>
	</head>
	<body>
<div id="container">
		<h1>United States: Utah,
		Georgia,
		Florida</h1>

</div>
		<script type="text/javascript">
			//Width and height
			var w = 550;
			var h = 400;

//Define map projection
			var projection = d3.geo.albers()
								   .center([ -20, 50 ])
								   .translate([ w/2, h/2 ])
								   .scale([ w/1.5 ]);

//Define path generator
			var path = d3.geo.path()
							 .projection(projection);

//Create SVG
			var svg = d3.select("#container")
						.append("svg")
						.attr("width", w)
						.attr("height", h);

//Load in GeoJSON data
			d3.json("cb_2014_us_state_20m.json", function(json) {
var statesData = json.features

var colors = {
					Utah: "blue",
					Georgia: "yellow",
					Florida: "red"
				}

//var colors = d3.scale.ordinal()
//		.domain(["Utah", "Georgia", "Florida"])
//		.range(colorbrewer.Set3[3]);

//Bind data and create one path per GeoJSON feature
				svg.selectAll("path")
				   .data(json.features)
				   .enter()
				   .append("path")
				   .attr("d", path)
					 .attr("stroke", "white")
					 .attr("fill", function (d, i) {
				   		return colors[d.properties.NAME]
				   	})

});

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

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

https://cdnjs.cloudflare.com/ajax/libs/d3-geo-projection/0.2.15/d3.geo.projection.min.js