D3 Examples - Selectable Projection Demo

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <title>Selectable Projection Demo</title>
    <script type='text/javascript' src='https://cdn.jsdelivr.net/npm/d3@2.10.3/d3.v2.js'></script>
    <style type='text/css'>
      body {
        margin:        5px auto;
      }
      h1 {
        font:          20px/20px "Helvetica Neue";
        margin:        0;
      }
      p {
        color:         #333;
        font:          12px/15px "Helvetica Neue";
      }
​
      circle.albers {
        fill:          #005982;
      }
​
      circle.ortho {
        fill:          #971c20;
      }
​
      path.connect {
        fill:          none;
        stroke-width:  0.2;
        stroke:        #aaa;
      }
    </style>
  </head>
  <body>
    <h2><span id='account-name'></span></h2>
    <h1>Selectable Projection</h1>
    <p>
      Map projections are transformations between one shape to another,
      often a 2D surface such as a screen or printout.
      A selectable pair of projections is shown below, along with a mapping of points -
      every 10 degrees latitude and longitude - between the two.
    </p><p>
      This is made with <a href='https://mbostock.github.com/d3/'>D3</a>.
      Adapted, via <a href='https://bl.ocks.org/2005817'>Albers to Orthographic Projection</a>,
      from <a href='https://bl.ocks.org/1653763'>Mercator to Orthographic Projection</a>.
    </p>
​
    <div id='chart'></div>
    <script type='text/javascript' src='site.js'></script>
  </body>
</html>
    