Published
Edited
Oct 31, 2020
1 star
Insert cell
Insert cell
Insert cell
Insert cell
// Even single values can be vmaps
html`${formform.dna.vmapList([[''],['()'],['{,}'],['{}']])}`
Insert cell
// Patterns of simple FORMs are embedded and iterated in more complex ones
html`${formform.dna.vmapList([['a'],['(a)'],['{open|a}'],['{a}'],['(a)b'],['((a)b)'],['{a,b}'],['((a)b)c'],['(((a)b)c)'],['{a,b,c}']])}`
Insert cell
// Perspectives on the vmap for "CoOneAnother"; It looks like the subpattern on the right is growing
show( formform.dna.vmapPerspectives('{L,E,R}{E,R,L}{L,R,E}') )
Insert cell
// In this list you can see how vmaps from decision FORMs seem to pinpoint their target value like a crosshair
show( formform.dna.vmapList([['((a)b)'],['((a)bc)'],['((a)bcd)'],['((a)bcde)']]) )
Insert cell
// By removing the gaps between diamonds you can see how this FORM produces values like weaving patterns
show( formform.dna.vmap('{a,b,c,d,e,f,g}',undefined,
{size: 5, strokeW: 0, gapGrow: 0, svgPad: 40, bgC: 'black'}) )
Insert cell
// Example of vmap perspectives for a FORM with 4 variables starting with a reversed variable order
show( formform.dna.vmapPerspectives('(({"x_4","x_1"}{"x_3","x_1"}{"x_2","x_1"}{"x_1","x_1"})("x_1""x_2""x_3""x_4"))', ['x_4','x_3','x_2','x_1'], {size: 7}) )
Insert cell
// vmap lists can be useful to compare vmaps, like in this example, where I have reconstructed CoOneAnother as a binary interpretation (no undetermined values remain)
show( formform.dna.vmapList([['{L,E,R}{E,R,L}{L,R,E}'],['((({a}{2r|a}))(({b}{2r|b}))(({(c)}{2r|(c)})))((({a}{2r|a}))(({(b)}{2r|(b)}))(({c}{2r|c})))((({(a)}{2r|(a)}))(({b}{2r|b}))(({c}{2r|c})))((({(a)}{2r|(a)}))(({b}{2r|b}))(({(c)}{2r|(c)})))((({(a)}{2r|(a)}))(({(b)}{2r|(b)}))(({c}{2r|c})))']],
{fullInputLabel: true, gapGrow: 4, size: 20, strokeW: 0, vAlign: 'top'}) )
Insert cell
// With greater gap separation we can see how a few simple 4x4 patterns act as building blocks in this FORM
html`<div style="background-color: #fefae0; padding: 2px 24px;">${formform.dna.vmapPerspectives('((a)b)c',undefined,
{strokeW:4, strokeC:'none', gapGrow: 8, bgCol: 'none', margin: '16'})}</div>`
Insert cell
// This vmap generated from a randomized formDNA for 7 variables looks like television noise
show( formform.dna.vmap('::'+formform.dna.genRandomDNA(7), undefined,
{size: 4, gapGrow: 0, strokeW:0.8, strokeC:'#000', bgC:'#000', svgPad:'60px', hideOrderLabel: true}) )
Insert cell
{ // Generating more noisy vmaps just because
while (true) {
yield Promises.tick(100, show( formform.dna.vmap('::'+formform.dna.genRandomDNA(3)) ) );
}
}
Insert cell
// Some value patterns in FORMs almost look like abstract art, don't you think?
show( formform.dna.vmap('{(d),a}{c,(b),}', undefined,
{ size: 20, strokeW:0, gapGrow: 0 }) )
Insert cell
// Had some fun with this one. Could a pattern like this emerge from a simple FORM?
show( formform.dna.vmapList([
['::2301230100021131'],['::3210321011130020'],['::2322233323012301'],['::3233322232103210'],
['::2322233323012301323332223210321023012301000211313210321011130020'],['::3233322232103210232223332301230132103210111300202301230100021131'],['::2322233323012301323332223210321032103210111300202301230100021131'],['::3233322232103210232223332301230123012301000211313210321011130020'],
['::3233322232103210232223332301230123012301000211313210321011130020232223332301230132333222321032103210321011130020230123010002113132333222321032102322233323012301321032101113002023012301000211312322233323012301323332223210321023012301000211313210321011130020']
], {vAlign: 'bottom', gapGrow: 0, strokeW: 0.8, size: 10, customLabel: ':-)'}) )
Insert cell
Insert cell
Insert cell
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