map = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
yield svg.node();
// speedy polybool https://observablehq.com/d/a7fc92f18bc1365a
const l = clip(d3.geoProject(land, projection));
const triangles = svg
.append("g")
.attr("id", "experimental")
.selectAll("g")
.data(cutter)
.join("g")
.datum(d => ({ type: "Polygon", coordinates: [d] }));
triangles
.append("path")
.attr("d", d3.geoPath())
.attr("stroke", "red")
.attr("fill", "none");
let stop = false;
invalidation.then(() => (stop = true));
for (const tri of triangles) {
if (stop) return;
const t = d3.select(tri);
t.select("path")
.attr("fill", "rgba(255,180, 120, 0.3)")
.attr("stroke", null);
t.append("path")
.datum(l)
.attr("d", d3.geoPath())
.attr("fill", "rgba(120,180, 255, 0.3)")
.attr("stroke", "blue");
await Promises.delay(20);
}
}
cutter = {
let rotate = projection.rotate();
projection.rotate([0, 0]);
const cutter = [];
for (const face of structure.faces) {
const pts = face.face.map(e => d3.geoInterpolate(e, face.centroid)(1e-5));
const corners = pts.map(projection),
points = [];
for (let i = 0; i <= n; i++) {
for (let j = 0; j <= i; j++) {
const c = [n - i, i - j, j].map(d => d / n);
points.push([
c[0] * corners[0][0] + c[1] * corners[1][0] + c[2] * corners[2][0],
c[0] * corners[0][1] + c[1] * corners[1][1] + c[2] * corners[2][1]
]);
}
}
const delaunay = d3.Delaunay.from(points),
triangles = Array.from(delaunay.trianglePolygons()).filter(
d => d3.polygonArea(d) > 10 // eliminate "flat" triangles due to collinearity
);
cutter.push(...triangles);
}
projection.rotate(rotate);
return cutter;
}
projection = d3
.geoIcosahedral()
.faceProjection(face => {
// center the face
var c = face.site.map(d => -d);
// rotate it to put its apex "up" not "down"
c[2] = Math.abs(c[1] - 52.62) < 1 || Math.abs(c[1] + 10.81) < 1 ? 60 : 0;
return d3
.geoProjection(d3.geoGrayFullerRaw())
.rotate(c)
.translate([0, 0]);
})
.rotate(bucky ? d3.geoAirocean().rotate() : [132, 0])
.fitExtent([[1, 1], [width - 1, height - 1]], { type: "Sphere" })
height = width * 0.5
d3 = require("d3@6", "d3-geo-projection@2", "d3-geo-polygon@1.9")
// polybooljs
import { clip } from "a7fc92f18bc1365a"
land = fetch(
"https://unpkg.com/visionscarto-world-atlas@0.0.6/world/110m_land.geojson"
).then(d => d.json())
import { checkbox, slider } from "@jashkenas/inputs"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
