Andrew-Reid/index.html

## readme.md

      
    Raw
  

              readme.md
            
          
    The map above can be modified to change the projection parameters. It is an Conic Equal Area projection. I was having a bit of difficulty at first in
producing maps that showed a specific area with d3.js. I've built this to test out different projections. The map will update when any of the
text inputs change (which requires defocus - click elsewhere). This is d3.js v4. As always, the topojson file has to be in unprojected coordinates (lat/long).
Any Conic Equal Area projection can be built rather easily in D3.js. The input parameters are:
Rotate(x) and Rotate(y) which refer to the .rotate([x,y])) part of the projection. For most
standard projections the y rotation should be zero. This should be the negative of the central meridian of your map. This meridian will
be vertical in your projection.
Center(x) and Center(y) which refer to the translation of the map (.center([x,y])). This is where the central latitude should be specified.
Specifying a central meridian here is not ideal due to the nature of conical projections, so it should be set as zero.
Parallel(1) and Parallel(2) which refer to the secant lines of the map (.parallels([1,2])), that is the two lines of latitude in which the conical projection intersects
the actual globe. On these lines there is no distorition, while near them distorition is minimized. These should be within the geographical feature you
want to show or within the important parts of the map. These two can be borrowed from any defined projection, the center and rotation
properties will simply transpose or rotate the projection, while distortion is based off of the parallels.
Scale just refers to the zoom level, greater numbers cover smaller geographic extents.
Here are some example parameters:
Australia

projection.rotate([-132,0]).center([0,-28]).parallels([-18,-36]).scale(750);
Mexico

projection.rotate([105,0]).center([0,22]).parallels([14.5,32.5]).scale(1200);
###China
projection.rotate([-105,0]).center([0,35]).parallels([27,45]).scale(750);
###Brazil
projection.rotate([50,0]).center([0,-15]).parallels([10,-40]).scale(650);
###India
projection.rotate([-78,0]).center([0,21.5]).parallels([12,28]).scale(1000);

  
## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">

	<style>
		svg {
			background: #9ecae1;
		}

		.legend {
			position:fixed;
			left: 20px;
			top: 30px;
		}

		.boundary {
			fill:none;
			stroke: white;
		}

		.land {
			fill: #41ab5d;
		}

		input {
			width: 50px;
			position:absolute;
			left: 80px;
		}
	</style>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://d3js.org/d3-geo-projection.v1.min.js"></script>
	<script src="https://d3js.org/topojson.v1.min.js"></script>
</head>
<body>
	<p class="legend">
	Rotate (x) <input type="text" class="input" value="50" id="rotateX"> </input> <br />
	Rotate (y) <input type="text" class="input" value="0" id="rotateY"> </input> <br />
	Center (x) <input type="text" class="input" value="0" id="centerX"> </input> <br />
	Center (y) <input type="text" class="input" value="72" id="centerY"> </input> <br />
	Parallel (1) <input type="text" class="input" value="60" id="parallel1"> </input> <br />
	Parallel (2) <input type="text" class="input" value="80" id="parallel2"> </input> <br />
	Scale <input type="text" class="input" value="1100" id="scale"> </input> <br />
	</p>
	<br />

    <script type="text/javascript">

        var width = 960,
            height = 500;

		var rotateX = 50;
		var rotateY = 0;
		var centerX = 0;
		var centerY = 72;
		var scale = 1000;

		var parallel1 = 60;
		var parallel2 = 80;

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

    	var projection = d3.geoConicEqualArea()
       	 	.rotate([rotateX, rotateY])
		.parallels([parallel1, parallel2])
		.center([centerX,centerY])
		.scale(scale)
		.translate([width/2, height/2]);


        var path = d3.geoPath().projection(projection);
		var g = svg.append("g");

        d3.json("world.json", function(error, world) {

		 		  g.insert("path", ".land")
					  .datum(topojson.feature(world, world.objects.land))
					  .attr("class", "land")
					  .attr("d", path);

				  g.insert("path", ".boundary")
					  .datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; }))
					  .attr("class", "boundary")
					  .attr("d", path);

        });

		d3.select("#rotateX").on("change", function(){
			rotateX = this.value; update();
		});
		d3.select("#rotateY").on("change", function() {
			rotateY = this.value; update();
		});
		d3.select("#centerX").on("change", function(){
			centerX = this.value; update();
		});
		d3.select("#centerY").on("change", function() {
			centerY = this.value; update();
		});
		d3.select("#parallel1").on("change", function(){
			parallel1 = this.value; update();

		});
		d3.select("#parallel2").on("change", function() {
			parallel2 = this.value; update();
		});
		d3.select("#scale").on("change", function() {
			scale = this.value; update();
		});
		function update() {
			projection
				.rotate([rotateX,rotateY])
				.center([centerX,centerY])
				.parallels([parallel1,parallel2])
				.scale(scale)
				;
		      path = d3.geoPath().projection(projection);
			d3.selectAll("path").attr("d", path);
		};


    </script>
