3e:null 3f:["$","title",null,{"children":"Tick Tock Clock | Etho Brunst | Observable"}] 45:T933,html``46:[] 43:{"id":"956da287e11a9cb7","slug":null,"title":" Tick Tock Clock","thumbnail":"6c50a96b297647176c39b02da487f004ecf709661d17e786b27e61bcf3016f8a","access_level":"public","create_time":"$D2023-01-10T07:21:03.631Z","update_time":"$D2023-01-10T07:21:03.631Z","view_time":null,"first_public_time":"$D2023-01-10T07:21:03.631Z","has_unpublished_edits":null,"fork":{"id":"e6413ac961588f95","slug":"tick-tock-clock","title":" Tick Tock Clock","owner":{"id":"c4502285a4e37a76","login":"stroked","name":"Ajay"}},"stars":0,"starred":false,"owner":{"type":"team","id":"89ce4c1513bffd07","login":"milkmyflour","name":"Etho Brunst","avatar_url":"https://avatars-next.observableusercontent.com/57424b224f2c7d104d0fe93c6aaf3c34c95fccf3231c6763ad1c03aa50dd898e","tier":"starter_2024","bio":"","following":false},"version":1684,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"59c59d65e70e737a","login":"milkmyflour","name":"Etho Brunst","avatar_url":"https://avatars-next.observableusercontent.com/57424b224f2c7d104d0fe93c6aaf3c34c95fccf3231c6763ad1c03aa50dd898e","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"59c59d65e70e737a","login":"milkmyflour","name":"Etho Brunst","avatar_url":"https://avatars-next.observableusercontent.com/57424b224f2c7d104d0fe93c6aaf3c34c95fccf3231c6763ad1c03aa50dd898e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":" Tick Tock Clock","cells":[{"id":1299,"value":"md`

Tick Tock Clock

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":442,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"ClockFace = html`\n
\n
${Dater(Date.now())}
\n\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1491,"value":"html`${d3\n .selectAll('.active')\n\n .node()}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":566,"value":"currentTime = {\n while (true) {\n await Promises.delay(1000);\n TimeCoordinates();\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"Render = {\n ClockFace;\n [['s', 60], ['m', 60], ['h', 24]].map(each => {\n d3.select(`#${each[0]}`).html(\n d3\n .range(0, each[1])\n .map(x => {\n let D = x < 10 ? '0' + x : x;\n return `
${D}
`;\n })\n .join('')\n );\n });\n\n [\n ['s', minWidth / 2 - clockDialSpace * 0.3],\n ['m', minWidth / 2 - clockDialSpace * 0.6],\n ['h', minWidth / 2 - clockDialSpace * 0.9]\n ].map(each => {\n d3.selectAll(`#${each[0]} li`).style(\n 'transform',\n (d, index) =>\n `\nrotateZ(${each[0] === 'h' ? HourAngle * index : msAngle * index}deg) \ntranslateX(${parseInt(each[1])}px)`\n );\n });\n yield 'Rendered!';\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"TimeCoordinates = () =>\n [\n ['h', 24, d3.timeFormat('%H')(new Date()), 3600000],\n ['m', 60, d3.timeFormat('%M')(new Date()), 60000],\n ['s', 60, d3.timeFormat('%S')(new Date()), 1000]\n ].map(each => {\n let num = each[2] % each[1];\n let deg = (360 / each[1]) * num;\n d3.selectAll(`#${each[0]} li`).classed('active', false);\n d3.selectAll(`#${each[0]} li`)\n .filter((d, i) => i === +each[2])\n .attr('class', 'active');\n d3.selectAll(`#${each[0]}`)\n .transition()\n .ease(d3.easeCubicIn)\n .style('transform', `rotateZ(-${deg}deg)`);\n return [num, deg];\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":396,"value":"Dater = date => {\n var suffixes = [\"th\", \"st\", \"nd\", \"rd\"];\n\n var dateOfMonth = new Date(date).getDate();\n let suffixedDT = numberRank(dateOfMonth);\n let format = d3.timeFormat(`%A,
${suffixedDT} %B
%Y`);\n return format(date);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":399,"value":"function numberRank(number) {\n return (\n number +\n (number > 0\n ? ['th', 'st', 'nd', 'rd'][\n (number > 3 && number < 21) || number % 10 > 3 ? 0 : number % 10\n ]\n : '')\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":410,"value":"import { radio } from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":734,"value":"clockDialSpace = 100","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1205,"value":"minWidth = width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":515,"value":"msAngle = 360 / 60","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":437,"value":"HourAngle = ClockType === '24H' ? 360 / 24 : 360 / 12","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":625,"value":"Hours = [12, ...d3.range(1, 12)]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1500,"value":"parseNow()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1341,"value":"parseNow = d3.timeParse('%Q')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":412,"value":"viewof ClockType = radio({\n title: 'Military or Regular Time?',\n options: ['24H', '12H'],\n value: '24H',\n description: 'not implemented yet'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1393,"value":"BigBoldHeading","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1391,"value":"import { BigBoldHeading } from '@stroked/texting-titling'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1420,"value":"import { CarbonFiber, wallpaper } from '@stroked/backgrounds'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1489,"value":"//in hindsight this could all be done made much easier...but that's for another day.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W46","stdlib":"1"}} 44:"$43:body"