31:T49f,{ let rowsHtml = []; for (let day = 25; day >= 1; day--) { let datum = statsAtTimestamp.find(d => d.day == day) || {bothStars:0, oneStar:0} let rowHtml = "" rowHtml += ` 0 ? 'day-active' : ''}>${day.toString().padStart(3, " ")}` rowHtml += ` 0 ? 'gold' : ''}>${datum.bothStars.toString().padStart(8, " ")}` rowHtml += ` 0 ? 'silver' : ''}>${datum.oneStar.toString().padStart(8, " ")}` rowHtml += ` 0 ? 'gold' : ''}> ${"".padStart(Math.ceil(datum.bothStars/usersPerStar), '*')}` rowHtml += ` 0 ? 'silver' : ''}>${"".padStart(Math.ceil(datum.oneStar/usersPerStar), '*')}\n` rowsHtml.push(rowHtml) } return html`

I'm a big fan of Eric Wastl's [Advent of Code]. Here is an animation of the [2021 Stats page] over the month of December. I've always thought it looked like a Christmas Tree.

${rowsHtml.join("")}

` }32:[] 2f:{"title":"Advent of Code's Tree of Stars","cells":[{"id":0,"value":"# Advent of Code's Tree of Stars\n\n${width < 700 ? 'Not really mobile friendly, sorry! (Maybe try going wide?)' : ''}","pinned":false,"hidden":false,"mode":"md"},{"id":93,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"viewof currentTimestamp = Scrubber([...(new Set(data.boughs.map(b => b.timestamp)))].sort(), {\n delay: 60, \n loop:false, \n alternate:true, \n format: ts => new Date(ts * 1000).toLocaleString(undefined, {month:\"short\", day:\"numeric\"})\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":210,"value":"md`This is a live-ish data view of the current and historical state of the 2021 Advent of Code stats page. I've always thought the stats page looked like a Christmas Tree. The data is collected by hitting the stats page every six hours. (Maybe next year I'll make it every hour)\n\nHit 'Play' to grow and shrink the tree. I'll be interested to see if people catch up on puzzles during the weekends, or if the run rate feels about the same all the way through\n\nThanks for making such a great event, Eric!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"md`### Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"data = d3.json(`https://storage.googleapis.com/storage.tcgarvin.com/data/advent-of-code-2021/boughs.json?x=${Date.now()}`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"md`### Constants`","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"widthInStars = 40","pinned":false,"hidden":false,"mode":"ojs"},{"id":79,"value":"md`### Piping`","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"usersPerStar = Math.ceil(Math.max(...data.boughs.map(b => b.bothStars + b.oneStar)) / widthInStars)","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"statsAtTimestamp = data.boughs.filter(b => b.timestamp == currentTimestamp)","pinned":false,"hidden":false,"mode":"ojs"},{"id":171,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"md`### Libraries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"import {style} with {myFontName as fontName} from \"@triptych/google-font-embedder\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"myFontName = \"Source Code Pro\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"style","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}