Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
Star MapSolar AnalemmasHertzsprung–Russell diagramExoplanetsLunar VisibilityPhases of the Moon
The Sun’s View of the Earth
map = {
const context = DOM.context2d(width, height);
const path = d3.geoPath(projection, context);
context.beginPath(), path(graticule), context.strokeStyle = "#ccc", context.stroke();
context.beginPath(), path(land), context.fillStyle = "#000", context.fill();
context.beginPath(), path({type: "Point", coordinates: sun}), context.fillStyle = "#f00", context.fill();
context.beginPath(), path(sphere), context.strokeStyle = "#000", context.stroke();
return context.canvas;
}
height = width
projection = d3.geoOrthographic()
.rotate([-sun[0], -sun[1]])
.fitExtent([[1, 1], [width - 1, height - 1]], sphere)
.precision(0.1)
sun = {
const now = new Date;
const day = new Date(+now).setUTCHours(0, 0, 0, 0);
const t = solar.century(now);
const x = (day - now) / 864e5 * 360 - 180 - solar.equationOfTime(t) / 4;
const y = solar.declination(t);
return [x % 360, y];
}
sphere = ({type: "Sphere"})
graticule = d3.geoGraticule10()
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.
