Tech Lead at Taktile.
Formerly Firebase, Google
Unlisted
Edited
Apr 4
3 stars
import { localStorageView } from "@tomlarkworthy/local-storage-view"
viewof editor = Inputs.bind(Inputs.text(), localStorageView("code"))
Inputs.button("set code", {
reduce: () => {
viewof editor.value = "example";
viewof editor.dispatchEvent(new Event("input"));
}
})
import { CodeMirror } from "@tomlarkworthy/codemirror-6"
elements = [{ bar: true }]
expr = elements[0].
viewof reactiveMultiControlUI = {
const answer = Inputs.radio(["a", "b"]);
const result = Inputs.text({ label: "result", disabled: true });
const checker = () => {
if (answer.value == "b") result.value = "correct!";
if (answer.value == "a") result.value = "wrong!";
};
answer.addEventListener("input", checker);
invalidation.then(() => answer.removeEventListener("input", checker)); // For every addXXX their is a removeXXX
return Inputs.form([answer, result]);
}
viewof submitted = Inputs.button("submit", {
required: true,
reduce: () => viewof reactiveMultiControlUI.value
})
submitted
viewof ui2 = {
return view`<div>
${["response", Inputs.radio(["a", "b"])]}
${["submit", Inputs.button("submit")]}
${["result", Inputs.text({ label: "result", disabled: true })]}
</div>`;
}
viewof ui2
checker = {
// Note you could put all this logic inside the viewof ui2 code block too
const checker = () => {
if (viewof ui2.value.response === "a") {
viewof ui2.value.result = "wrong";
} else if (viewof ui2.value.response === "b") {
viewof ui2.value.result = "correct";
} else {
viewof ui2.value.result = "you didn't answer!!!";
}
};
viewof ui2.submit.addEventListener("input", checker);
invalidation.then(() =>
viewof ui2.submit.removeEventListener("input", checker)
);
}
viewof ui2
Fetchp
image1 = FileAttachment("image@1.png").image()
import { fetchp } from "@tomlarkworthy/fetchp"
dynamicRadio = juice(Inputs.radio, {
options: "[0]",
result: "[1].value"
})
viewof control = dynamicRadio(["a", "b", "c"])
control
logic = {
if (filter === "all") {
viewof control.options.value = ["a", "b", "c"];
} else if (filter === "b,c") {
if (viewof control.result.value == "a") viewof control.result.value = null;
viewof control.options.value = ["b", "c"];
} else if (filter === "a,c") {
if (viewof control.result.value == "b") viewof control.result.value = null;
viewof control.options.value = ["a", "c"];
}
viewof control.dispatchEvent(new Event("input", { bubbles: true }));
}
myRequire = d3Require.requireFrom(async (name) => {
return `${registry}/${name}`;
})
(runImport, myRequire("@securityscorecard/design-system@1.0.0-alpha.148"))
viewof selection = Inputs.select(["red", "green", "blue"])
viewof submit1 = Inputs.textarea({ value: selection, submit: true })
submit1
viewof submit2 = Inputs.textarea({ submit: true, minlength: 1 })
submit2
Inputs.bind(viewof selection, viewof submit2)
viewof submit3 = Inputs.button("submit", {
required: true,
reduce: () => selection
})
submit3
import { tweet } from "@mbostock/tweet"
tweet("1442010098482626563")
I am a mardown cell but I escape to JS and have some smart casting so that if my JS returns a DOM node I can render that too ${html`<input type="range">`}
Look ${function foo() {
const el = document.createElement("h1")
el.innerHTML = "Programmatic Title in embedded markdown";
return el
}()}
viewof foo = {
// Create a view 'foo' with value 'bar'
return Object.defineProperty(md`foo`, "value", {
value: "bar",
writable: true,
enumerable: true
});
}
viewof foo.value
foo
set_value_to_promise = Inputs.button("set new promise", {
reduce: () => {
viewof foo.value = invalidation;
viewof foo.dispatchEvent(new Event('input', { bubbles: true }));
}
})
set_value_to_undefined = Inputs.button("set undefined", {
reduce: () => {
viewof foo.value = undefined;
viewof foo.dispatchEvent(new Event('input', { bubbles: true }));
}
})
md`If you refresh the 'viewof foo.value' cell it will not resolve`
viewof x = Object.assign(Inputs.range([0, 10], { label: "yo", step: 2 }), {
oninput: event => event.isTrusted && event.stopImmediatePropagation(),
onchange: event => event.currentTarget.dispatchEvent(new Event("input"))
})
x
Promises.delay(Number.NaN)
viewof textAreaWithSubmit = Inputs.textarea({
submit: true
})
textAreaWithSubmit
viewof textWithSubmit = Inputs.text({
submit: true
})
textWithSubmit
viewof start = Inputs.text()
viewof middle = {
const middle = Inputs.text();
Inputs.bind(viewof start, middle);
return middle;
}
viewof end = {
const end = Inputs.text();
Inputs.bind(viewof middle, end);
return end;
}
end
start
md`### Repo multi update`
import { exportString } from "@tomlarkworthy/repo1"
exportString
ganja = md`### Ganja.js`
Algebra = require("ganja.js")
Algebra(2, 0, 1, () => {
// 1e1 is the dimension (Y)
// Change to 1e2 to make this a horizontal line
return this.graph([1e1]);
})
viewof cell_a = Inputs.select(["one", "two"])
cell_a
viewof cell_b = Inputs.text()
updater_with_event = {
// You could declare this updating in cell_b too, but I think its more illastrative taking it into its own cell
viewof cell_a.addEventListener("input", (evt) => {
viewof cell_b.value = viewof cell_a.value; // Updates visual appearance but does not trigger dataflow from cell_b
viewof cell_b.dispatchEvent(new Event("input", { bubbles: true }));
});
}
import { view, variable } from "@tomlarkworthy/view"
import { viewroutine, ask } from "@tomlarkworthy/viewroutine"
viewof cell_c = mutableSelection(["a", "b"])
cell_c
cell_c.selection
updater_first_option_using_cell_b = {
viewof cell_b.addEventListener("input", (evt) => {
viewof cell_c.options.value = [viewof cell_b.value, "other"]; // Assign any array of options you like (does nto support in-place mutation like .push)
viewof cell_c.options.dispatchEvent(new Event("input", { bubbles: true }));
});
}
import ("")
cells = [
{
labelX: "row1",
labelY: "col1",
group: "A",
value: 42
},
{
labelX: "row2",
labelY: "col1",
group: "A",
value: 42
},
{
labelX: "row3",
labelY: "col1",
group: "A",
value: 42
},
{
labelX: "row1",
labelY: "col2",
group: "A",
value: 42
},
{
labelX: "row2",
labelY: "col2",
group: "A",
value: 42
},
{
labelX: "row3",
labelY: "col2",
group: "A",
value: 42
},
{
labelX: "row1",
labelY: "col3",
group: "A",
value: 42
},
{
labelX: "row2",
labelY: "col3",
group: "A",
value: 42
},
{
labelX: "row3",
labelY: "col3",
group: "A",
value: 42
}
]
Plot.plot({
color: { legend: true },
marks: [
Plot.cell(cells, {
x: "labelX",
y: "labelY",
fill: "value"
}),
Plot.tickY(["col2"], { dy: 11 })
]
})
plot_grid = Plot.plot({
color: { legend: true },
marks: [
Plot.cell(cells, {
x: "labelX",
y: "labelY",
fill: "value"
}),
Plot.tickY(["col2"])
]
})
x_scale = plot_grid.scale("x") // d3.scale
x_scale.apply("row2")
viewof response = Inputs.button("connect", {
reduce: async () =>
(
await fetch(
"https://sso.dsmz.de/auth/realms/dsmz/protocol/openid-connect/token",
{
method: "POST",
headers: {
"content-type": "application/x-www-form-urlencoded"
},
body: "username=myUsername&password=myPassword&client_id=api.bacdive.public&grant_type=password&code=&redirect_uri=&scope=openid"
}
)
).text()
})
response
viewof pos = Plot.plot({
marks: [
Plot.dot(
penguins,
Plot.pointer({
x: "culmen_length_mm",
y: "culmen_depth_mm",
fill: "red",
r: 8
})
),
Plot.dot(penguins, { x: "culmen_length_mm", y: "culmen_depth_mm" })
]
})
pos
d3.csv(
"https://docs.google.com/spreadsheets/d/e/2PACX-1vStElZLXAh6_Zy1z6HqCc6xf6_xOVBJMOzVvNQGLOf6KmsVY07etajt3_gFplnqoCCOi17bBkib_Xv0/pub?gid=2033815436&single=true&output=csv"
)
(
await fetch(
"https://docs.google.com/spreadsheets/d/e/2PACX-1vStElZLXAh6_Zy1z6HqCc6xf6_xOVBJMOzVvNQGLOf6KmsVY07etajt3_gFplnqoCCOi17bBkib_Xv0/pub?gid=2033815436&single=true&output=csv",
{
method: "HEAD"
}
)
).headers.get("content-length")
faster = {
const sheetId = "1Z7Dja43FepxVOJc5_pMdP0etERM6h0BPAWT74zjdbno";
const sheetName = "Sheet1"; // Change if your sheet name is different
const url = `https://docs.google.com/spreadsheets/d/2PACX-1vStElZLXAh6_Zy1z6HqCc6xf6_xOVBJMOzVvNQGLOf6KmsVY07etajt3_gFplnqoCCOi17bBkib_Xv0/gviz/tq?tqx=out:csv&sheet=${sheetName}`;
return d3.csv(url);
}
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.
