open web tools for creativity and community
viewof cut = html`<input type=checkbox />`
daysFilter = d => [1, 3, 5].includes(d.getDay()) // Monday, Wednesday, Friday
year = startDate.getUTCFullYear()
inch = n => pRound(n * 72)
MOON_R = 10
CUT_R = MOON_R + 1
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()()
dayScale = {
const scale = d3
.scalePoint()
.domain(d3.range(15))
.range([margin.left, width - margin.right])
.padding(1);
return (d, i) => {
const base = i % 12;
const offset = Math.floor(base / 3);
return scale(base + offset);
};
}
rowScale = {
const scale = d3
.scalePoint()
.domain(d3.range(13))
.range([margin.top, height - margin.bottom])
.padding(1);
return (d, i) => scale(Math.floor(i / 12));
}
days = {
return d3.timeDay.range(startDate, endDate).filter(daysFilter);
}
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(3 / 4),
bottom: inch(1 / 2),
left: inch(3 / 4)
})
suncalc = require("suncalc@1")
d3 = require("d3@5")
import { renderTextArray, renderTextPaths } from '@meetamit/hershey-fonts'
//import { compileSVG } from '@forresto/svg-to-cnc'
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.
