Skip to content

Instantly share code, notes, and snippets.

@danhammer
Last active July 25, 2017 03:29
Show Gist options
  • Select an option

  • Save danhammer/5c3ab212b068f3a63480395ce5484a85 to your computer and use it in GitHub Desktop.

Select an option

Save danhammer/5c3ab212b068f3a63480395ce5484a85 to your computer and use it in GitHub Desktop.
shapes
license: mit
<!DOCTYPE html>
<meta charset="utf-8">
<style>
path {
fill: #ccc;
stroke: #000;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var width = 960,
height = 500;
var projection = d3.geo.albers()
.rotate([120, 0])
.center([0, 37.7])
.scale(2700);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
d3.json("spratly.json", function(polygon) {
var coordinates0 = polygon.coordinates[0].map(projection),
coordinates1 = circle(coordinates0),
path = svg.append("path"),
d0 = "M" + coordinates0.join("L") + "Z",
d1 = "M" + coordinates1.join("L") + "Z";
loop();
function loop() {
path
.attr("d", d0)
.transition()
.duration(5000)
.attr("d", d1)
.transition()
.delay(5000)
.attr("d", d0)
.each("end", loop);
}
});
function circle(coordinates) {
var circle = [],
length = 0,
lengths = [length],
polygon = d3.geom.polygon(coordinates),
p0 = coordinates[0],
p1,
x,
y,
i = 0,
n = coordinates.length;
// Compute the distances of each coordinate.
while (++i < n) {
p1 = coordinates[i];
x = p1[0] - p0[0];
y = p1[1] - p0[1];
lengths.push(length += Math.sqrt(x * x + y * y));
p0 = p1;
}
var area = polygon.area(),
radius = Math.sqrt(Math.abs(area) / Math.PI),
centroid = polygon.centroid(-1 / (6 * area)),
angleOffset = -Math.PI / 2, // TODO compute automatically
angle,
i = -1,
k = 2 * Math.PI / lengths[lengths.length - 1];
// Compute points along the circle’s circumference at equivalent distances.
while (++i < n) {
angle = angleOffset + lengths[i] * k;
circle.push([
centroid[0] + radius * Math.cos(angle),
centroid[1] + radius * Math.sin(angle)
]);
}
return circle;
}
</script>
{"type":"Polygon","coordinates":[[[[111.916952,8.642059],[111.916866,8.642154],[111.917188,8.642504],[111.917392,8.642611],[111.917306,8.642717],[111.917467,8.642854],[111.917639,8.642833],[111.91795,8.643173],[111.917886,8.643258],[111.918175,8.643565],[111.91825,8.643979],[111.918154,8.644021],[111.918122,8.643915],[111.918036,8.643936],[111.918122,8.644308],[111.918186,8.644308],[111.918186,8.644255],[111.918358,8.644255],[111.918551,8.645008],[111.918465,8.644976],[111.918454,8.64523],[111.918422,8.645305],[111.918358,8.645315],[111.91839,8.6454],[111.918497,8.645549],[111.918508,8.645655],[111.918433,8.64574],[111.918486,8.645824],[111.918068,8.645803],[111.918068,8.645909],[111.918454,8.645941],[111.918508,8.646037],[111.918433,8.646068],[111.918433,8.646249],[111.918358,8.646249],[111.918293,8.6461],[111.917124,8.646334],[111.917038,8.646249],[111.916641,8.645368],[111.916673,8.645294],[111.91677,8.645305],[111.916791,8.6454],[111.916877,8.645347],[111.916695,8.644891],[111.916587,8.644923],[111.91663,8.64505],[111.916544,8.645124],[111.916448,8.644806],[111.916137,8.644233],[111.916137,8.643756],[111.916255,8.643756],[111.916255,8.643873],[111.916341,8.643873],[111.916351,8.643353],[111.916276,8.643353],[111.916265,8.643459],[111.916169,8.64347],[111.916169,8.643045],[111.916094,8.642992],[111.916029,8.642992],[111.915987,8.643077],[111.915976,8.644255],[111.916888,8.646387],[111.917381,8.646917],[111.918293,8.647299],[111.920278,8.648031],[111.923239,8.649176],[111.923207,8.649314],[111.923625,8.649473],[111.923625,8.649367],[111.924344,8.649664],[111.924977,8.649123],[111.924924,8.64854],[111.923175,8.646641],[111.921587,8.644456],[111.921126,8.643841],[111.92149,8.643533],[111.921619,8.643714],[111.921812,8.643576],[111.921523,8.643194],[111.921362,8.643332],[111.921426,8.643438],[111.921104,8.643745],[111.921072,8.643597],[111.920772,8.643332],[111.920418,8.643067],[111.920246,8.642961],[111.920139,8.642812],[111.919473,8.642207],[111.919398,8.642091],[111.919087,8.641995],[111.918969,8.642048],[111.918776,8.641868],[111.918036,8.641041],[111.918122,8.640956],[111.917757,8.640532],[111.917639,8.640606],[111.917435,8.640532],[111.917145,8.640447],[111.916963,8.640447],[111.916426,8.640882],[111.916373,8.641041],[111.916426,8.641476],[111.916952,8.642059]]]]}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment