Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
longitude = -122.4194
latitude = 37.7749
suncalc = require("suncalc@1")
start = d3.timeYear(new Date)
end = d3.timeYear.offset(start, 1)
days = d3.timeDay.range(start, end)
data = days.map(day => {
var noon = d3.timeHour.offset(day, 12),
sun = suncalc.getTimes(noon, latitude, longitude),
moon = suncalc.getMoonTimes(noon, latitude, longitude);
return {
day: day,
sunrise: sun.sunrise,
sunset: sun.sunset,
moonrise: moon.rise,
moonset: moon.set,
moonstate: moon.alwaysUp ? 1 : moon.alwaysDown ? -1 : 0,
moonfraction: suncalc.getMoonIllumination(noon).fraction
};
})
function findMinimum(f, x0, x1) {
x0 = +x0, x1 = +x1;
while (Math.abs(x1 - x0) > 1) {
var dx = (x1 - x0) / 3;
if (f(x0 + dx) > f(x1 - dx)) x0 += dx;
else x1 -= dx;
}
return new Date((x0 + x1) / 2);
}
events = {
var events = [],
d0,
d1 = d3.timeDay.offset(start, -1),
d2 = d3.timeDay.offset(start, 0),
x0,
x1 = suncalc.getMoonIllumination(d1).fraction,
x2 = suncalc.getMoonIllumination(d2).fraction;
for (var i = 0; i < 365; ++i) {
d0 = d1, d1 = d2, d2 = d3.timeDay.offset(start, i + 1);
x0 = x1, x1 = x2, x2 = suncalc.getMoonIllumination(d2).fraction;
if (x1 > x0 && x1 > x2) {
events.push({date: findMinimum(x => 1 - suncalc.getMoonIllumination(x).fraction, d0, d2), type: "full"});
} else if (x1 < x0 && x1 < x2) {
events.push({date: findMinimum(x => suncalc.getMoonIllumination(x).fraction, d0, d2), type: "new"});
}
}
return events;
}
width = 975
height = 364 * 3 + margin.top + margin.bottom
margin = ({top: 40, right: 70, bottom: 60, left: 50})
x = d3.scaleLinear().domain([0, 864e5]).range([margin.left, width - margin.right])
y = d3.scaleLinear().domain([0, 364]).range([margin.top, height - margin.bottom])
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.
