Live programming @ University of Washington
Published
Edited
Aug 30, 2021
md`# Experimenting with Flowview
See https://observablehq.com/@elmisback/flowview-js-wvw for background.`
viz(sys)
sys = define("a", 1)
.and(define("fn_ex", a => 2 * a, "a"))
.and(define("fn", VIEW, "fn_ex", "a"))
.and(define("base_case_n", 1))
.and(define("first_general_case_n", 2))
.and(define("base_case_ex", (f, n) => 1, "fn", "base_case_n"))
.and(define("base_case", VIEW, "base_case_ex", "fn", "base_case_n"))
.and(define("fib_ex", (f, n) => n < 2 ? 1 : f(f, n-1) + f(f, n-2), "base_case", "first_general_case_n"))
.and(define("fib_explicit_rec", VIEW, "fib_ex", "base_case", "first_general_case_n"))
.and(define("example_n", 6))
.and(define("fib_explicit_rec_out", (fib, n) => fib(fib, n), "fib_explicit_rec", "example_n"))
.and(define("fib", VIEW, "fib_explicit_rec_out", "example_n"))
.and(define("fib_out", "fib", "example_n"))
sys.query("fib_out")
compact(sys)
sys.definitions
sys.query('fn')
node_name = sys_name => sys_name + " :: " + (typeof sys.query(sys_name) === 'function' ? '[fn]' : sys.query(sys_name))
viz = sys => {
let node_name = sys_name => console.log(sys_name) || sys_name + " :: " + (typeof sys.definitions.find(e => e.name == sys_name).fn === 'function' ? sys.definitions.find(e => e.name == sys_name).fn + " :: " + sys.query(sys_name) : sys.query(sys_name))
return dot`digraph test_mouseover_label {
${sys.definitions.map(({name, fn, args}) =>
`"${node_name(name)}" [label="${fn == VIEW ? `${name} :: VIEW of ${args[0]} with holes ( ${args.slice(1).map(arg => arg).join(', ')} )` : node_name(name)}"] ; ` + args.map(arg => `"${node_name(arg)}" -> "${node_name(name)}"` ).join('; ') + (sys.definitions.find(e => e.name === fn) ? `"${node_name(fn)}" -> "${node_name(name)}"` : '') ).join('\n')}
}`
}
vizc = sys => {
let node_name = sys_name => console.log(sys_name) || sys_name + " :: " + (typeof sys.definitions.find(e => e.name == sys_name).fn === 'function' ? sys.definitions.find(e => e.name == sys_name).fn + " :: " + sys.query(sys_name) : sys.query(sys_name))
return `digraph test_mouseover_label {
${sys.definitions.map(({name, fn, args}) =>
`"${node_name(name)}" [label="${fn == VIEW ? `${name} :: VIEW of ${args[0]} with holes ( ${args.slice(1).map(arg => arg).join(', ')} )` : node_name(name)}"] ; ` + args.map(arg => `"${node_name(arg)}" -> "${node_name(name)}"` ).join('; ') + (sys.definitions.find(e => e.name === fn) ? `"${node_name(fn)}" -> "${node_name(name)}"` : '') ).join('\n')}
}`
}
dot = require("@observablehq/graphviz@0.2")
import {define, VIEW, compact} from '@elmisback/flowview-js-wvw'
sys2 = define("a", "hello")
.and(define("punctuation", "!"))
.and(define("b", p => 'world' + p, "punctuation"))
.and(define("out", (s1, s2) => s1 + ' ' + s2, "a", "b"))
.and(define("adjust_greeting_and_punctuation", VIEW, "out", "a", "punctuation"))
.and(define("new_greeting", "hi"))
.and(define("new_punctuation", "?"))
.and(define("new_out", "adjust_greeting_and_punctuation", "new_greeting", "new_punctuation"))
vizc(sys2)
viz(sys2)
sys3 = define("a", "hello")
.and(define("punctuation", "!"))
.and(define("b", p => 'world' + p, "punctuation"))
.and(define("out", (s1, s2) => s1 + ' ' + s2, "a", "b"))
viz(sys3)
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.