</body>

## thumbnail.png

      
    Raw
  

              thumbnail.png
            
          
## world.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              world.json
            
          
        Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">

	<style>
	svg {
	background: #9ecae1;
	}

	.legend {
	position:fixed;
	left: 20px;
	top: 30px;
	}

	.boundary {
	fill:none;
	stroke: white;
	}

	.land {
	fill: #41ab5d;
	}

	input {
	width: 50px;
	position:absolute;
	left: 80px;
	}
	</style>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://d3js.org/d3-geo-projection.v1.min.js"></script>
	<script src="https://d3js.org/topojson.v1.min.js"></script>
	</head>
	<body>
	<p class="legend">
	Rotate (x) <input type="text" class="input" value="50" id="rotateX"> </input> <br />
	Rotate (y) <input type="text" class="input" value="0" id="rotateY"> </input> <br />
	Center (x) <input type="text" class="input" value="0" id="centerX"> </input> <br />
	Center (y) <input type="text" class="input" value="72" id="centerY"> </input> <br />
	Parallel (1) <input type="text" class="input" value="60" id="parallel1"> </input> <br />
	Parallel (2) <input type="text" class="input" value="80" id="parallel2"> </input> <br />
	Scale <input type="text" class="input" value="1100" id="scale"> </input> <br />
	</p>
	<br />

	<script type="text/javascript">

	var width = 960,
	height = 500;

	var rotateX = 50;
	var rotateY = 0;
	var centerX = 0;
	var centerY = 72;
	var scale = 1000;

	var parallel1 = 60;
	var parallel2 = 80;

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

	var projection = d3.geoConicEqualArea()
	.rotate([rotateX, rotateY])
	.parallels([parallel1, parallel2])
	.center([centerX,centerY])
	.scale(scale)
	.translate([width/2, height/2]);



	var path = d3.geoPath().projection(projection);
	var g = svg.append("g");

	d3.json("world.json", function(error, world) {

	g.insert("path", ".land")
	.datum(topojson.feature(world, world.objects.land))
	.attr("class", "land")
	.attr("d", path);

	g.insert("path", ".boundary")
	.datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; }))
	.attr("class", "boundary")
	.attr("d", path);

	});

	d3.select("#rotateX").on("change", function(){
	rotateX = this.value; update();
	});
	d3.select("#rotateY").on("change", function() {
	rotateY = this.value; update();
	});
	d3.select("#centerX").on("change", function(){
	centerX = this.value; update();
	});
	d3.select("#centerY").on("change", function() {
	centerY = this.value; update();
	});
	d3.select("#parallel1").on("change", function(){
	parallel1 = this.value; update();

	});
	d3.select("#parallel2").on("change", function() {
	parallel2 = this.value; update();
	});
	d3.select("#scale").on("change", function() {
	scale = this.value; update();
	});
	function update() {
	projection
	.rotate([rotateX,rotateY])
	.center([centerX,centerY])
	.parallels([parallel1,parallel2])
	.scale(scale)
	;
	path = d3.geoPath().projection(projection);
	d3.selectAll("path").attr("d", path);
	};




	</script>
	</body>