Published
Edited
Aug 31, 2019
Importers
5 stars
Insert cell
Insert cell
Insert cell
Insert cell
demo = html`
<svg width="${boardDemoSize * unit}" height="${boardDemoSize * unit}">
<path fill="none" stroke="rgba(0,0,0,1)" stroke-width="1" d="
${boardToPathString(solved, boardDemoSize, unit)}" />
</svg>`
Insert cell
viewof boardDemoSeed = html`<input type="text" value="hello">`
Insert cell
viewof boardDemoSize = html`<input type="number" value="9" min="3" max="101" step="1">`
Insert cell
viewof unit = html`<input type="number" value="24" min="3" max="256" step="1">`
Insert cell
pathTest = html`
<svg width="192" height="192">
<path fill="none" stroke="rgba(0,0,0,0.1)" stroke-width="1" d="
M 48 0 l 0 192 M 96 0 l 0 192 M 144 0 l 0 192
M 0 48 l 192 0 M 0 96 l 192 0 M 0 144 l 192 0
" />
<path fill="none" stroke="rgba(0,0,0,1)" stroke-width="1" d="
${boardToPathString([2,3,4,5,6,7,8,9,10,11,12,13,14,15,16, 1], 4, 48)}
" />
</svg>`
Insert cell
solved = solveSync(boardDemoSeed, makeInitialBoard(boardDemoSize), boardDemoSize)
Insert cell
Insert cell

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.
Learn more