31:T1055,{ let RED_GRADIENT = `background: radial-gradient(circle at 50% 50%, ${orange}, ${red} ${RowHeight / 2}px);`, YELLOW_GRADIENT = `background-image:radial-gradient(circle at 50% 50%,${yellow},${orange} 40px);`; let styles = html`

move the slider fully to the left for the clock to resume real-time ticking

Styles `; yield styles; }32:T51a,connector_texture = () => `background:repeating-linear-gradient(black ${-MarginOverlap}px, gray ${SpacerHeight * 0.5 - 2 * MarginOverlap}px, white ${SpacerHeight * 0.5 - MarginOverlap / 2}px, gray ${SpacerHeight * 0.5 + 2 * MarginOverlap}px, black ${SpacerHeight - MarginOverlap}px), radial-gradient(circle at 50% 50%, white,transparent ${SpacerHeight / 2 - 1}px, silver 100px); ` /* radial-gradient(circle at 20% 50%,black, black ${SpacerHeight / 2 - 1}px, white ${SpacerHeight / 2 - 1}px) radial-gradient(circle at 40% 50%,black, black ${SpacerHeight / 2 - 1}px, white ${SpacerHeight / 2 - 1}px), radial-gradient(circle at 60% 50%,black, black ${SpacerHeight / 2 - 1}px, white ${SpacerHeight / 2 - 1}px) radial-gradient(circle at 80% 50%,black, black ${SpacerHeight / 2 - 1}px, white ${SpacerHeight / 2 - 1}px) */33:[{"id":"44980fb3f3c19cffa503bafa494916eaf9752ea2da1ed76f97e6780b5fcdbbfd49a6294ebd5f6950a268d1eb39e6e5da398d10ae58547e644074431be7b7f3f6","href":"https://static.observableusercontent.com/files/44980fb3f3c19cffa503bafa494916eaf9752ea2da1ed76f97e6780b5fcdbbfd49a6294ebd5f6950a268d1eb39e6e5da398d10ae58547e644074431be7b7f3f6","name":"image@1.png","type":"image/png","lastModified":1584898708097.136,"size":10561474}] 2f:{"title":"Mengenlehreuhr - Set Theory Clock","cells":[{"id":0,"value":"md`# [Mengenlehreuhr - Set Theory Clock](https://en.wikipedia.org/wiki/Mengenlehreuhr)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"html`

600 ? 'row' : 'column-reverse'\n}\">\n

\n${EXPLANATION}\n

\n${Photo}\n

\nmore info:\nhttps://en.wikipedia.org/wiki/Mengenlehreuhr\n `","pinned":false,"hidden":false,"mode":"ojs"},{"id":2745,"value":"Time","pinned":false,"hidden":false,"mode":"ojs"},{"id":322,"value":"CLOCK = {\n let clock = html`

\n \n

\n${Seconds}\n

\n\n ${HourTop}\n ${double_connector()}\n ${HourBottom}\n ${double_connector()}\n ${MinutesTop}\n ${double_connector()}\n ${MinutesBottom}\n

`;\n\n yield clock;\n\n HourTop.update(~~(Time.hours / 5));\n HourBottom.update(Time.hours % 5);\n\n MinutesTop.update(~~(Time.minutes / 5));\n MinutesBottom.update(Time.minutes % 5);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":409,"value":"viewof TimeMachine = {\n let startOfToday = d3.timeDay.floor(new Date());\n let endOfToday = new Date(d3.timeDay.floor(d3.timeDay.offset(new Date(), 1)));\n yield Scrubber(\n d3\n .timeMinutes(startOfToday, endOfToday)\n .map((d, i) => (i % 2 === 0 ? d : timeParse(+d + 1000))),\n {\n autoplay: true,\n step: 1, \n loop: true,\n delay: 60,\n format: d3.timeFormat(\"%I:%M:%S%p\")\n }\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":124,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1798,"value":"viewof ClockWidth = slider({\n description: 'width of the clock',\n max: width,\n min: 200,\n value: 300,\n step: 1,\n title: 'CLOCK WIDTH'\n}) //DOM.range(0, 150)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1446,"value":"viewof RowHeight = slider({\n description: 'height of each row of lights',\n max: 60,\n min: 60,\n step: 1,\n value: 60,\n title: 'ROW HEIGHT'\n}) //DOM.range(0, 150)","pinned":false,"hidden":false,"mode":"ojs"},{"id":652,"value":"viewof SpacerHeight = slider({\n description: 'gap between each row of lights',\n max: 20,\n min: 20,\n value: 20,\n title: 'SPACER'\n}) //DOM.range(0, 150)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2464,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1743,"value":"md`## COMPONENTS`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2580,"value":"Photo = html`\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2509,"value":"EXPLANATION = md`\nExplanation: There are 24 lights in total across 5 rows.\n - SECONDS Row 1\n + Round Yellow Light on top blinks to denote even- (when lit) or odd-numbered (when unlit) seconds.\n + HOURS - ROW 2 & 3 \n + The top row of four red fields denote five full hours each\n + The Second row also of 4 red fields one full hour each, displaying the hour value in 24-hour format\n - MINUTES - ROW 4 & 5 \n + third row consists of eleven yellow-and-red fields, which denote five full minutes each (the red ones also denoting 15, 30 and 45 minutes past)\n + the bottom row has another four yellow fields, which mark one full minute each\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"Seconds = {\n let view = html`

`;\n yield view;\n d3.select(view).style(\n \"background-image\",\n seconds % 2 === 1\n ? `radial-gradient(circle at 50% 50%,$#CDA064,#CDA064 ${RowHeight / 2}px)`\n : `radial-gradient(circle at 50% 50%,${yellow},${orange} ${\n RowHeight / 2\n }px)`\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"HourTop = createTier(4)","pinned":true,"hidden":false,"mode":"ojs"},{"id":103,"value":"HourBottom = createTier(4)","pinned":true,"hidden":false,"mode":"ojs"},{"id":105,"value":"MinutesTop = createTier(11)","pinned":true,"hidden":false,"mode":"ojs"},{"id":109,"value":"MinutesBottom = createTier(4)","pinned":true,"hidden":false,"mode":"ojs"},{"id":864,"value":"double_connector = () => {\n return html`

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1968,"value":"single_connector = () => html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1231,"value":"md`## UTILITY`","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"createTier = children => {\n let view = html`\n

\n ${d3.range(children).map(x => DOM.element('div'))}\n

`;\n\n view.update = num => {\n d3.select(view)\n .selectAll('div')\n .attr('class', (d, i) => (i < num ? `active` : ''));\n };\n // view.update(0);\n return view;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2883,"value":"timeParse(now)","pinned":true,"hidden":false,"mode":"ojs"},{"id":66,"value":"timeParse=d3.timeParse('%Q')","pinned":true,"hidden":false,"mode":"ojs"},{"id":401,"value":"parseDT=d3.timeParse('%Y-%m-%d');","pinned":true,"hidden":false,"mode":"ojs"},{"id":1227,"value":"md`## TICKING`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2207,"value":"viewof Reset = html`