map = html`<svg viewBox="0 2 ${width} ${height - 4}" stroke-linejoin="round">
${zones.map(f => svg`
<path d="${path(f)}" fill="${color(f.properties.zone)}">
<title>${f.properties.places}
${f.properties.time_zone}</title>
</path>
`)}
<g pointer-events="none">
<path d="${path(mesh)}" fill="none" stroke="#000" />
<path d="${path(land)}" fill-opacity="0.1" />
<path d="${path(graticule)}" stroke="#000" stroke-opacity="0.15" fill="none" />
</g>
</svg>`
color = d3.scaleSequential(d3.extent(zones, f => f.properties.zone), d3.interpolateRdBu)
projection = d3.geoMiller()
path = d3.geoPath(projection)
width = 975
height = {
const [[x0, y0], [x1, y1]] = d3.geoPath(projection.fitWidth(width, outline)).bounds(outline);
const dy = Math.ceil(y1 - y0), l = Math.min(Math.ceil(x1 - x0), dy);
projection.scale(projection.scale() * (l - 1) / l).precision(0.2);
return dy;
}
outline = ({type: "Sphere"})
graticule = d3.geoGraticule().stepMinor([15, 10])()
timezones = FileAttachment("timezones.json").json()
zones = topojson.feature(timezones, timezones.objects.timezones).features
mesh = topojson.mesh(timezones, timezones.objects.timezones)
land = FileAttachment("land-50m.json").json().then(topology => topojson.feature(topology, topology.objects.land))
import {ramp} from "@mbostock/color-ramp"
d3 = require("d3@6", "d3-geo-projection@2")
topojson = require("topojson-client@3")
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.
