Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
Also listed in…
Observable's Instagram Shares
λo = 13.2322 // observer’s longitude (degrees)
φo = 56.0881 // observer’s latitude (degrees)
chart.update(date)
function solarMeanLongitude(t) { // L_0 (25.2)
return 280.46646 + t * (36000.76983 + t * 0.0003032);
}
function solarMeanAnomaly(t) { // M (25.3)
return 357.52911 + t * (35999.05029 + t * -0.0001537);
}
function orbitalEccentricity(t) { // e (25.4)
return 0.016708634 + t * (-0.000042037 + t * -0.0000001267);
}
function solarEquationOfCenter(t) { // C (p.164)
const m = solarMeanAnomaly(t) * deg2rad;
return (1.914602 - t * (0.004817 + t * 0.000014)) * sin(m)
+ (0.019993 - t * 0.000101) * sin(m * 2)
+ 0.000289 * sin(m * 3);
}
function solarTrueLongitude(t) { // ☉ = L_0 + C (p.164)
return solarMeanLongitude(t) + solarEquationOfCenter(t);
}
function solarTrueAnomaly(t) { // v = M + C (p.164)
return solarMeanAnomaly(t) + solarEquationOfCenter(t);
}
function solarApparentLongitude(t) { // λ (p.164)
const Ω = lunarLongitudeOfAscendingNode(t) * deg2rad;
return solarTrueLongitude(t) - 0.00569 - 0.00478 * sin(Ω);
}
function solarApparentRightAscension(t) { // α (25.6, 25.8)
const λ = solarApparentLongitude(t) * deg2rad;
const ε = obliquityOfEcliptic(t) * deg2rad;
return atan2(cos(ε) * sin(λ), cos(λ)) * rad2deg;
}
function solarApparentDeclination(t) { // δ (25.7, 25.8)
const λ = solarApparentLongitude(t) * deg2rad;
const ε = obliquityOfEcliptic(t) * deg2rad;
return asin(sin(ε) * sin(λ)) * rad2deg;
}
function lunarMeanLongitude(t) { // L′ (47.1)
return 218.3165 + t * 481267.8813;
}
function lunarLongitudeOfAscendingNode(t) { // Ω (p.144)
return 125.04452 + t * (-1934.136261 + t * (0.0020708 + t / 450000));
}
function meanObliquityOfEcliptic(t) { // ε_0 (22.2)
return 23 + (26 + (21.448 - t * (46.815 + t * (0.00059 - t * 0.001813))) / 60) / 60;
}
function obliquityOfEcliptic(t) { // ε (25.8) “true” obliquity
const Ω = lunarLongitudeOfAscendingNode(t) * deg2rad;
return meanObliquityOfEcliptic(t) + 0.00256 * cos(Ω);
}
function nutationInLongitude(t) { // Δψ (p.144)
const Ω = lunarLongitudeOfAscendingNode(t) * deg2rad;
const L = solarMeanLongitude(t) * deg2rad;
const L2 = lunarMeanLongitude(t) * deg2rad;
return (-17.20 * sin(Ω) - 1.32 * sin(2 * L) - 0.23 * sin(2 * L2) + 0.21 * sin(2 * Ω)) / 3600;
}
function nutationInObliquity(t) { // Δε (p.144)
const Ω = lunarLongitudeOfAscendingNode(t) * deg2rad;
const L = solarMeanLongitude(t) * deg2rad;
const L2 = lunarMeanLongitude(t) * deg2rad;
return (9.20 * cos(Ω) + 0.57 * cos(2 * L) + 0.10 * cos(2 * L2) - 0.09 * cos(2 * Ω)) / 3600;
}
function ecliptic2equatorial(t) {
const ε = obliquityOfEcliptic(t) * deg2rad;
return ([λ, β]) => {
λ *= rad2deg, β *= rad2deg;
const α = atan2(sin(λ) * cos(ε) - tan(β) * sin(ε), cos(λ)) * rad2deg; // right ascension
const δ = asin(sin(β) * cos(ε) + cos(β) * sin(ε) * sin(λ)) * rad2deg; // declination
return [α, δ];
};
}
function equatorial2horizontal(t, λo, ϕo) {
const Θ0 = (meanSiderealTime(t) + λo) * deg2rad;
ϕo *= deg2rad;
return ([α, δ]) => {
α *= deg2rad, δ *= deg2rad;
const h = Θ0 - α; /* local hour angle (radians) */
const A = atan2(sin(h), cos(h) * sin(ϕo) - tan(δ) * cos(ϕo)) * rad2deg; // azimuth
const a = asin(sin(ϕo) * sin(δ) + cos(ϕo) * cos(δ) * cos(h)) * rad2deg; // altitude
return [A, a];
};
}
function invertAzimuth([azimuth, altitude]) {
return [180 + azimuth, altitude];
}
function meanSiderealTime(t) {
const d = julianDate(t * 315576e7 + J2000) - 2451545;
return 280.46061837 + 360.98564736629 * d + 0.000387933 * t ** 2 - t ** 3 / 38710000;
}
function apparentSiderealTime(t) {
const Δψ = nutationInLongitude(t);
const ε = obliquityOfEcliptic(t) * deg2rad;
return meanSiderealTime(t) + Δψ * cos(ε);
}
julianDate = date => (date / 86400000) + 2440587.5
julianCentury = date => (date - J2000) / 315576e7 // J2000.0 centuries (22.1)
J2000 = Date.UTC(2000, 0, 1, 12)
hms = (h, m, s) => dms(h, m, s) * 15 // hours-minutes-seconds
dms = (d, m, s) => d + m / 60 + s / 3600 // degrees-minutes-seconds
τ = 2 * π
π = Math.PI
asin = Math.asin
atan2 = Math.atan2
cos = Math.cos
sin = Math.sin
tan = Math.tan
rad2deg = 180 / π
deg2rad = π / 180
deg360 = x => (x %= 360, x < 0 ? x + 360 : x)
path = d3.geoPath(projection)
projection = d3.geoStereographic()
.scale((width - 120) / 3)
.clipExtent([[0, 0], [width, height]])
.rotate([180, -90]) // use North-oriented azimuth
.translate([width / 2, height / 2])
.precision(0.1)
symbols = new Map([
["Sun", "☉"],
["Mercury", "☿"],
["Venus", "♀"],
["Moon", "☾"],
["Mars", "♂"],
["Jupiter", "♃"],
["Saturn", "♄"],
["Uranus", "⛢"],
["Neptune", "♆"],
["Pluto", "♇"]
])
xAxis = g => g
.call(g => g.append("g")
.attr("stroke", "currentColor")
.selectAll("line")
.data(d3.range(360))
.join("line")
.datum(d => [
projection([d, 0]),
projection([d, d % 10 ? -1 : -2])
])
.attr("x1", ([[x1]]) => x1)
.attr("x2", ([, [x2]]) => x2)
.attr("y1", ([[, y1]]) => y1)
.attr("y2", ([, [, y2]]) => y2))
.call(g => g.append("g")
.selectAll("text")
.data(d3.range(0, 360, 10))
.join("text")
.attr("dy", "0.35em")
.text(d => d === 0 ? "N" : d === 90 ? "E" : d === 180 ? "S" : d === 270 ? "W" : `${d}°`)
.attr("font-size", d => d % 90 ? null : 14)
.attr("font-weight", d => d % 90 ? null : "bold")
.datum(d => projection([d, -4]))
.attr("x", ([x]) => x)
.attr("y", ([, y]) => y))
yAxis = g => g
.call(g => g.append("g")
.selectAll("text")
.data(d3.range(10, 91, 10)) // every 10°
.join("text")
.attr("dy", "0.35em")
.text(d => `${d}°`)
.datum(d => projection([0, d]))
.attr("x", ([x]) => x)
.attr("y", ([, y]) => y))
circle = d3.range(5).map(i => [i / 4 * 360, 0]) // will be resampled by D3
outline = d3.geoCircle().radius(90).center([0, 90])()
graticule = d3.geoGraticule().stepMinor([15, 10])()
width = 960 + 28
height = width
d3 = require("d3@6")
ephemeris = require(await FileAttachment("ephemeris-2.0.0.js").url())
import {Scrubber} from "@mbostock/scrubber"
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.
