31:T8de,calendar = { const context = DOM.context2d(canvasWidth, canvasHeight); context.font = "300 10px 'Roboto Condensed'"; context.textAlign = "center"; context.textBaseline = "middle"; context.fillStyle = "white"; context.fillRect(0, 0, canvasWidth, canvasHeight); // Outer rectangle context.lineWidth = 2; context.strokeStyle = "black"; context.strokeRect(margin.left, margin.top, calendarWidth, calendarHeight); // Vertical month dividers and labels context.fillStyle = "black"; context.lineWidth = 2; months.forEach((month) => { const x = xPosition(month.start) - cellWidth; const y = margin.top; context.beginPath(); context.moveTo(x, y); context.lineTo(x, y + calendarHeight); context.stroke(); const x2 = xPosition(month.end) + cellWidth; context.fillText(month.name, (x + x2) / 2, margin.top - cellHeight / 2); }); // Extra divider before the year label const yearLabelPosition = xPosition(middleOfYear) + cellWidth; context.lineWidth = 2; context.beginPath(); context.moveTo(yearLabelPosition, margin.top); context.lineTo(yearLabelPosition, margin.top + calendarHeight); context.stroke(); // One row for each year years.forEach((year) => { const yearLabel = year[0].getFullYear(); const y = yPosition(yearLabel); context.lineWidth = yearLabel % 10 === 1 ? 2 : 1; context.beginPath(); context.moveTo(margin.left, y - cellHeight / 2); context.lineTo(margin.left + calendarWidth, y - cellHeight / 2); context.stroke(); context.fillText( yearLabel, yearLabelPosition + yearCellWidth / 2 - 0.5, y + 1.5 ); year.forEach((day) => { const x = xPosition(day); if (useDots && day.getDay() === 0) { // On Sundays, draw dot instead of number context.beginPath(); context.arc(x, y, 2, 0, 2 * Math.PI, false); context.fillStyle = "black"; context.fill(); } else { // Day of month (with slight offsets to keep it in the middle) context.fillStyle = "black"; context.fillText(day.getDate(), x - 0.5, y + 1.5); } }); }); return html`

${context.canvas}

`; }32:[{"id":"6b635cc75f8846c4f6b5b7fb20dc3d1b0f23e66d634526a0d9eaf1e5657d934b8880bfbe79e44586ac7c5477b67b0743b5af0da7cc98cf6308cc7021867fa2d9","href":"https://static.observableusercontent.com/files/6b635cc75f8846c4f6b5b7fb20dc3d1b0f23e66d634526a0d9eaf1e5657d934b8880bfbe79e44586ac7c5477b67b0743b5af0da7cc98cf6308cc7021867fa2d9","name":"kawara_detail.jpg","type":"image/jpeg","lastModified":1636943034094.108,"size":2580625}] 2f:{"title":"100 Year Calendar","cells":[{"id":0,"value":"md`# 100 Year Calendar\n\nAn exercise in using code to render 100 years in a single table, with one row per year. This is inspired by On Kawara’s art piece *[24,698 Days (100 Years Calendar)](https://www.diaart.org/collection/collection/kawara-on-24698-days-100-years-calendar-2000-l-2003-082)*.\n\nThe photograph below shows a detail from the original artwork. (The artist added a yellow highlight for each day of his life.)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":240,"value":"html`\n

A close-up of the original artwork (photo taken by me at Dia Beacon in New York state).

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":237,"value":"md`A design detail that I love from the original is that Sundays are shown as dots, which makes the years different from each other and creates diagonal patterns. The calendar below follows this convention too; you can toggle it off if you don’t like it or want to see its impact.\n\nTo download a full-size version of the calendar, right-click on it and use your browser’s “Save image as...” feature.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":629,"value":"viewof startYear = Inputs.select(d3.range(1801, 2101, 10), {\n value: 2001,\n label: \"Start year for calendar\",\n format: (d) => d.toString()\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":737,"value":"viewof useDots = Inputs.toggle({ label: \"Use dots for Sundays\", value: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":286,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":222,"value":"minYear = 1801","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"numYears = 100","pinned":true,"hidden":false,"mode":"ojs"},{"id":215,"value":"endYear = startYear + numYears","pinned":true,"hidden":false,"mode":"ojs"},{"id":268,"value":"years = d3.range(startYear, endYear).map((year) => {\n const startDay = new Date(year, 0, 1);\n const endDay = new Date(year + 1, 0, 1);\n return d3.timeDay.range(startDay, endDay);\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":114,"value":"today = new Date()","pinned":true,"hidden":false,"mode":"ojs"},{"id":332,"value":"daysInLeapYear = 366","pinned":true,"hidden":false,"mode":"ojs"},{"id":337,"value":"cellWidth = 14","pinned":true,"hidden":false,"mode":"ojs"},{"id":361,"value":"cellHeight = 28","pinned":true,"hidden":false,"mode":"ojs"},{"id":334,"value":"yearCellWidth = 42","pinned":true,"hidden":false,"mode":"ojs"},{"id":490,"value":"calendarWidth = daysInLeapYear * cellWidth +\n months.length * cellWidth +\n yearCellWidth","pinned":true,"hidden":false,"mode":"ojs"},{"id":255,"value":"calendarHeight = numYears * cellHeight","pinned":true,"hidden":false,"mode":"ojs"},{"id":484,"value":"canvasWidth = margin.left + margin.right + calendarWidth","pinned":true,"hidden":false,"mode":"ojs"},{"id":486,"value":"canvasHeight = margin.top + margin.bottom + calendarHeight","pinned":true,"hidden":false,"mode":"ojs"},{"id":277,"value":"leapYear = 2000 // used to get consistent day-of-month positions","pinned":true,"hidden":false,"mode":"ojs"},{"id":420,"value":"middleOfYear = new Date(leapYear, 5, 30)","pinned":true,"hidden":false,"mode":"ojs"},{"id":384,"value":"months = d3.timeMonth\n .range(new Date(leapYear, 0, 1), new Date(leapYear + 1, 0, 1))\n .map((d) => ({\n start: d,\n end: d3.timeDay.offset(d3.timeMonth.offset(d, 1), -1),\n name: d3.timeFormat(\"%B\")(d)\n }))","pinned":true,"hidden":false,"mode":"ojs"},{"id":352,"value":"margin = ({ top: 50, right: 30, bottom: 30, left: 30 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":399,"value":"// Horizontal position of this date if it was in a leap year, with extra padding at start and end of each month\nxPosition = function (date) {\n const day = new Date(date.getTime());\n day.setFullYear(leapYear);\n const dayOfYear = d3.timeDay.count(d3.timeYear(day), day);\n const position =\n margin.left + dayOfYear * cellWidth + (day.getMonth() + 1) * cellWidth;\n return day <= middleOfYear ? position : position + yearCellWidth;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":259,"value":"yPosition = function (year) {\n return margin.top + (year - startYear) * cellHeight + cellHeight / 2;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":176,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}