Palette in Hanoi.
function getCenter(method) {
if (!chosen[0]) return null;
const select = filter ? biggest : aggregate;
if (method === "d3.geoCentroid") {
return d3.geoCentroid(select);
}
if (method === "turf.centroid") {
return turf.centroid(select).geometry.coordinates;
}
if (method === "turf.centerOfMass") {
return turf.centerOfMass(select).geometry.coordinates;
}
if (filter || aggregate.type === "Polygon")
return polylabel(select.coordinates, 1.0);
return null;
}
function format([x, y]) {
const dir = [["N", "S"], ["E", "W"]];
return [y, x].map((d, i) => {
const suffix = d >= 0 ? dir[i][0] : dir[i][1];
const rawDeg = Math.abs(d);
const deg = Math.floor(rawDeg);
const rawMin = (rawDeg - Math.floor(deg)) * 60;
const min = Math.floor(rawMin);
const rawSec = (rawMin - min) * 60;
const sec = Math.floor(rawSec);
return `${deg}°${d3.format("02")(min)}'${d3.format("02")(sec)}''${suffix}`;
});
}
centers = new Map(methods.map(d => [d, getCenter(d)]))
methods = [
"d3.geoCentroid",
"turf.centroid",
"turf.centerOfMass",
"mapbox.polylabel"
]
color = d3.scaleOrdinal(methods.map(d => d.name), d3.schemeCategory10)
biggest = {
if (!chosen[0]) return null;
if (aggregate.type === "Polygon") return aggregate;
return aggregate.coordinates
.map(d => ({ type: "Polygon", coordinates: d }))
.sort((a, b) => d3.descending(d3.geoArea(a), d3.geoArea(b)))[0];
}
aggregate = {
if (!chosen[0]) return null;
const aggregate = topojson.merge(
world,
world.objects.countries.geometries.filter(d =>
chosen.includes(d.properties.name)
)
);
// If the selected countries form a polygon
if (aggregate.coordinates.length === 1)
return {
type: "Polygon",
coordinates: aggregate.coordinates[0]
};
return aggregate;
}
mutable chosen = []
mutable hovered = "Select a country"
chosenToString = chosen
.sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()))
.join(" - ")
{
map.update(centers);
}
{
clear;
mutable chosen = [];
map.clear();
}
function handleMouseMove(d) {
if (d3.select(this).attr("class") === "unclicked") {
d3.select(this).attr("fill", "#ccc");
}
mutable hovered = d.properties.name;
}
function handleMouseLeave() {
if (d3.select(this).attr("class") === "unclicked") {
d3.select(this).attr("fill", "#f4f4f4");
}
mutable hovered = "Select a country";
}
function handleClick(d) {
if (d3.select(this).attr("class") === "unclicked") {
d3.select(this)
.attr("class", "clicked")
.attr("fill", "#999");
} else {
d3.select(this)
.attr("class", "unclicked")
.attr("fill", "#f4f4f4");
}
mutable chosen = d3
.select(this.parentNode)
.selectAll(".clicked")
.data()
.map(d => d.properties.name);
}
height = 510
path = d3.geoPath(projection)
projection = d3.geoNaturalEarth1().fitSize([width, height], countries)
countries = topojson.feature(world, world.objects.countries)
world = FileAttachment("countries-50m.json").json()
topojson = require("topojson-client@3")
turf = require("@turf/turf@5")
polylabel = require("https://bundle.run/@mapbox/polylabel@1.0.2")
d3 = require("d3@5")
import { button, checkbox } 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.
