Mathematical engineer. Software developer at Act Now Coalition.
Plot.plot({
height: y.range()[1],
width,
marginLeft: 100,
x: {
grid: true
},
y: {
reverse: true,
type: "time"
},
marks: [
Plot.ruleY(data, { x1: 4, x2: 22, y: (d) => d.date, stroke: "#b0bec5" }),
Plot.ruleY(data, {
x1: (d) => d.sunriseHour,
x2: (d) => d.sunsetHour,
y: (d) => d.date,
stroke: "#ffc107",
strokeWidth: 2
})
]
})
formatDate = d3.timeFormat("%Y-%m-%d")
data = days.map(dateInfo)
x = d3.scaleLinear().domain([4, 22]).range([0, 400])
y = d3
.scaleTime()
.domain([dateStart, dateEnd])
.range([0, 365 * 4])
lat = 49.2065
lon = -122.9624
function dateInfo(date) {
const sun = suncalc.getTimes(date, lat, lon);
return {
date,
sunrise: sun.sunrise,
sunset: sun.sunset,
sunsetHour: dateToHours(sun.sunset),
sunriseHour: dateToHours(sun.sunrise)
};
}
dateStart = startOfYear(date)
dateEnd = endOfYear(date)
startOfYear = (date) => d3.timeYear.floor(date)
endOfYear = (date) => d3.timeYear.ceil(date)
dateToHours = (d) => d.getHours() + d.getMinutes() / 60 + d.getSeconds() / 3600
suncalc = require("suncalc")
days.map(dateInfo)
suncalc.getTimes(days[4], lat, lon)
import { getUserCoordinates } from "@pnavarrc/get-user-coordinates"
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.
