California Counties

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>California Counties: Mercator projection</title>

#container {
				width: 800px;
				margin-left: 30px;
				margin-right: auto;
				margin-top: 30px;
				padding: 30px;
				background-color: white;
				box-shadow: 3px 3px 7px #222;
			}
			
			h1 {
				font-size: 24px;
				margin: 0;
			}

p {
				font-size: 16px;
				margin: 15px 0 10px 0;
			}

a {
			  color: #799DCB;
			  text-decoration: none;
			  transition: color .3s, background .3s, border .3s;
			}
			a:hover {
			  color: #48494b;
			  background: #e7e8e9;
			}

svg {
				background-color: white;
				padding-left: 20px;
			}
			
			path {
				fill: #799dcb;
				stroke: #fff;
				}
			path:hover {
				fill:#48494b;
				cursor:pointer;
			}

#tooltip {
				width: 150px;
				height: auto;
				padding: 5px;
				background-color: #fff;
				color: #000;
				-webkit-border-radius: 5px;
				-moz-border-radius: 5px;
				border-radius: 5px;
				-webkit-box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.4);
				-moz-box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.4);
				box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.4);
				pointer-events: none;
				position: absolute;
				}
				
			#tooltip.hidden {
				display: none;
			}
			
			#tooltip p {
			margin: 0;
			font-size: 14px;
			line-height: 18px;
			}

</style>
	</head>
	<body>
    
    	<body>

<h1>Counties of California</h1>
			<p>Source: <a href="https://www.census.gov/geo/maps-data/data/cbf/cbf_counties.html" target="new">U.S. Census Bureau</a></p>
		</div>

<div id="tooltip" class="hidden">
            <p>County: <span id="county">County Name</span></p>
        </div>
		<script type="text/javascript">

//Width and height
			var w = 760;
			var h = 600;

//Define map projection
			var projection = d3.geo.mercator()
								   .center([ -120, 37 ])
								   .translate([ w/2, h/2 ])
								   .scale([ w*3.3 ]);

//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_county_5m.json", function(json) {
				console.log(json);
				//Bind data and create one path per GeoJSON feature
				svg.selectAll("path")
					.data(json.features)
					.enter()
					.append("path")
					.attr("d", path)
				   	.on("mouseover", function(d){
						var xPosition = w/2 + 150;
						var yPosition = h/2;
// 						var xPosition = parseFloat(path.centroid(this).attr("cx"));
// 						var yPosition = parseFloat(path.centroid(this).attr("cy"));
						d3.select("#tooltip")
						.style("left", xPosition + "px")
						.style("top", yPosition + "px");
						d3.select("#county")
						.text(d.properties.NAME);
						d3.select("#tooltip")
						.classed("hidden", false);
						})
						.on("mouseout", function(){
						d3.select("#tooltip").classed("hidden", true);
						});
		
			});

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

Modified http://use.typekit.com/brf5jpj.js to a secure url

https://d3js.org/d3.v3.min.js

https://use.typekit.com/brf5jpj.js

https://use.typekit.net/drk2sev.js