open web tools for creativity and community
viewof title = html`<input type="text" value="PHASES OF THE MOON IN 2023, AS SEEN FROM HELSINKI" />`
viewof cut = html`<input type=checkbox />`
blackCuts = days.map((d, i) => {
// Full circles
const x = dayScale(d, i);
const y = rowScale(d, i);
return pathCircle(x, y, MOON_R);
})
pathCircle = (x, y, r) =>
`M ${x - r} ${y} A ${r} ${r} 180 1 0 ${x + r} ${y} A ${r} ${r} 180 1 0 ${x -
r} ${y}`
whiteCuts = days.map((d, i) => {
// Dark side of moon
const x = dayScale(d, i);
const y = rowScale(d, i);
const time = d3.timeHour.offset(d, 12); // 12 for noon
const { phase, angle } = suncalc.getMoonIllumination(time);
const lightAngle = 180 - phase * 360;
const darkAngle = 180 + lightAngle;
const [latitude, longitude] = coords;
// const { rise } = suncalc.getMoonTimes(d, latitude, longitude, true);
// return rise;
const { parallacticAngle } = suncalc.getMoonPosition(
time,
latitude,
longitude
);
const rotationZ = ((angle - parallacticAngle) / TAU) * 360; // * -1;
// Close enough to full moon; too small to cut
if (Math.abs(lightAngle) < 8) return '';
return (
projection.rotate([darkAngle, 0, rotationZ]).translate([x, y]),
path(hemisphere)
);
})
registrationCuts = {
const REG_RADIUS = inch(1 / 64);
const MARGIN = inch(1 / 4) + REG_RADIUS;
return [
pathCircle(MARGIN, MARGIN, REG_RADIUS), // TL
pathCircle(width - MARGIN, MARGIN, REG_RADIUS), // TR
pathCircle(width - MARGIN, height - MARGIN, REG_RADIUS), // BR
pathCircle(MARGIN, height - MARGIN, REG_RADIUS) // BL
];
}
year = startDate.getUTCFullYear()
inch = n => pRound(n * 72)
MOON_R = 14
//moonGridCutCompile = compileSVG(moonGrid)
TAU = Math.PI*2
radians = n => n/360 * TAU
pointOnArc = (r, a) =>
pRound(Math.sin(radians(a)) * r) + " " + pRound(Math.cos(radians(a)) * r)
pRound = n => Math.round(n * 100000) / 100000
isoDate = d => d.toISOString().split('T')[0]
projection = d3
.geoOrthographic()
.translate([0, 0])
.scale(MOON_R)
path = d3.geoPath(projection)
hemisphere = d3.geoCircle()()
ROWS = 13
COLS = 28
dayScale = {
const scale = d3
.scalePoint()
.domain(d3.range(COLS))
.range([margin.left, width - margin.right])
.padding(1);
return (d, i) => {
return pRound(scale(i % COLS));
};
}
rowScale = {
const scale = d3
.scalePoint()
.domain(d3.range(ROWS))
.range([margin.top, height - margin.bottom])
.padding(1);
return (d, i) => {
const offset = i % 2 !== 0 ? (MOON_R * 4) / 3 : 0;
return pRound(scale(Math.floor(i / COLS)) + offset);
};
}
days = {
const oneDay = 24 * 60 * 60 * 1000;
return d3.timeDay.range(startDate - oneDay, endDate);
}
months = {
const now = new Date(year, 0, 1);
const start = d3.timeYear(now);
return d3.timeMonths(start, d3.timeYear.offset(start, 1));
}
width = inch(WIDTH)
height = inch(HEIGHT)
margin = ({
top: inch(3 / 4),
right: inch(1 / 2),
bottom: inch(1 / 2),
left: inch(1 / 2)
})
suncalc = require("suncalc@1")
d3 = require("d3@5")
import { renderTextArray, renderTextPaths } from '@meetamit/hershey-fonts'
import { compileSVG } from '@forresto/svg-to-cnc'
import { worldMapCoordinates } from "@jashkenas/inputs"
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.
