Published
Edited
Mar 26, 2020
2 + 2
{
const canvas = DOM.canvas(width, 33);
const context = canvas.getContext("2d");
context.fillText("Hello, I am a canvas!", 0, 20);
return canvas;
}
{
const context = DOM.context2d(width, 33);
context.fillText("Hello, I am a canvas!", 0, 20);
return context.canvas;
}
DOM.download(
new Blob([JSON.stringify({hello: "world"})], {type: "application/json"}),
"hello.json", // optional file name
"Click to Download" // optional button label
)
{
// Consider using the html tagged template literal instead.
const i = DOM.element("i");
i.textContent = "Hello, world!";
return i;
}
{
// Consider using DOM.svg or the html tagged template literal instead.
const svg = DOM.element("svg:svg", {width, height: 27});
const text = svg.appendChild(DOM.element("svg:text", {y: 22}));
text.textContent = "Hello, I am SVG!";
return svg;
}
// Consider using the html tagged template literal instead.
DOM.input()
// Consider using the html tagged template literal instead.
DOM.input("checkbox")
// Consider using the html tagged template literal instead.
DOM.input("file")
// Consider using DOM.range or the html tagged template literal instead.
DOM.input("range")
// Consider using the html tagged template literal instead.
DOM.range(
0, // min
10, // max
1 // step
)
// Consider using the html tagged template literal instead.
DOM.select(["one", "two", "three"])
{
// Consider using the html tagged template literal instead.
const svg = DOM.svg(width, 27);
const text = svg.appendChild(DOM.element("svg:text", {y: 22}));
text.textContent = "Hello, I am SVG!";
return svg;
}
// Consider using the html tagged template literal instead.
DOM.text("I am a text node.")
html`<span style="background:yellow;">
Hello, <i>world</i>!
</span>`
html`<input type=range min=0 max=10 step=1>`
html`<select>
<option>one</option>
<option>two</option>
<option>three</option>
</select>`
md`Hello, *world*!`
md`The current time is ${new Date(now)}.` // Reactive Markdown!
tex`E = mc^2`
tex`
f(x) = \int_{-\infty}^\infty
\hat f(\xi)\,e^{2 \pi i \xi x}
\,d\xi
`
tex.block`
f(x) = \int_{-\infty}^\infty
\hat f(\xi)\,e^{2 \pi i \xi x}
\,d\xi
`
Files // Expand me!
viewof file = DOM.input("file") // Try opening a file.
Files.buffer(file)
Files.text(file)
Files.url(file)
Generators // Expand me!
function* integers() {
let i = -1;
while (true) {
yield ++i;
}
}
Generators.filter(integers(), d => d & 1) // Odd integers.
inputElement = DOM.range()
// Consider using viewof instead.
inputValue = Generators.input(inputElement)
// viewof uses Generators.input (and Generators.observe) internally.
viewof value = DOM.range()
value
Generators.map(integers(), d => d ** 2) // Squares.
// Consider using Generators.input or viewof instead.
// Like Generators.queue, except it yields only the latest notified value.
Generators.observe(notify => {
const mousemoved = event => notify([event.clientX, event.clientY]);
window.addEventListener("mousemove", mousemoved);
return () => window.removeEventListener("mousemove", mousemoved);
})
// Consider using Generators.input or viewof instead.
// Like Generators.observe, except it yields all notified values.
Generators.queue(notify => {
const mousemoved = event => notify([event.clientX, event.clientY]);
window.addEventListener("mousemove", mousemoved);
return () => window.removeEventListener("mousemove", mousemoved);
})
Generators.valueAt(integers(), 10) // Returns the 11th yield value (zero-based index).
Promises // Expand me!
// Consider also Promises.tick.
Promises.delay(5000, "resolved value")
invalidation // It never resolves!
{
let i = 0;
const div = html`<div>`;
const timer = d3.timer(() => div.textContent = ++i);
try {
yield div;
yield invalidation; // Let the timer run forever,
} finally {
timer.stop(); // but dispose if re-evaluated.
}
}
// Like Promises.delay, but synchronized.
Promises.tick(1000, "resolved value")
{
while (true) {
yield Promises.tick(1000).then(() => new Date);
}
}
{
// A somewhat elaborate variation of Promises.delay.
const date = new Date;
date.setSeconds(date.getSeconds() + 1);
return Promises.when(date, "resolved value");
}
d3 = require("d3@4")
topojson = require("topojson-client", "topojson-simplify") // Merge libraries!
require("https://unpkg.com/d3@4/build/d3.js") // URLs work, too.
resolve("d3@4")
now // Date.now()
width // Try resizing the window.
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.
