145 lines
7.1 KiB
HTML
145 lines
7.1 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en" >
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>D3 Map Projections</title>
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
|
||
|
|
<link rel="stylesheet" href="./style.css">
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<!-- partial:index.partial.html -->
|
||
|
|
<h1>
|
||
|
|
D3 Map Projections
|
||
|
|
</h1>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
geoOrthographic vs.
|
||
|
|
<select id="projectionChoice">
|
||
|
|
<option value="geoAiry">geoAiry</option>
|
||
|
|
<option value="geoAirocean">geoAirocean</option>
|
||
|
|
<option value="geoAitoff">geoAitoff</option>
|
||
|
|
<option value="geoAlbers">geoAlbers</option>
|
||
|
|
<option value="geoArmadillo">geoArmadillo</option>
|
||
|
|
<option value="geoAugust">geoAugust</option>
|
||
|
|
<option value="geoAzimuthalEqualArea">geoAzimuthalEqualArea</option>
|
||
|
|
<option value="geoAzimuthalEquidistant">geoAzimuthalEquidistant</option>
|
||
|
|
<option value="geoBaker">geoBaker</option>
|
||
|
|
<option value="geoBerghaus">geoBerghaus</option>
|
||
|
|
<option value="geoBoggs">geoBoggs</option>
|
||
|
|
<option value="geoBonne">geoBonne</option>
|
||
|
|
<option value="geoBottomley">geoBottomley</option>
|
||
|
|
<option value="geoBromley">geoBromley</option>
|
||
|
|
<option value="geoCahillKeyes">geoCahillKeyes</option>
|
||
|
|
<option value="geoCollignon">geoCollignon</option>
|
||
|
|
<option value="geoConicEqualArea">geoConicEqualArea</option>
|
||
|
|
<option value="geoConicEquidistant">geoConicEquidistant</option>
|
||
|
|
<option value="geoCox">geoCox</option>
|
||
|
|
<option value="geoCraig">geoCraig</option>
|
||
|
|
<option value="geoCraster">geoCraster</option>
|
||
|
|
<option value="geoCubic">geoCubic</option>
|
||
|
|
<option value="geoCylindricalEqualArea">geoCylindricalEqualArea</option>
|
||
|
|
<option value="geoCylindricalStereographic">geoCylindricalStereographic</option>
|
||
|
|
<option value="geoDodecahedral">geoDodecahedral</option>
|
||
|
|
<option value="geoEckert1">geoEckert1</option>
|
||
|
|
<option value="geoEckert2">geoEckert2</option>
|
||
|
|
<option value="geoEckert3">geoEckert3</option>
|
||
|
|
<option value="geoEckert4">geoEckert4</option>
|
||
|
|
<option value="geoEckert5">geoEckert5</option>
|
||
|
|
<option value="geoEckert6">geoEckert6</option>
|
||
|
|
<option value="geoEisenlohr">geoEisenlohr</option>
|
||
|
|
<option value="geoEqualEarth">geoEqualEarth</option>
|
||
|
|
<option value="geoEquirectangular">geoEquirectangular</option>
|
||
|
|
<option value="geoFahey">geoFahey</option>
|
||
|
|
<option value="geoFoucaut">geoFoucaut</option>
|
||
|
|
<option value="geoGingery">geoGingery</option>
|
||
|
|
<option value="geoGinzburg4">geoGinzburg4</option>
|
||
|
|
<option value="geoGinzburg5">geoGinzburg5</option>
|
||
|
|
<option value="geoGinzburg6">geoGinzburg6</option>
|
||
|
|
<option value="geoGinzburg8">geoGinzburg8</option>
|
||
|
|
<option value="geoGinzburg9">geoGinzburg9</option>
|
||
|
|
<option value="geoGnomonic">geoGnomonic</option>
|
||
|
|
<option value="geoGringorten">geoGringorten</option>
|
||
|
|
<option value="geoGringortenQuincuncial">geoGringortenQuincuncial</option>
|
||
|
|
<option value="geoGuyou">geoGuyou</option>
|
||
|
|
<option value="geoHammer">geoHammer</option>
|
||
|
|
<option value="geoHammerRetroazimuthal">geoHammerRetroazimuthal</option>
|
||
|
|
<option value="geoHealpix">geoHealpix</option>
|
||
|
|
<option value="geoHill">geoHill</option>
|
||
|
|
<option value="geoHomolosine">geoHomolosine</option>
|
||
|
|
<option value="geoHyperelliptical">geoHyperelliptical</option>
|
||
|
|
<option value="geoIcosahedral">geoIcosahedral</option>
|
||
|
|
<option value="geoInterruptedBoggs">geoInterruptedBoggs</option>
|
||
|
|
<option value="geoInterruptedHomolosine">geoInterruptedHomolosine</option>
|
||
|
|
<option value="geoInterruptedMollweide">geoInterruptedMollweide</option>
|
||
|
|
<option value="geoInterruptedMollweideHemispheres">geoInterruptedMollweideHemispheres</option>
|
||
|
|
<option value="geoInterruptedSinuMollweide">geoInterruptedSinuMollweide</option>
|
||
|
|
<option value="geoInterruptedSinusoidal">geoInterruptedSinusoidal</option>
|
||
|
|
<option value="geoKavrayskiy7">geoKavrayskiy7</option>
|
||
|
|
<option value="geoLagrange">geoLagrange</option>
|
||
|
|
<option value="geoLarrivee">geoLarrivee</option>
|
||
|
|
<option value="geoLaskowski">geoLaskowski</option>
|
||
|
|
<option value="geoLoximuthal">geoLoximuthal</option>
|
||
|
|
<option value="geoMercator" selected>geoMercator</option>
|
||
|
|
<option value="geoMiller">geoMiller</option>
|
||
|
|
<option value="geoMollweide">geoMollweide</option>
|
||
|
|
<option value="geoMtFlatPolarParabolic">geoMtFlatPolarParabolic</option>
|
||
|
|
<option value="geoMtFlatPolarQuartic">geoMtFlatPolarQuartic</option>
|
||
|
|
<option value="geoMtFlatPolarSinusoidal">geoMtFlatPolarSinusoidal</option>
|
||
|
|
<option value="geoNaturalEarth1">geoNaturalEarth1</option>
|
||
|
|
<option value="geoNaturalEarth2">geoNaturalEarth2</option>
|
||
|
|
<option value="geoNellHammer">geoNellHammer</option>
|
||
|
|
<option value="geoPatterson">geoPatterson</option>
|
||
|
|
<option value="geoPeirceQuincuncial">geoPeirceQuincuncial</option>
|
||
|
|
<option value="geoPolyconic">geoPolyconic</option>
|
||
|
|
<option value="geoPolyhedralButterfly">geoPolyhedralButterfly</option>
|
||
|
|
<option value="geoPolyhedralCollignon">geoPolyhedralCollignon</option>
|
||
|
|
<option value="geoPolyhedralWaterman">geoPolyhedralWaterman</option>
|
||
|
|
<option value="geoPolyhedralVoronoi">geoPolyhedralVoronoi</option>
|
||
|
|
<option value="geoRectangularPolyconic">geoRectangularPolyconic</option>
|
||
|
|
<option value="geoRobinson">geoRobinson</option>
|
||
|
|
<option value="geoSatellite">geoSatellite</option>
|
||
|
|
<option value="geoSinuMollweide">geoSinuMollweide</option>
|
||
|
|
<option value="geoSinusoidal">geoSinusoidal</option>
|
||
|
|
<option value="geoStereographic">geoStereographic</option>
|
||
|
|
<option value="geoTetrahedralLee">geoTetrahedralLee</option>
|
||
|
|
<option value="geoTimes">geoTimes</option>
|
||
|
|
<option value="geoTransverseMercator">geoTransverseMercator</option>
|
||
|
|
<option value="geoVanDerGrinten">geoVanDerGrinten</option>
|
||
|
|
<option value="geoVanDerGrinten2">geoVanDerGrinten2</option>
|
||
|
|
<option value="geoVanDerGrinten3">geoVanDerGrinten3</option>
|
||
|
|
<option value="geoVanDerGrinten4">geoVanDerGrinten4</option>
|
||
|
|
<option value="geoWagner4">geoWagner4</option>
|
||
|
|
<option value="geoWagner6">geoWagner6</option>
|
||
|
|
<option value="geoWagner7">geoWagner7</option>
|
||
|
|
<option value="geoWiechel">geoWiechel</option>
|
||
|
|
<option value="geoWinkel3">geoWinkel3</option>
|
||
|
|
</select>
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
<label>
|
||
|
|
<input id="axialTilt" type="checkbox" checked/>
|
||
|
|
Keep it real! Use Earth's axial tilt of ~23.4°.
|
||
|
|
</label>
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<canvas id="ortho" width="960" height="600"></canvas>
|
||
|
|
<canvas id="any" width="960" height="600"></canvas>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Blog post:
|
||
|
|
<a href="https://petrichor.studio/2018/06/29/map-projections-in-the-web/" target="_blank">
|
||
|
|
"Map Projections on the Web"
|
||
|
|
</a>
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<script src="https://d3js.org/d3.v5.min.js"></script>
|
||
|
|
<script src="https://unpkg.com/d3-geo-projection@2.4.1/dist/d3-geo-projection.min.js"></script>
|
||
|
|
<script src="https://unpkg.com/d3-geo-polygon@1.4.2/build/d3-geo-polygon.min.js"></script>
|
||
|
|
<script src="https://unpkg.com/topojson-client@3.0.0/dist/topojson-client.min.js"></script>
|
||
|
|
<script src="https://unpkg.com/topojson-simplify@3.0.2/dist/topojson-simplify.min.js"></script>
|
||
|
|
<!-- partial -->
|
||
|
|
<script src="./script.js"></script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|