Published
Edited
Jan 10, 2021
3 stars
md`# Orthopgragic Map`
{
var width = 700,
height = 700;
var colors = {clickable: 'darkgrey', hover: 'grey', clicked: 'red', clickhover: 'darkred'}
var projection = d3.geoOrthographic()
// var projection = d3.geoMercator()
.rotate([rotate,0])
.scale(300)
.translate([width/2, height/2])
.clipAngle(90)
.precision(10);
var path = d3.geoPath()
.projection(projection);
var graticule = d3.geoGraticule();
var map = d3.select(DOM.svg(width,height))
.attr("class", "map")
map.append("defs").append("path")
.datum({type: "Sphere"})
.attr("id", "sphere")
.attr("d", path)
.style("fill","lightgrey");
map.append("use")
.attr("class", "stroke")
.attr("xlink:href", "#sphere")
map.append("use")
.attr("class", "fill")
.attr("xlink:href", "#sphere")
// map.append("path")
// .datum(graticule)
// .attr("class", "graticule")
// .attr("d", path)
// .style("stroke","black")
// .style("fill","none");
function ready() {
// //for every country
// let countries = countries.filter(function(d){
// // return true if a
// return names.some(function(n) {
// if (d.id = n.id) return d.name = n.name;
// });
// })
for (let i = 0; i < countries.length; i++) {
map.insert("path", ".graticule")
.datum(countries[i])
.attr("fill", colors.clickable)
.attr("d", path)
.attr("class", "clickable")
.attr("data-country-id", i)
.on("click", function() {
d3.selectAll(".clicked")
.classed("clicked", false)
.attr("fill", colors.clickable);
d3.select(this)
.attr("class", "clicked")
.attr("fill", colors.clicked);
// (function transition() {
d3.select(".clicked").transition()
.duration(1250)
.tween("rotate", function(){
var p = d3.geoCentroid(countries[d3.select(this).attr("data-country-id")]),
r = d3.interpolate(projection.rotate(), [-p[0], -p[1]]);
return function(t) {
projection.rotate(r(t));
map.selectAll("path").attr("d",path)
}
});
// })();
})
.on("mousemove", function(){
var c = d3.select(this);
if (c.classed("clicked")) {
c.attr("fill", colors.clickhover);
} else {
c.attr("fill", colors.hover);
}
})
.on("mouseout", function(){
var c = d3.select(this);
if (c.classed("clicked")) {
c.attr("fill", colors.clicked);
} else {
c.attr("fill", colors.clickable);
}
});
}
};
ready()
return map.node()
}
countries = topojson.feature(world, world.objects.countries).features
borders = topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; });
world = d3.json("https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json")
land = topojson.feature(world, world.objects.land)
topojson = require("topojson-client@3")
d3 = require("d3@6")
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.
