31:[] 2f:{"title":"find a big word, first/last","cells":[{"id":0,"value":"md`# find a big word, first/last`","pinned":false,"hidden":false,"mode":"ojs"},{"id":352,"value":"md `\nThere are\n**${current.words.length}** words that start with\n**${current.first.toUpperCase()}** and end with\n**${current.last.toUpperCase()}**.\nCan you think of a long one?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":215,"value":"{\n const d = current.words\n const title = current.first.toUpperCase() + ' ' + current.last.toLocaleUpperCase()\n const data = aq\n .table({word: d, color: d.map(()=>validStructure)})\n .derive({length: d => op.length(d.word)})\n .groupby('length', 'color')\n .count()\n .orderby('length')\n .derive({currentLength: guessValue.length})\n .derive({color: d => d.length === d.currentLength ? d.color : 'none'})\n .objects()\n \n const chart = vl.markBar()\n .data(data)\n .encode(\n vl.x().fieldQ('length'),\n vl.y().fieldQ('count'),\n vl.color().fieldN('color')\n .scale({domain: ['structurally valid', 'incomplete', 'invalid', 'none']})\n )\n .title({text: title, fontSize: 40})\n .height(150)\n\n return chart.render()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":370,"value":"guess = {\n const input = html``\n const button = html``\n const submit = function(event) {\n // keycode === 13 for \"Enter\" key\n if (event.keyCode === 13) {\n event.preventDefault();\n \n handleEnter(input.value)\n input.value = \"\"\n }\n}\n const buttonSubmit = function(event) { \n handleEnter(input.value)\n input.value = \"\"\n} \n \n input.addEventListener(\"keyup\", submit)\n button.addEventListener(\"click\", buttonSubmit)\n\n return html`\n ${input}\n ${button}\n `\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":429,"value":"html `\n\n \n \n \n\n${history.map((x,i) => drawRecord(x))}\n

	guess	letters

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":381,"value":"guessValue = {\n while(true){\n try {yield document.getElementById('guess').value}\n catch {yield Promises.delay(100) }\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":431,"value":"drawRecord = (x) => {\n const longest = x.words.sort((x,y) => y.length - x.length)[0]\n \n return html.fragment `\n \n ${x.guess}\n ${x.guess.length}\n ${longest}, ${longest.length}\n\n`\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":435,"value":"viewof correctColor = color(\"#16a716\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":437,"value":"viewof incorrectColor = color(\"#BB0000\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":395,"value":"validStructure = {\n const first = guessValue ? guessValue[0] == current.first : false\n const last = guessValue ? guessValue[guessValue.length - 1] == current.last : false\n \n if(!first) return `invalid`\n if (last) return 'structurally valid'\n else return 'incomplete'\n \n \n \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":315,"value":"focus = {\n //feels like there's a better way to do this\n guess;\n document.getElementById('guess').focus()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":234,"value":"handleEnter = (guess) => {\n const isGoodGuess = validateGuess(guess, current)\n \n const ts = new Date()\n log({guess, ts, isGoodGuess, ...current})\n \n mutable current = pairs[d3.randomInt(0, pairs.length)()]\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":297,"value":"mutable current = pairs[d3.randomInt(0, pairs.length)()]","pinned":true,"hidden":false,"mode":"ojs"},{"id":237,"value":"validateGuess = (guess, cur) => {\n const out =\n // starts with right letter\n guess[0] === cur.first &&\n // ends with right letter\n guess[guess.length-1] === cur.last &&\n // is in the dictionary\n words.includes(guess)\n return out;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":266,"value":"log = (data) => {\n mutable history = [data, ...history]\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":268,"value":"mutable history = []","pinned":true,"hidden":false,"mode":"ojs"},{"id":259,"value":"validateGuess('vacation', pairs[500])","pinned":true,"hidden":false,"mode":"ojs"},{"id":317,"value":"validateGuess('action', pairs[500])","pinned":true,"hidden":false,"mode":"ojs"},{"id":321,"value":"validateGuess('vacationnnnnnn', pairs[500])","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"import {words} from '@a-lexwein/find-a-big-word'","pinned":true,"hidden":false,"mode":"ojs"},{"id":274,"value":"d3 = require('d3@6')","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"pairs = {\n const pairs = {}\n for (let x of words) {\n let first = x[0]\n let last = x[x.length - 1]\n let key = first + last\n if (pairs[key] == undefined) {\n pairs[key] = {val: 0, words: [], first, last}\n }\n pairs[key].val++\n pairs[key].words.push(x)\n \n }\n return Object.keys(pairs).map(x => ({pair: x, ...pairs[x]}))\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":73,"value":"aq.from(pairs).columnNames()","pinned":true,"hidden":false,"mode":"ojs"},{"id":57,"value":"import {aq, op} from '@uwdata/arquero'","pinned":true,"hidden":false,"mode":"ojs"},{"id":88,"value":"import {vl} from '@vega/vega-lite-api'","pinned":true,"hidden":false,"mode":"ojs"},{"id":439,"value":"import {color} from '@jashkenas/inputs'","pinned":true,"hidden":false,"mode":"ojs"},{"id":442,"value":"import {html, svg} from \"@observablehq/htl\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}