3f:null 40:["$","title",null,{"children":"Utilities for encoding QR code | Zavier Henry | Observable"}] 46:T5e9,function showTruncatedData(data, htmlifier, limit = 40) { const container = d3.create('div') if (data.length > limit) { let cachedResult; const truncatedResult = htmlifier(data.slice(0, limit)) const content = container.append('div') .classed('content', true) content.append(() => truncatedResult) .append('span').text('...').style('padding', '0 4px') const collapsible = container.insert('div', ':first-child') .classed('collapsible', true) .classed('expanded-content', false) .text('Click to Expand') .style('font-weight', 'bold') .on('mouseenter', () => { container.select('.collapsible').style('background-color', '#d8d8d8') }) .on('mouseleave', () => { container.select('.collapsible').style('background-color', 'white') }) .on('click', () => { const collapsible = container.select('.collapsible') const content = container.select('.content') const isExpanded = collapsible.classed('expanded-content') collapsible.classed('expanded-content', !isExpanded) collapsible.text('Click to ' + (isExpanded ? 'Expand' : 'Collapse')) if (!isExpanded) { cachedResult = cachedResult || htmlifier(data).innerHTML content.html(cachedResult) } else { content.html(truncatedResult.innerHTML) } }) } else { container.append(() => htmlifier(data)) } return container.node() }47:T9f1,function generatorControls(steps) { const initPlay = false; const controls = html`` controls.value = { play: initPlay, generator: instructionRange(0, steps, !initPlay), range: controls.elements["step"] } controls.addEventListener('click', e => { let detail; switch (e.target.name) { case "play": detail = { play: !controls.value.play } break; case "begin": detail = { step: 0, play: false } break; case "end": detail = { step: steps-1, play: false } break; case "incr": const incrStep = controls.elements["step"].valueAsNumber const incr = Math.min(incrStep+1, steps-1) detail = { step: incr, play: false } break; case "decr": const decrStep = controls.elements["step"].valueAsNumber const decr = Math.max(decrStep-1, 0) detail = { step: decr, play: false } break; default: return; } controls.dispatchEvent(new CustomEvent("input", { detail })) }) controls.addEventListener('input', e => { if (e.detail != null && e.detail.step != null) { controls.value = { ...controls.value, play: e.detail.play, generator: instructionRange(e.detail.step, steps, !e.detail.play) } } else if (e.detail != null) { const step = Math.min(controls.elements["step"].valueAsNumber, steps-1) controls.value = { ...controls.value, play: e.detail.play, generator: instructionRange(step, steps, !e.detail.play) } } else if (e.target.name == "step") { const step = parseInt(e.target.value) controls.value = { ...controls.value, play: false, generator: instructionRange(step, steps, true) } } controls.elements["play"].value = controls.value.play ? "Pause" : "Play" }) return controls }48:T6c2,function makeMultiColumnTable(data, entriesPerColumn, columnTitles, dataToColumns, options = {}) { const columns = Math.ceil(data.length / entriesPerColumn) const width = options.width || '100%' const title = options.title || "" const columnMargin = options.margin || '7px' const columnPadding = options.padding || '0px 27px' const cellspacing = options.cellspacing || 15 const cellpadding = options.cellpadding || 10 const highlightFunction = options.highlightFunction || null const highlightColor = options.highlightColor || 'white' const column = `

` const container = html`

${title}

${column.repeat(columns)}

` const tables = d3.select(container) .selectAll('div.version-table table') for (const [i, table] of tables.nodes().entries()) { const rows = d3.select(table).selectAll('tr') .data(data.slice(entriesPerColumn*i, entriesPerColumn*(i+1))) .join('tr') if (highlightFunction) { rows.filter((d, j) => highlightFunction(d, entriesPerColumn*i+j)) .style('background-color', highlightColor) } for (let k = 0; k < columnTitles.length; k++) { rows.append('td') .text((d, j) => dataToColumns(d, entriesPerColumn*i+j)[k]) } } const titles = columnTitles.map(x => `${x}`) tables.insert(() => html`${titles.join('')}`, ':first-child') return container }49:[] 44:{"id":"1cbffd19a7aa736e","slug":"qr-encode-utilities","title":"Utilities for encoding QR code","thumbnail":"f519960c7cb4f57ee02a61201c5e3ac6a01e9857b31be98ce3aa779e0d321411","access_level":"public","create_time":"$D2021-03-04T22:52:51.103Z","update_time":"$D2021-03-08T01:48:01.894Z","view_time":null,"first_public_time":"$D2021-03-05T06:19:45.864Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"6d821c25a3f341ef","login":"zavierhenry","name":"Zavier Henry","avatar_url":"https://avatars-next.observableusercontent.com/9e621bf2ef2d3a2a52938da54c919c40b2353f2c7b9df5111ed2519514a27790","tier":"starter_2024","bio":"Just some guy who likes to fix things at times","following":false},"version":94,"publish_version":94,"role":null,"authored":false,"authors":[{"type":"individual","id":"40132f2a0a48222e","login":"zavierhenry","name":"Zavier Henry","avatar_url":"https://avatars-next.observableusercontent.com/9e621bf2ef2d3a2a52938da54c919c40b2353f2c7b9df5111ed2519514a27790","tier":null,"bio":"Just some guy who likes to fix things at times","following":false}],"members":[{"type":"individual","id":"40132f2a0a48222e","login":"zavierhenry","name":"Zavier Henry","avatar_url":"https://avatars-next.observableusercontent.com/9e621bf2ef2d3a2a52938da54c919c40b2353f2c7b9df5111ed2519514a27790","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Utilities for encoding QR code","cells":[{"id":0,"value":"md`# Utilities for encoding QR code`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"function binaryEncode(number, length) {\n return number.toString(2).padStart(length, '0')\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"function range(start, stop) {\n return makeArray(stop-start, (_, i) => start+i)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"function makeArray(length, mapper) {\n return Array.from({length}, mapper)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"function sum(arr) {\n return arr.reduce((x, y) => x + y, 0)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"function stylizeMarkdownValue(value, color) {\n return `${value}`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"function* instructionRange(start, stop, paused, delay = 1500) {\n if (paused) return yield Promise.resolve(start)\n \n for (let i = start; i < stop; i++) {\n yield Promises.tick(delay, i)\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"function groupString(str, groupSize) {\n return makeArray(Math.ceil(str.length / groupSize), (_, i) => str.slice(groupSize*i, groupSize*(i+1)))\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 45:"$44:body"