30:T933,html``31:[] 2e:{"title":" Tick Tock Clock","cells":[{"id":1299,"value":"md`

Tick Tock Clock

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":442,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":1491,"value":"html`${d3\n .selectAll('.active')\n\n .node()}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":566,"value":"currentTime = {\n while (true) {\n await Promises.delay(1000);\n TimeCoordinates();\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"id":410,"value":"import { radio } from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs"},{"id":734,"value":"clockDialSpace = 100","pinned":false,"hidden":false,"mode":"ojs"},{"id":1205,"value":"minWidth = width","pinned":false,"hidden":false,"mode":"ojs"},{"id":515,"value":"msAngle = 360 / 60","pinned":false,"hidden":false,"mode":"ojs"},{"id":437,"value":"HourAngle = ClockType === '24H' ? 360 / 24 : 360 / 12","pinned":false,"hidden":false,"mode":"ojs"},{"id":625,"value":"Hours = [12, ...d3.range(1, 12)]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1500,"value":"parseNow()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1341,"value":"parseNow = d3.timeParse('%Q')","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":1393,"value":"BigBoldHeading","pinned":false,"hidden":false,"mode":"ojs"},{"id":1391,"value":"import { BigBoldHeading } from '@stroked/texting-titling'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1420,"value":"import { CarbonFiber, wallpaper } from '@stroked/backgrounds'","pinned":false,"hidden":false,"mode":"ojs"},{"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"}],"files":"$W31","stdlib":"1","titling":"auto"}