Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
Published
Edited
Oct 9, 2018
1 fork
2 stars
answer = 2 * 3 * 7
({"subjects": ["life", "the universe", "everything"]})
{
let sum = 0;
for (let i = 1; i <= 10; ++i) sum += i;
return sum;
}
42, // Oops, a SyntaxError!
document.createTextNode("Hello, I am text!")
html`Hello, I am <i>italicized</i>!`
md`Hello, I am *Markdown*!`
html`<svg width=50 height=50>
<circle cx=25 cy=25 r=20 fill=red></circle>
</svg>`
{
const canvas = document.createElement("canvas");
canvas.width = 50;
canvas.height = 50;
const context = canvas.getContext("2d");
context.arc(25, 25, 20, 0, 2 * Math.PI);
context.fillStyle = "blue";
context.fill();
return canvas;
}
x = 2
y = 3
x + y
{
const x = 1337; // This defines a local x, masking the cell above.
return x;
}
z * z
z = 8
doop = 1
doop = 2 // doop is not a unique name! 💥
doop + 1 // doop is not defined 💥
a = b + 1 // a depends on b
b = a + 1 // b depends on a 💥
function k(x, y) {
return x / y;
}
message = new Promise(resolve => {
setTimeout(() => {
resolve("I am asynchronous!");
}, 3000);
})
message.toUpperCase()
miserables = {
const response = await fetch("https://gist.githubusercontent.com"
+ "/mbostock/4062045"
+ "/raw/94d1b56d1e6c0d4bcc1edd86a41385a14ed4c1b3"
+ "/miserables.json");
return response.json();
}
function* range(n) {
for (let i = 0; i < n; ++i) {
yield i;
}
}
button, range(100)
viewof button = html`<button>Restart</button>`
{
for (let i = 0; i < 100; ++i) {
yield i;
}
}
seconds = {
let i = -1;
while (true) {
yield new Promise(resolve => {
setTimeout(() => {
resolve(++i);
}, 1000);
});
}
}
{
let i = -1;
while (true) {
yield Promises.delay(1000, ++i);
}
}
Generators.observe(change => {
let i = -1;
let interval = setInterval(() => change(++i), 1000);
return () => clearInterval(interval);
})
input = html`<input type=range>`
Generators.observe(change => {
const listener = () => change(input.valueAsNumber);
input.addEventListener("input", listener);
change(input.valueAsNumber); // Report the initial value.
return () => input.removeEventListener("input", listener);
})
hue = {
const form = html`<form><table>
<tr><td>
<input name=in type=range min=0 max=359 value=180 step=1>
<output name=out></output>° hue
</td></tr>
</form>`;
form.oninput = () => form.value = form.out.value = +form.in.value;
form.oninput(); // Set the initial value.
return form;
}
Generators.input(hue)
viewof foo = html`<input type=range min=0 max=1 step=any>`
foo
(viewof foo).tagName
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.
