Published
Edited
Dec 29, 2018
sum = (a, b) => a + b
sum(1, 2)
sum(10e4, 5)
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
x = 10
square = a => a * a
square(12)
greeting = `Hey ${name}, how are you?`
greet = name => `Hola ${name}, que pasa?`
greet(`Rafic`)
numbers = [1, 2, 3, 4]
names = ["leti", "dennis", "rafic"]
names[0]
md`### Objects / Maps / Dictionary`
phoneBook = ({
leti: "+16479992080",
rafic: "+16107169757"
})
phoneBook["leti"]
arrayAsMap = ({ 0: "leti", 1: "rafic", 3: "Dennis" })
html`<h1 style=background:red>Hello</h2>`
hiccup([
"div",
["h1", { style: { background: "lightgreen" } }, "shopping list"],
["div", ["input", { type: "checkbox" }], ["label", shoppingList[0]]],
["div", ["input", { type: "checkbox" }], ["label", shoppingList[1]]],
["div", ["input", { type: "checkbox" }], ["label", shoppingList[2]]]
])
shoppingListItem = async (item, translateOpts) => {
if (translateOpts) {
item = await translate({
source: translateOpts.source,
target: translateOpts.target,
text: item
}).then(x => x.translatedText);
}
return [
"div",
{ style: { color: "tomato" } },
["input", { type: "checkbox" }],
["label", item]
];
}
shoppingList = [
"kiwis",
"avocados",
"banana",
"apples",
"pears",
"cucumber",
"spaghetti",
"garlic"
]
{
return hiccup([
"div",
["h1", { style: { background: "lightgreen" } }, "shopping list"],
await Promise.all(
shoppingList.map(item =>
shoppingListItem(item, { source: "en", target: "it" })
)
)
]);
}
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.
