darrenjaworski/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Comparison of projection types.

  
## index.html
<!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="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script>

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

var minimum = 5, maximum = 24;

//http://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;

//http://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>
	<!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="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://d3js.org/topojson.v1.min.js"></script>
	<script>

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

	var minimum = 5, maximum = 24;

	//http://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;

	//http://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>