Difference between D3 and Google Data layer for geoJSON projection

This example shows the county boundaries for Illinois. In red we see the google.maps.Data() layer in blue a D3.geo.path() with mercator projection.

The google data layer is an object which displays in the same canvas as any google overlay (polygons, markers, polylines, etc) while the D3.geo.path() shows up in an SVG container I overlap on top of the google container.

<!DOCTYPE html>
<html>
<meta charset="utf-8">
	<head>
		<style>
		.counties {
		  fill: none;
		  stroke: #00c;
		}
		#thissvg {
			position:absolute;
			left:0;
			top:0;
			z-index: 50;
		}

#map-canvas {
			position:absolute;
			left:0;
			top:0;
			z-index: 30;
		}
		</style>
		<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
		<script src="https://d3js.org/d3.v3.min.js"></script>
		<script src="https://d3js.org/queue.v1.min.js"></script>
		<script>
			var width = 900,
		  	height = 600,
			globalOverlay = null,
			map = null;
			var url = './illinois.json';

jQuery(document).ready(function() {
				jQuery('#map-canvas').width(width);
				jQuery('#map-canvas').height(height);
			}); 
			function initialize() {
		 		map = new google.maps.Map(document.getElementById('map-canvas'), {
					zoom: 9,
					maxZoom:9,
					minZoom:9,
					center: {lat: 41, lng: -89.5}
				});

map.data.loadGeoJson(url);

var featureStyle = {
				    fillColor: 'transparent',
				    strokeWeight: 2,
				    strokeColor: 'red'
				  };
				  map.data.setStyle(featureStyle);
					 
					var projection=projection=d3.geo.mercator()
						.scale(40.5 * Math.pow(2, map.getZoom()))
						.translate([0,0]);

var path = d3.geo.path().projection(projection);
			
					var g_=  	d3.select('#thissvg')
						.attr("width", 900)
						.attr("height", 600)
						.append("g")
						.attr("class", "counties")
						.attr("id","pathgroup");

function ready(error, us) {
						console.log(us);
					    g_.selectAll("path")
							.data(us.features)
							.enter().append("path")
							.attr("d", path);

var centerPixel = projection([map.getCenter().lng(), map.getCenter().lat()]);
						var translate = [(width / 2 - centerPixel[0]), (height / 2 - centerPixel[1])];
						d3.select("#pathgroup").attr("transform", "translate(" + translate + ")scale(1)");
		 			}

queue()
						.defer(d3.json, url)
						.await(ready);
				 
			}

google.maps.event.addDomListener(window, 'load', initialize);

</script>
	</head>
	<body>
		<svg id="thissvg"/>
		<div id="map-canvas"></div>
	</body>
</html>

Modified http://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false to a secure url

Modified http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js to a secure url

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://d3js.org/queue.v1.min.js to a secure url

https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false

https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js

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

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