Mathematical engineer. Software developer at Act Now Coalition.
data
Plot.plot({
width,
y: { domain: [0, 24] },
marks: [
Plot.frame({ fill: "#37474f" }),
Plot.areaY(data, {
x: "date",
y1: "sunrise",
y2: "sunset",
curve: "step",
fill: "#b2ebf2"
})
]
})
Plot.plot({
width,
x: { domain: [0, 24] },
marks: [
Plot.ruleY([0]),
Plot.lineY(sunlightMinutes(new Date("2022-01-01"), loc), options),
Plot.lineY(sunlightMinutes(new Date("2022-02-01"), loc), options),
Plot.lineY(sunlightMinutes(new Date("2022-03-01"), loc), options),
Plot.lineY(sunlightMinutes(new Date("2022-04-01"), loc), options),
Plot.lineY(sunlightMinutes(new Date("2022-05-01"), loc), options),
Plot.lineY(sunlightMinutes(new Date("2022-06-01"), loc), options),
Plot.lineY(sunlightMinutes(new Date("2022-07-01"), loc), options),
Plot.lineY(sunlightMinutes(new Date("2022-08-01"), loc), options),
Plot.lineY(sunlightMinutes(new Date("2022-09-01"), loc), options),
Plot.lineY(sunlightMinutes(new Date("2022-10-01"), loc), options),
Plot.lineY(sunlightMinutes(new Date("2022-11-01"), loc), options),
Plot.lineY(sunlightMinutes(new Date("2022-12-01"), loc), options)
]
})
options = ({ x: "hours", y: "altitude", stroke: "black" })
loc = [location.lat, location.lon]
dataToday = d3
.timeMinutes(new Date("2022-09-26T07:00:00"), new Date("2022-09-26T19:00:00"))
.map(sunPosition)
dataTomorrow = d3
.timeMinutes(new Date("2022-09-27"), new Date("2022-09-28"))
.map(sunPosition)
function sunPosition(date) {
const sun = suncalc.getPosition(date, location.lat, location.lon);
return {
date,
hour: dateToHours(date),
altitude: (180 / Math.PI) * sun.altitude
};
}
location = ({ lat: 49.2065, lon: -122.9624 })
now = new Date()
sunInfo = suncalc.getTimes(now, location.lat, location.lon)
sunPos = suncalc.getPosition(now, location.lat, location.lon)
localSunset = sunInfo.sunrise.getMinutes()
formatTimes(new Date())
formatTimes = (date) => {
const { sunrise, sunset } = suncalc.getTimes(
date,
location.lat,
location.lon
);
const toHours = (d) =>
d.getHours() + d.getMinutes() / 60 + d.getSeconds() / 3600;
return {
date,
sunrise: toHours(sunrise),
sunset: toHours(sunset)
};
}
data = d3.timeDay
.range(new Date("2022-01-01"), new Date("2022-12-31"))
.map(formatTimes)
suncalc = require("suncalc")
function sunlightMinutes(date, [lat, lon]) {
const sunTimes = suncalc.getTimes(date, lat, lon);
const sunPos = suncalc.getPosition(date, lat, lon);
const dates = d3.timeMinutes(sunTimes.sunrise, sunTimes.sunset);
return dates.map((d) => ({
hours: dateToHours(d),
altitude: (180 / Math.PI) * suncalc.getPosition(d, lat, lon).altitude
}));
}
sunlightMinutes
sunlightMinutes(new Date("2022-01-01"), [location.lat, location.lon])
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.
