30:T165a,year_calendar = { const svg = d3.select(DOM.svg(width, height)); const g = svg.append("g").attr("font-family", "Monaspace Krypton"); // See Fonts section if you want to upload custom font // For debug CM ruler // ruler(g); // Draw the A1 background (replacing A4) g.selectAll(".A1") .data([null]) .join((enter) => enter.append("rect").attr("class", "A1")) .attr("fill", color) .attr("stroke", borderColor) .attr("fill-opacity", 0.01) .attr("width", A.w) .attr("height", A.h); // Year Label g.selectAll(".year-label") .data([null]) .join("text") .classed("year-label", true) .attr("y", (A.h / 2 - (monthHeight * 12) / 2) * 0.8) .attr("x", A.w / 2) .attr("text-anchor", "middle") .attr("dominant-baseline", "central") .attr("font-weight", "bold") .attr("font-size", cellHeight) .attr("fill", color) .text(numSystem === "roman" ? toRoman(year) : year); const yearG = g .selectAll(".year") .data([null]) .join("g") .classed("year", true) .attr("transform", `translate(0, ${height / 2 - monthHeight * 12 * 0.46})`); const lastMonthOffset = offset(data[11]); // Add designer credit text at the bottom of the page yearG .selectAll(".who") .data([null]) .join("text") .classed("who", true) // Use a day offset from the last month’s data; note: adjust if your data structure differs .attr( "x", align === "weekday" ? daysScale(data[11].days[30].getDate() + lastMonthOffset) + cellWidth : daysScale(data[11].days[30].getDate()) + cellWidth * 4 ) .attr("y", monthHeight * 12 + 2) .attr("font-size", mm2px(5)) .attr("fill", borderColor) .attr("dominant-baseline", "hanging") .attr("text-anchor", "end") .text("designed by belsky.in"); const months = yearG .selectAll(".month") .data(data) .join("g") .classed("month", true) .attr("transform", (d, i) => { const xOffset = align === "weekday" ? offset(d, i) * cellWidth : cellWidth * 3; return `translate(${xOffset}, ${i * monthHeight})`; }); // Special days captions yearG .selectAll(".special-days") .data([null]) .join("text") .classed("special-days", true) .attr("x", daysScale(data[11].days[0].getDate() + offset(data[11]))) .attr("y", monthHeight * 12 + 2) .attr("font-size", mm2px(5)) .attr("fill", borderColor) .attr("dominant-baseline", "hanging") .attr("text-anchor", "start") .text((d) => specialDaysCaption); // BD // yearG // .selectAll(".bd") // .data([null]) // .join("text") // .classed("bd", true) // .attr("x", daysScale(data[11].days[5].getDate() + offset(data[11]))) // .attr("y", monthHeight * 12 - monthHeight / 2) // .attr("dy", -12.9) // .attr("dx", 7.48) // .attr("font-size", mm2px(2.5)) // // .attr("fill", borderColor) // .attr("fill", d3.interpolateRgb(color, "#e9f1ea")(0.5)) // .attr("dominant-baseline", "middle") // .attr("text-anchor", "middle") // .text("♥"); // yearG // .selectAll(".bd") // .data([null]) // .join("g") // .classed("bd", true) // .attr("transform", (d, i) => { // return `translate(${daysScale( // data[9].days[27].getDate() + offset(data[9]) // )}, ${monthHeight * 10 - monthHeight / 2})`; // }) // .call(renderBurstLines()); // For each month, add the month name and the grid of day cells. months.each(function (d, i) { const monthG = d3.select(this); // Render the month name (using the first letter of the abbreviated month name) monthG .selectAll(".month-name") .data([null]) .join("text") .attr("class", "month-name") .attr("text-anchor", "middle") .attr("dominant-baseline", "central") .attr("font-weight", "bold") .attr("font-size", cellHeight * k * 1.5) .attr("fill", weekendColor) .attr("dy", cellHeight / 2) .attr("dx", -cellWidth) .attr("x", daysScale(1)) .text(d3.timeFormat("%b")(d.days[0])[0].toLocaleLowerCase()); // Overlay a faint rectangle on weekends. monthG .selectAll(".weekend") .data(d.days.filter(isWeekend), (d) => d) .join((enter) => enter.append("rect").attr("class", "weekend")) .attr("transform", (d) => `translate(${daysScale(d.getDate())}, 0)`) .attr("stroke", "none") .attr("fill", weekendColor) .attr("width", cellWidth) .attr("height", cellHeight); // Create a group for each day in the month. const days = monthG .selectAll(".day") .data(d.days, (d) => d) .join("g") .classed("day", true) .attr("transform", (d) => `translate(${daysScale(d.getDate())}, 0)`) .call((gg) => // Draw the day cell as a rectangle. gg .append("rect") .attr("stroke", borderColor) .attr("fill", "none") .attr("width", cellWidth) .attr("height", cellHeight) ) // Dates .call((gg) => gg .append("text") .attr("fill", color) .attr("dominant-baseline", "hanging") .attr("text-anchor", "middle") .attr("y", (d) => 1 + cellHeight * 0.1) .attr("dy", (d) => specialDays.includes("moon") && (isFullMoonDay(d) || isNewMoonDay(d)) ? -0.8 : 0 ) .attr("dx", cellWidth / 2) .attr("font-size", mm2px(10)) .attr("opacity", (d) => ["◓", "◒", "◉", "●"].includes(dayLabel(d)) ? 0.35 : 0.5 ) .text(dayLabel) ); }); return svg.node(); }31:T472,// Marks exactly one calendar day per event by choosing the local minimum vs prev/next day // Tie-break: if equal, prefer the earlier day isLunarEventDay = (d, target) => { const DAY = 86400000; const SYNODIC_MONTH = 29.530588853; // Reference new moon (UTC): 2000-01-06 18:14 const KNOWN_NEW_MOON_MS = Date.UTC(2000, 0, 6, 18, 14, 0); // Moon phase in [0..1): 0=new moon, 0.5=full moon const moonPhase01 = (ms) => { const lunations = (ms - KNOWN_NEW_MOON_MS) / DAY / SYNODIC_MONTH; return ((lunations % 1) + 1) % 1; }; // Circular distance to a target phase (handles wrap-around near 0/1) const phaseDist = (p, target) => { const d = Math.abs(p - target); return Math.min(d, 1 - d); }; // Use UTC noon to avoid DST and midnight edge cases const ms0 = Date.UTC(d.getFullYear(), d.getMonth(), d.getDate(), 12, 0, 0); const msPrev = ms0 - DAY; const msNext = ms0 + DAY; const distPrev = phaseDist(moonPhase01(msPrev), target); const dist0 = phaseDist(moonPhase01(ms0), target); const distNext = phaseDist(moonPhase01(msNext), target); return dist0 < distPrev && dist0 <= distNext; }32:T583,ruler = (g) => g .selectAll(".ruler") .data([null]) .join("g") .classed("ruler", true) // horizontal cantimeters .call((gg) => gg .selectAll(".horizontal") .data(d3.range(0, Math.ceil(px2mm(A.w) / 10))) .join("g") .attr("transform", (d) => `translate(${px2mm.invert(d * 10)}, 0)`) .call((ggg) => ggg.append("line").attr("y1", A.h).attr('stroke', '#00000010')) .call((ggg) => ggg.append("rect").attr("height", 3).attr("width", 1)) .call((ggg) => ggg .append("text") .text((d) => d) .attr("text-anchor", "middle") .attr("font-size", oneCmInPx / 2) .attr("dy", 10) ) ) // vertical cantimeters .call((gg) => gg .selectAll(".vertical") .data(d3.range(0, Math.ceil(px2mm(A.h) / 10))) .join("g") .attr("transform", (d) => `translate(0, ${px2mm.invert(d * 10)})`) .call((ggg) => ggg.append("rect").attr("width", 3).attr("height", 1)) .call((ggg) => ggg.append("line").attr("x1", A.w).attr('stroke', '#00000010')) .call((ggg) => ggg .append("text") .text((d) => d) .attr("text-anchor", "start") .attr("dominant-baseline", "central") .attr("font-size", oneCmInPx / 2) .attr("dx", 10) ) )33:T496,renderBurstLines = ({ len = 3, sep = 15, angleDeg = 45, k = 0.26, // scale factor dx = 13.6, // <- pan X (NOT scaled by k) dy = -16.9, // <- pan Y (NOT scaled by k) className = "bd-ray" } = {}) => { return function (selection) { selection.each(function () { const g = d3.select(this); const L = len * k; const S = sep * k; const angle = (angleDeg * Math.PI) / 180; const ux = Math.cos(angle) * L; // ray delta X const uy = Math.sin(angle) * L; // ray delta Y const rays = [ { id: "left", x1: -S / 2, y1: 0, x2: -S / 2 - ux, y2: -uy }, { id: "right", x1: S / 2, y1: 0, x2: S / 2 + ux, y2: -uy }, { id: "top", x1: 0, y1: -uy, x2: 0, y2: -uy - L } ]; g.selectAll(`line.${className}`) .data(rays, (d) => d.id) .join("line") .attr("class", className) // .attr("stroke", "red") .attr('stroke', d3.interpolateRgb(color, "#e9f1ea")(0.5)) .attr('stroke-width', 0.3) .attr("x1", (d) => d.x1 + dx) .attr("y1", (d) => d.y1 + dy) .attr("x2", (d) => d.x2 + dx) .attr("y2", (d) => d.y2 + dy); }); }; }34:[{"id":"a452b13b9a18883b01c0e938d280af0b065fb5629c951b418aa3060382b6f817986cf19f3dba2687f1e40e354264585554f8647915bb4b3a36da6bd644006ff9","href":"https://static.observableusercontent.com/files/a452b13b9a18883b01c0e938d280af0b065fb5629c951b418aa3060382b6f817986cf19f3dba2687f1e40e354264585554f8647915bb4b3a36da6bd644006ff9","name":"MonaspaceKrypton-Regular.otf","type":"font/otf","lastModified":1767716516741.883,"size":74248},{"id":"e80488cd2bcff7cf63316059b9d09bad1d1504c9d36a64c34d489e4c72da0ca434c8a609a6d748a1b6f573b3a5addbab083c17aa24e59ebc838b89b9f46f2be9","href":"https://static.observableusercontent.com/files/e80488cd2bcff7cf63316059b9d09bad1d1504c9d36a64c34d489e4c72da0ca434c8a609a6d748a1b6f573b3a5addbab083c17aa24e59ebc838b89b9f46f2be9","name":"MonaspaceKrypton-Bold.otf","type":"font/otf","lastModified":1767716561943.425,"size":75000},{"id":"ced2ac71d6b40713ab7616ca8fc0a21b3ad77c50ec7f91351ed00ff58cf3cdfbb62d7fa7f20fd7456fe3c4e61864fda90bc743929562023d40ac5bb7f469a9b0","href":"https://static.observableusercontent.com/files/ced2ac71d6b40713ab7616ca8fc0a21b3ad77c50ec7f91351ed00ff58cf3cdfbb62d7fa7f20fd7456fe3c4e61864fda90bc743929562023d40ac5bb7f469a9b0","name":"got.png","type":"image/png","lastModified":1767712345721.35,"size":9260},{"id":"9667d2cc10c5b2e76e2c0fb37723f4f3b06233d5f390f83330ecbd6836291834489ea9242a3bda4935890e59e1e2ec191d163e2cb206abf03bf73e573fa267c6","href":"https://static.observableusercontent.com/files/9667d2cc10c5b2e76e2c0fb37723f4f3b06233d5f390f83330ecbd6836291834489ea9242a3bda4935890e59e1e2ec191d163e2cb206abf03bf73e573fa267c6","name":"Game of Thrones.ttf","type":"font/ttf","lastModified":1767713085292.001,"size":28784}] 2e:{"title":"Year calendar (A1)","cells":[{"id":0,"value":"title = md`# Year calendar (A1)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":994,"value":"md`Ready-to-print calendar for the year.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1026,"value":"viewof year = number({ title: 'Year', value: new Date().getFullYear() })","pinned":false,"hidden":false,"mode":"ojs"},{"id":2471,"value":"viewof numSystem = Inputs.radio([\"arabic\", \"roman\"], {label: \"Numeral system\", value: \"arabic\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1164,"value":"viewof align = Inputs.radio([\"weekday\", \"month date\"], {label: \"Align by\", value: \"weekday\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2340,"value":"viewof specialDays = Inputs.checkbox([\"moon\", \"sun\"], {\n label: \"Special days\",\n value: [\"moon\", \"sun\"]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1537,"value":"viewof color = Inputs.color({ label: \"Base color\", value: '#00660c' })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1540,"value":"viewof borderColor = c(d3.interpolateRgb(color, '#fff')(0.7))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1598,"value":"viewof weekendColor = c(d3.color(color).copy({ opacity: 0.08}).formatHex8())","pinned":false,"hidden":false,"mode":"ojs"},{"id":2005,"value":"viewof printA1 = {\n const btn = html``;\n btn.onclick = async () => {\n await fontsReady;\n\n const svgText = new XMLSerializer().serializeToString(year_calendar);\n const css = `\n @page { size: 841mm 594mm; margin: 0; }\n html, body { width: 841mm; height: 594mm; margin: 0; padding: 0; }\n svg { width: 100%; height: 100%; display: block; }\n ${fontCss}\n `;\n\n const w = window.open(\"\", \"_blank\");\n w.document.open();\n w.document.write(`${svgText}`);\n w.document.close();\n\n await w.document.fonts.load('400 12px \"Monaspace Krypton\"');\n await w.document.fonts.load('700 12px \"Monaspace Krypton\"');\n await w.document.fonts.ready;\n\n w.print();\n };\n return btn;\n }\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1304,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"---\n# Basement\n---","pinned":false,"hidden":false,"mode":"md"},{"id":31,"value":"md `### Code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":728,"value":"padding = ({\n l: 0.06,\n r: 0.01\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":404,"value":"daysScale = d3.scaleBand()\n .domain(d3.range(1, maxPos + 1))\n .range([A.w * padding.l, A.w * (1 - padding.r)])","pinned":false,"hidden":false,"mode":"ojs"},{"id":2146,"value":" dayLabel = (d) => {\n const m = d.getMonth();\n const day = d.getDate();\n \n // Mar 20, Jun 21, Sep 22, Dec 21\n if (specialDays.includes(\"sun\")) {\n if (m === 2 && day === 20) return \"◓\"; // March equinox\n if (m === 5 && day === 21) return \"◎\"; // June solstice\n if (m === 8 && day === 22) return \"◒\"; // September equinox\n if (m === 11 && day === 21) return \"◉\"; // December solstice\n }\n \n if (specialDays.includes(\"moon\")) {\n if (isNewMoonDay(d)) return \"○\";\n if (isFullMoonDay(d)) return \"●\";\n }\n return d3.timeFormat(\"%d\")(d);\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":493,"value":"offset = (d) => d.days[0].getDay()","pinned":false,"hidden":false,"mode":"ojs"},{"id":751,"value":"isToday = d => +d === +d3.timeDay(new Date())","pinned":false,"hidden":false,"mode":"ojs"},{"id":780,"value":"isWeekend = d => [+d3.utcSunday(d), +d3.utcSaturday(d)].includes(+d)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2253,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":2260,"value":"isNewMoonDay = (d) => isLunarEventDay(d, 0.0)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2262,"value":"isFullMoonDay = (d) => isLunarEventDay(d, 0.5)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2345,"value":"specialDaysCaption = {\n const caption = {\n moon: [\"● — full moon\", \"○ — new moon\"],\n sun: [\n \"◎ — summer solstice\",\n \"◉ — winter solstice\",\n \"◓ — spring equinox\",\n \"◒ — autumn equinox\"\n ]\n };\n const nbsp = \" \";\n return specialDays.flatMap((d) => caption[d] ?? []).join(nbsp.repeat(2));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":591,"value":"minPos = 0 //d3.min(data.map(year => d3.min(year, offset)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":588,"value":"maxPos = 37\n// maxPos = d3.max(data.map(year => d3.max(year.map((month, i) => month.days.length + offset(month, i)))))","pinned":false,"hidden":false,"mode":"ojs"},{"id":429,"value":"cellWidth = daysScale.bandwidth()","pinned":false,"hidden":false,"mode":"ojs"},{"id":431,"value":"cellHeight = cellWidth * 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":427,"value":"monthHeight = cellHeight","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"height = margin.top + A.h + margin.bottom","pinned":false,"hidden":false,"mode":"ojs"},{"id":865,"value":"width = margin.left + A.w + margin.right","pinned":false,"hidden":false,"mode":"ojs"},{"id":972,"value":"calendarDates = $gg => $gg.selectAll('.date').data(d => [d])\n .join(enter => enter.append('text').attr('class', 'date'))\n .attr('text-anchor', 'middle').attr('dominant-baseline', 'central')\n .attr('font-family', 'JetBrains Mono')\n .attr('font-size', cellHeight * .47)\n .attr('fill', 'blue')\n .attr('x', cellWidth / 2)\n .attr('y', cellHeight / 2)\n .text(d => d3.timeFormat('%e')(d) + d3.timeFormat('%a')(d)[0])\n\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1691,"value":"px2mm = d3.scaleLinear().domain([0, A.w]).range([0, A1.w_mm])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1825,"value":"mm2px = px2mm.invert","pinned":false,"hidden":false,"mode":"ojs"},{"id":1731,"value":"oneCmInPx = px2mm.invert(10)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1746,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1554,"value":"c = color => {\n const node = html`

${color}

`\n node.value = color\n return node\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2484,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":2475,"value":"toRoman = (num) => {\n const map = [\n [1000, \"M\"],\n [900, \"CM\"],\n [500, \"D\"],\n [400, \"CD\"],\n [100, \"C\"],\n [90, \"XC\"],\n [50, \"L\"],\n [40, \"XL\"],\n [10, \"X\"],\n [9, \"IX\"],\n [5, \"V\"],\n [4, \"IV\"],\n [1, \"I\"]\n ];\n\n let res = \"\";\n for (const [value, symbol] of map) {\n while (num >= value) {\n res += symbol;\n num -= value;\n }\n }\n return res;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"md `### Styles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":862,"value":"k = 1","pinned":false,"hidden":false,"mode":"ojs"},{"id":815,"value":"A4 = ({\n w: 594 * k,\n h: 841 * k\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1306,"value":"A1 = ({ w: A4.h * 2, h: A4.w * 4, w_mm: 841, h_mm: 594 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1355,"value":"A = ({ w: A4.h, h: A4.w })","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"margin = ({top: 0, bottom: 0, left: 0, right: 0})","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"innerHeight = height - margin.top - margin.bottom","pinned":false,"hidden":false,"mode":"ojs"},{"id":130,"value":"innerWidth = width - margin.left - margin.right","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"css = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":2010,"value":"### Fonts","pinned":false,"hidden":false,"mode":"md"},{"id":2050,"value":"fontFamily = '\"Monaspace Krypton\"'","pinned":false,"hidden":false,"mode":"ojs"},{"id":2026,"value":"fontCss = {\n // Upload regular and bold fonts as files and link them here:\n const regular = await FileAttachment(\"MonaspaceKrypton-Regular.otf\").url();\n const bold = await FileAttachment(\"MonaspaceKrypton-Bold.otf\").url();\n return `\n @font-face {\n font-family: ${fontFamily};\n src: url(${regular}) format(\"opentype\");\n font-weight: 400;\n font-style: normal;\n }\n @font-face {\n font-family: ${fontFamily};\n src: url(${bold}) format(\"opentype\");\n font-weight: 700;\n font-style: normal;\n }\n `;\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":2032,"value":"installFonts = {\n const id = \"embedded-fonts\";\n let style = document.getElementById(id);\n if (!style) {\n style = document.createElement(\"style\");\n style.id = id;\n document.head.appendChild(style);\n }\n style.textContent = fontCss;\n return style;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2038,"value":" fontsReady = (async () => {\n await document.fonts.load(`400 12px ${fontFamily}`);\n await document.fonts.load(`700 12px ${fontFamily}`);\n await document.fonts.ready;\n return true;\n })()","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"md `### Libs`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1009,"value":"import {number} from \"@oluckyman/toolbelt\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"d3 = require('d3', 'd3-array')","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"md `### Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"data_ = d3.range(4).map(() => d3.utcMonth.range(new Date(year, 0, 1), new Date(year + 1, 0, 1))\n .map(m => ({\n days: d3.utcDay.range(m, d3.utcMonth.offset(m, 1))\n }))\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1317,"value":"data = data_[0]","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}