drawRecord = (x) => {
const longest = x.words.sort((x,y) => y.length - x.length)[0]
return html.fragment `<tr>
<td></td>
<td style="color:${x.isGoodGuess ? correctColor : incorrectColor}">${x.guess}</td>
<td style="color:${x.isGoodGuess ? correctColor : incorrectColor}">${x.guess.length}</td>
<td>${longest}, ${longest.length}</td>
</tr>
`
}
viewof correctColor = color("#16a716")
viewof incorrectColor = color("#BB0000")
validStructure = {
const first = guessValue ? guessValue[0] == current.first : false
const last = guessValue ? guessValue[guessValue.length - 1] == current.last : false
if(!first) return `invalid`
if (last) return 'structurally valid'
else return 'incomplete'
}
mutable current = pairs[d3.randomInt(0, pairs.length)()]
validateGuess = (guess, cur) => {
const out =
// starts with right letter
guess[0] === cur.first &&
// ends with right letter
guess[guess.length-1] === cur.last &&
// is in the dictionary
words.includes(guess)
return out;
}
log = (data) => {
mutable history = [data, ...history]
}
mutable history = []
validateGuess('vacation', pairs[500])
validateGuess('action', pairs[500])
validateGuess('vacationnnnnnn', pairs[500])
import {words} from '@a-lexwein/find-a-big-word'
d3 = require('d3@6')
pairs = {
const pairs = {}
for (let x of words) {
let first = x[0]
let last = x[x.length - 1]
let key = first + last
if (pairs[key] == undefined) {
pairs[key] = {val: 0, words: [], first, last}
}
pairs[key].val++
pairs[key].words.push(x)
}
return Object.keys(pairs).map(x => ({pair: x, ...pairs[x]}))
}
aq.from(pairs).columnNames()
import {aq, op} from '@uwdata/arquero'
import {vl} from '@vega/vega-lite-api'
import {color} from '@jashkenas/inputs'
import {html, svg} from "@observablehq/htl"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
