Test bed for projection.clipPolygon()
(Russia in orange because as the country that crosses the antimeridian line and seems to make things explode in some cases.)
forked from espinielli's block: Icosahedron
forked from Fil's block: Icosahedron
xxxxxxxxxx
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="map.css">
<title>Test bed for projection.clipPolygon()</title>
<style>
#c643 { fill: orange; fill-opacity: 0.3 }
</style>
</head>
<body>
<div id="map"></div>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>
<script src="https://unpkg.com/d3-geo"></script>
<!-- <script src="https://d3js.org/d3-geo-projection.v2.min.js"></script> -->
<script src="https://unpkg.com/d3-geo-polygon"></script>
<script src="https://recifs.neocities.org/d3-geo-projection-clip-polyhedral.js"></script>
<script>
/*
* This is the last(?) issue with clipPolygon()
* @ https://github.com/d3/d3-geo/pull/108#issuecomment-323798937
* src1 does not work with rotation [0,0], but is ok with [1e-13,0]
* src2 does not work with rotation [0,0], but is ok with [1e-13,0.01]
* src3 is happy with rotation [0,0]
*
*/
var src1 = "https://unpkg.com/world-atlas/world/110m.json",
src2 = "https://unpkg.com/world-atlas/world/50m.json",
src3 = "world-110m.json",
src = src1;
var r = [1e-13,0];
r = [0,0];
//r = [-1e-13,0];
r = [20,0.01,0.01];
// var projection = d3.geoPolyhedralButterfly();
// var projection = d3.geoPolyhedralCollignon();
var projection = d3.geoPolyhedralWaterman();
</script>
<script src="map.js"></script>
https://d3js.org/d3.v4.min.js
https://d3js.org/topojson.v2.min.js
https://unpkg.com/d3-geo
https://d3js.org/d3-geo-projection.v2.min.js
https://unpkg.com/d3-geo-polygon
https://recifs.neocities.org/d3-geo-projection-clip-polyhedral.js