Transverse Mercator/Conic Conformal Projections - Oklahoma

Comparison of projection types.

<!DOCTYPE html>
<meta charset="utf-8">
<style>
  .county-border {
		fill: none;
		stroke: #919599;
	}

.state-border {
		fill: none;
		stroke: black;
	}
	.axis text {
		font: 10px sans-serif;
	}

.axis line, .axis path {
		fill: none;
		stroke: #000;
		shape-rendering: crispEdges;
	}
	
	#key	{
		position: absolute;
		top:90px;
		left: 50px;
		
	}
	.county	{
		fill: #EEEFF1;
	}
	
</style>
<body>
	<div id="mercator"></div>
	<div id="conic"></div>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script>

//choropleth
var width = 900, height = 420;

var minimum = 5, maximum = 24;

//https://www.ngs.noaa.gov/PUBS_LIB/ManualNOSNGS5.pdf
var projection = d3.geo.transverseMercator()
	.rotate([98 + 00 / 60, -35 - 00 / 60])
	.scale(6800);

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

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

d3.json("/darrenjaworski/raw/5968421/ok-counties2.json", function(error, ok) {
	var counties = topojson.feature(ok, ok.objects.counties);

//counties
	svg.append("g").attr("class", "county").selectAll("path").data(counties.features).enter().append("path").attr("d", path);

//county borders
	svg.append("path").datum(topojson.mesh(ok, ok.objects.counties, function(a, b) {
		return a !== b;
	})).attr("class", "county-border").attr("d", path);

//state borders
	svg.append("path").datum(topojson.mesh(ok, ok.objects.counties, function(a, b) {
		return a === b;
	})).attr("class", "state-border").attr("d", path);

});

d3.select(self.frameElement).style("height", height + "px");
//end choropleth

</script>
<script>

//choropleth
var width = 900, height = 500;

var minimum = 5, maximum = 24;

//https://www.ngs.noaa.gov/PUBS_LIB/ManualNOSNGS5.pdf
var projection1 = d3.geo.conicConformal().parallels([35 + 34 / 60, 36 + 46 / 60]).rotate([98 + 00 / 60, -35 - 00 / 60]).scale(5700).translate([55 * width / 100, 52 * height / 100]);

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

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

d3.json("/darrenjaworski/raw/5968421/ok-counties2.json", function(error, ok) {
	var counties = topojson.feature(ok, ok.objects.counties);

//counties
	svg1.append("g").attr("class", "county").selectAll("path").data(counties.features).enter().append("path").attr("d", path1);

//county borders
	svg1.append("path").datum(topojson.mesh(ok, ok.objects.counties, function(a, b) {
		return a !== b;
	})).attr("class", "county-border").attr("d", path1);

//state borders
	svg1.append("path").datum(topojson.mesh(ok, ok.objects.counties, function(a, b) {
		return a === b;
	})).attr("class", "state-border").attr("d", path1);

});

d3.select(self.frameElement).style("height", height + "px");
//end choropleth

</script>

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

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

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

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