image = flood // See the import down below! 🌈
height = 650 // Try changing this value and clicking the play button ▶︎.
`My favorite number is ${2 * 3 * 8}.`
md`All code is editable, so try editing the code above! After making changes, click the play button (\`▶︎\`) in the bottom-right corner of the editor to run the new code, or use the ${keys("Shift-Enter")} keyboard shortcut.
If this were your notebook, your edits would be saved automatically. But when you edit someone else’s notebook, your changes are discarded when you leave; reload the page to discard your changes immediately. If you wish to save your changes, click the fork button at the top to create your own personal copy of this notebook. (A fork button also appears in the bottom-right corner of the screen whenever you edit a published notebook.)`
import {canvas as flood} with {height} from "@mbostock/randomized-flood-fill"
import {mac, keySymbols, keyWords} from "@mbostock/keys"
2 * 3 * 7
{
let x = 0;
for (let i = 1; i <= 100; ++i) {
x += i;
}
return x;
}
x + 2 // x is not accessible here!
// this is how you create comments
({top: 20, right: 20, bottom: 30, left: 40})
function greet(name) { // greet is the name of the function, name in parenthesis is the place holder
return `Hello, ${name}!`;
}
greet("Carlos")
greet("Class")
greet(color)
color = "red"
letters = { return "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("") }
letters.map(l => l.toLowerCase())
fullName = `${firstName} ${lastName}`
lastName = "Lovelace"
firstName = "Ada"
randomWalk = {
let y = 16, values = [y];
for (let x = 0; x < width; ++x) values.push(y = y + (Math.random() - 0.5) * 3 + (16 - y) * 0.1);
return values;
}
{
const context = DOM.context2d(width, 33);
context.beginPath();
context.moveTo(0, randomWalk[0]);
for (let x = 0; x < width; ++x)
context.lineTo(x, randomWalk[x]);
context.lineJoin = context.lineCap = "round";
context.strokeStyle = stroke;
context.stroke();
return context.canvas;
}
stroke = "pink"
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.
