Built with blockbuilder.org
forked from Fil‘s block: myriahedral projection ? (work in progress)
forked from Fil‘s block: myriahedral projection ? (work in progress)
forked from Fil‘s block: myriahedral tabs ? (work in progress)
forked from Fil‘s block: flashy voronoi projection badge for the unconf 2017
<!DOCTYPE html>
<meta charset="utf-8">
<style>
html, body { margin: 0; }
#sphere {
stroke: black;
stroke-width: 1;
fill: rgba(10,10,10,0.05);
}
.links path { stroke-width: 0.5}
#countries path {
fill: none;
stroke: none;
}
.polygons {
stroke: #444;
}
.sites {
stroke: black;
fill: white;
}
</style>
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="d3-geo-voronoi.js"></script>
<script src="kruskal.js"></script>
<script src="d3-geo.js"></script>
<script src="d3-geo-projection.js"></script>
<script>
var scheme = ["#01b9c9",
"#1b6feb",
"#00af6a",
"#96a2ff",
"#80e2a4",
"#6671bd",
"#51ffd9",
"#0098f7",
"#228456",
"#a8acf2",
"#00f1f1",
"#5a7bae",
"#91f1e9",
"#4db1ff",
"#00bbad",
"#057da8",
"#6ecfc8",
"#8ad4ff",
"#008c89",
"#01d1f5"];
var orange = ["black", "#b8001f",
"#ff526c",
"#ff7747",
"#e1ac18", "yellow", "#dfff2c"];
var radians = Math.PI / 180;
d3.json('countries.geojson', function(err, world) {
var width = 960, height = 500;
var n = world.features.length;
var points = {
type: "FeatureCollection",
features: world.features
.filter(f => d3.geoArea(f) > 0.02)
.map(function(f, i) {
return {
type: "Point",
index: i,
coordinates: d3.geoCentroid(f)
}
})
}
var sites = points.features;
var v = d3.geoVoronoi()(points);
var links = v.links().features.map(d => d.properties);//.filter(d => d.urquhart)
kruskal(links) // mutates the links with property mst = true
var k = {
type: "FeatureCollection",
features: links.filter(d => d.mst).map(l => ({
type:"LineString",
coordinates: [l.source.coordinates, l.target.coordinates],
properties: l
}))
};
var degrees = 180 / Math.PI;
var myriahedral = function(poly, faceProjection) {
// it is possible to pass a specific projection on each face
// by default is is a gnomonic projection centered on the face's centroid
// scale 1 by convention
var i = 0;
faceProjection = faceProjection || function(face) {
var c = d3.geoCentroid({type: "MultiPoint", coordinates: face});
c = sites[i++].coordinates; // HORRIBLE METHOD TO RETRIEVE THE CENTER
return d3.geoGnomonic()
.scale(1)
.translate([0, 0])
.rotate([-c[0], -c[1]]);
};
// the faces from the cube each yield
// - face: its four vertices
// - contains: does this face contain a point?
// - project: local projection on this face
var faces = poly.map(function(face) {
var polygon = face.slice();
face = face.slice(0,-1);
return {
face: face,
contains: function(lambda, phi) {
// todo: use geoVoronoi.find() instead?
return d3.geoContains({ type: "Polygon", coordinates: [ polygon ] },
[lambda * degrees, phi * degrees]);
},
project: faceProjection(face)
};
});
// Build a tree of the faces, starting with face 0 (North Pole)
// which has no parent (-1); the next four faces around the equator
// are attached to the north face (0); the face containing the South Pole
// is attached to South America (4)
var parents = [-1];
var search = poly.length - 1;
do {
k.features.forEach(l => {
var s = l.properties.source.index,
t = l.properties.target.index;
if (parents[s] !== undefined && parents[t] === undefined) {
parents[t] = s;
search --;
}
else if (parents[t] !== undefined && parents[s] === undefined) {
parents[s] = t;
search --;
}
});
} while (search > 0);
//console.log('parents', parents)
parents
.forEach(function(d, i) {
var node = faces[d];
node && (node.children || (node.children = [])).push(faces[i]);
});
//console.log('faces', faces)
// Polyhedral projection
var proj = d3.geoPolyhedral(faces[0], function(lambda, phi) {
for (var i = 0; i < faces.length; i++) {
if (faces[i].contains(lambda, phi)) return faces[i];
}
},
80 * radians // rotation of the root face in the projected (pixel) space
)
.rotate([0,0,0.00001]) // polygon clipping fails on Antarctica without this
.fitExtent([[10,10],[width-10, height-10]], {type:"Sphere"})
proj.faces = faces;
return proj;
};
d3.geoMyriahedral = myriahedral;
var projection = d3.geoMyriahedral(
v.polygons().features.map(d => d.geometry.coordinates[0])
),
path = d3.geoPath().projection(projection);
var svg = d3.select("svg");
var boules = [];
var polygons = v.polygons().features;
svg.append('g')
.attr('class', 'tabs')
.selectAll('circle')
.data(links.filter(d => !d.mst))
.enter()
.append('path')
.attr('d', d => {
var i = d.source.index, j = d.target.index;
// this point is irrelevant, need to go to the polygon's edge
// var point = d3.geoInterpolate(sites[i].coordinates, sites[j].coordinates)(0.4999);
var p0 = polygons.filter(d => d.properties.site.index==i)[0],
p = p0.geometry.coordinates[0];
var q = polygons.filter(d => d.properties.site.index==j)[0].geometry.coordinates[0];
var common = null;
p.forEach((edge1,i) => q.forEach((edge2,j) => {
if (p[i-1] && q[j+1]
&& d3.geoDistance(edge1,edge2) < 1e-6
&& d3.geoDistance(p[i-1], q[j+1]) < 1e-6)
common = [edge1,p[i-1]];
}))
var m = d3.geoInterpolate(common[0], common[1])(0.5);
//console.log(m)
// then a tiny bit into the polygon
var s = p0.properties.site.coordinates;
var a = projection(d3.geoInterpolate(s, common[0])(0.999)),
b = projection(d3.geoInterpolate(s, common[1])(0.999)),
c = projection(d3.geoInterpolate(s, m)(0.999)),
t = Math.atan2(b[1]+c[1] - 2*a[1],b[0]+c[0] - 2*a[0]);
var tab = [ -10 * Math.sin(t), 10 * Math.cos(t) ];
var a1 = [a[0] * 0.8 + b[0] * 0.2 + tab[0], a[1] * 0.8 + b[1] * 0.2 + tab[1]],
b1 = [a[0] * 0.2 + b[0] * 0.8 + tab[0], a[1] * 0.2 + b[1] * 0.8 + tab[1]],
c1 = [a[0] * 0.5 + b[0] * 0.5 + tab[0], a[1] * 0.5 + b[1] * 0.5 + tab[1], d.target.index];
boules.push(c1);
return `M${b}L${b1}L${a1}L${a}z`;
})
.attr('stroke', 'black')
.attr('fill', 'white')
// .attr('fill', d => d3.schemeCategory20[d.target.index % 20]).attr('fill-opacity', 1)
// con
if(0)
svg.append('g')
.selectAll('circle')
.data(boules)
.enter()
.append('circle')
.attr('r', 5)
.attr('transform', d => `translate(${d[0]},${d[1]})`)
.attr('fill', d => scheme[d[2]%20])
if (1) svg.append('path')
.attr('id', 'sphere')
.datum({ type: "Sphere" })
.attr('d', path);
// ouch... mutates the polygon!
function shrink(polygon) {
var c = d3.geoCentroid(polygon);
polygon.geometry.coordinates2 = polygon.geometry.coordinates;
polygon.geometry.coordinates = polygon.geometry.coordinates
.map(ring => ring.map(p => d3.geoInterpolate(p, c)(0.001)));
return polygon;
}
if (1) svg.append('g')
.attr('class', 'polygons')
.selectAll('path')
.data(v.polygons().features.map(shrink))
.enter()
.append('path')
.attr('d', path)
.attr('fill', function(_,i) { return d3.interpolate(scheme[i%20], 'lightblue')(0.6) ; });
var countries = svg.append('g').attr('id', 'countries')
if(1) countries
.selectAll('path')
.data(world.features)
.enter()
.append('path')
.attr("d", path)
// .style('fill', (_,i) => d3.schemeCategory20c[i%20])
.style('fill', 'black')
//.style('stroke', 'black');
points = {
type: "FeatureCollection",
features: world.features
.map(function(f, i) {
return {
type: "Point",
index: i,
coordinates: d3.geoCentroid(f)
}
})
}
v = d3.geoVoronoi()(points);
links = v.links().features.map(d => d.properties);
countries = countries.selectAll('path');
const K = 5;
var p = points.features.map(d => 0);
p[7] = K+1; // 135 : RUSSIA
d3.interval(_ => {
p = p.map(j => Math.max(j-1,0) );
countries.style('fill', function(d, i) {
var ok = false;
if (p[i] == 0) {
links.forEach(l => {
if (l.source.index == i && p[l.target.index] == K
|| l.target.index == i && p[l.source.index] == K )
ok = true;
})
}
if (ok) p[i] = K + 1;
return orange[ p[i]];
})
}, 100);
});
</script>// https://github.com/mikolalysenko/union-find
UnionFind = (function() {
"use strict"; "use restrict";
function UnionFind(count) {
this.roots = new Array(count);
this.ranks = new Array(count);
for(var i=0; i<count; ++i) {
this.roots[i] = i;
this.ranks[i] = 0;
}
}
var proto = UnionFind.prototype
Object.defineProperty(proto, "length", {
"get": function() {
return this.roots.length
}
})
proto.makeSet = function() {
var n = this.roots.length;
this.roots.push(n);
this.ranks.push(0);
return n;
}
proto.find = function(x) {
var x0 = x
var roots = this.roots;
while(roots[x] !== x) {
x = roots[x]
}
while(roots[x0] !== x) {
var y = roots[x0]
roots[x0] = x
x0 = y
}
return x;
}
proto.link = function(x, y) {
var xr = this.find(x)
, yr = this.find(y);
if(xr === yr) {
return;
}
var ranks = this.ranks
, roots = this.roots
, xd = ranks[xr]
, yd = ranks[yr];
if(xd < yd) {
roots[xr] = yr;
} else if(yd < xd) {
roots[yr] = xr;
} else {
roots[yr] = xr;
++ranks[xr];
}
}
return UnionFind;
})()
function kruskal(graph, dist) {
// 1 A := ø
const A = [];
// 2 pour chaque sommet v de G :
// 3 créerEnsemble(v)
let n = -Infinity;
graph.forEach(l => {
if (l.source.index > n) n = l.source.index;
if (l.target.index > n) n = l.target.index;
})
const uf = new UnionFind(n);
// 4 trier les arêtes de G par poids croissant
graph = graph.map(l => {
l.w = l.length || dist(l.source, l.target);
return l;
})
graph.sort((a,b) => d3.ascending(a.w, b.w))
// 5 pour chaque arête (u, v) de G prise par poids croissant :
.forEach(l => {
// 6 si find(u) ≠ find(v) :
if (uf.find(l.source.index) != uf.find(l.target.index)) {
// 7 ajouter l'arête (u, v) à l'ensemble A
A.push(l);
// mutate the link
l.mst = true;
// 8 union(u, v)
uf.link(l.source.index, l.target.index);
}
});
// 9 retourner A
return A;
// yield uf;
}