Instantly share code, notes, and snippets.

# Andrew-Reid/index.html

Last active December 26, 2016 20:54
Show Gist options
• Save Andrew-Reid/b731aba088ed719208f48a09d6aa1225 to your computer and use it in GitHub Desktop.
Setting an Conic Equal Area Projection

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);

This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters


Rotate (x)
Rotate (y)
Center (x)
Center (y)
Parallel (1)
Parallel (2)
Scale

Display the source blob
Display the rendered blob
Raw