html`
<main style="display: flex;">
${Plot.plot({
marginLeft: 10,
marginRight: 10,
width: width / 2 - 20,
height: width / 2 - 20,
projection: ({ width, height }) =>
d3
.geoOrthographic()
.translate([width / 2, height / 2])
.rotate([-sun[0], -sun[1], 0]),
marks: [
Plot.graticule(),
Plot.geo(land, { fill: "#000" }),
Plot.geo(sphere, { stroke: "#000" })
]
})}
${Plot.plot({
marginLeft: 10,
marginRight: 10,
width: width / 2 - 20,
height: width / 2 - 20,
projection: ({ width, height }) =>
d3
.geoOrthographic()
.translate([width / 2, height / 2])
.rotate([180 - sun[0], sun[1], 0]),
marks: [
Plot.graticule(),
Plot.geo(land, { fill: "#000" }),
Plot.geo(sphere, { stroke: "#000", fill: "rgba(0,0,255,0.3)" })
]
})}
`
time = new Date(new Date()).setUTCHours(0, 0, 0, 0)
sun = {
const now = new Date();
const day = new Date(+now).setUTCHours(0, 0, 0, 0);
const t = solar.century(now);
const longitude = ((day - now) / 864e5) * 360 - 180;
return [longitude - solar.equationOfTime(t) / 4, solar.declination(t)];
}
night = d3.geoCircle()
.radius(90)
.center(antipode(sun))
()
antipode = ([longitude, latitude]) => [longitude + 180, -latitude]
sphere = ({type: "Sphere"})
land = topojson.feature(world, world.objects.land)
world = fetch("https://cdn.jsdelivr.net/npm/world-atlas@2/land-50m.json").then(response => response.json())
topojson = require("topojson-client@3")
d3 = require("d3-geo@1")
solar = require("solar-calculator@0.3/dist/solar-calculator.min.js")
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.
