The avatar for @jonfroehlich
Jon E. Froehlich
UW CS Professor in HCI. Director of the Makeability Lab. Co-founder of Project Sidewalk.
Public
Intro to Vega-Lite
Edited
May 5, 2023
3 forks
4 stars
8
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
If you're trying to write in markdown but you forgot to select the `Markdown` type in the cell menu, you'll get an error
Insert cell
Insert cell
md`Alternatively, you can tell the Observable engine via the \`md\` command to indicate Markdown-formatted text. This is using Observable's [tagged template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#Tagged_templates)`
Insert cell
Insert cell
`The current time is ${new Date()} and a random number is ${Math.random()}`
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
{ var testValue = "Hello, I'm a local var"; }
Insert cell
Insert cell
`The value of testValue = ${testValue}`
Insert cell
Insert cell
myFavColor = "blue";
Insert cell
Insert cell
`My favorite color is ${myFavColor}`
Insert cell
Insert cell
You can also use Observable's [built-in interactive widgets](https://observablehq.com/@observablehq/inputs) (which Observable calls [Inputs](https://observablehq.com/@observablehq/inputs)) to create interactive cells that automatically update. Let's try it!
Insert cell
Insert cell
viewof yourFavColor = Inputs.color({label: "Your favorite color", value: "#4682b4"})
Insert cell
Insert cell
c1 = c2 - 1
Insert cell
c2 = c1 + 1
Insert cell
Insert cell
2 + 2 // the result of an expression always shows above the cell
Insert cell
Math.pow(3, 4) // again, the answer shows above the cell
Insert cell
Insert cell
myName = "Jon"
Insert cell
Insert cell
myName // "Jon" will show above
Insert cell
Insert cell
cScale = ["Middle C", "D", "E", "F", "G", "A", "B", "High C"];
Insert cell
Insert cell
cScaleToFrequency = (
{"Middle C" : 261.63,
"D" : 293.66,
"E" : 329.63,
"F" : 349.23,
"G" : 392.00,
"A" : 440.00,
"B" : 493.88,
"High C" : 523.25
}
);
Insert cell
Insert cell
{
let x = 1;
for (let i = 2; i < 5; i++) {
x *= i;
}
return x;
}
Insert cell
Insert cell
sumOf2s = {
let x = 0;
for (let i = 0; i < 10; i++) {
x += 2;
}
return x;
}
Insert cell
`The result of sumOf2s is ${sumOf2s}`
Insert cell
Insert cell
Insert cell
function greet(name){
return `Hello ${name}!`;
}
Insert cell
Insert cell
greet("Alice");
Insert cell
greet(myName);
Insert cell
Insert cell
`The current time is ${new Date(now).toLocaleTimeString()}.`
Insert cell
Insert cell
Insert cell
{
for(let i=0; i<5; i++){
// See: https://developer.mozilla.org/en-US/docs/Web/API/console/log
console.log(i + ": " + Date.now() + " ms");
}
}
Insert cell
Insert cell
Insert cell
{
for(let i=0; i<5; i++){
// Uncomment the following line to see what happens
//debugger; // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger
console.log(i + ": " + Date.now() + " ms");
}
}
Insert cell
Insert cell
Insert cell
viewof interactiveEditBox = html`<input value="Try entering a value in this edit box">`
Insert cell
interactiveEditBox
Insert cell
Insert cell
viewof sliderVal = html`<input type=range>`
Insert cell
Insert cell
sliderVal
Insert cell
Insert cell
Insert cell
{
const p = document.createElement("p");
p.appendChild(document.createTextNode("I am a "));
p.appendChild(document.createElement("i")).appendChild(document.createTextNode("paragraph"));
p.appendChild(document.createTextNode(" element, created using the W3C DOM API."));
return p;
}
Insert cell
Insert cell
html`<p>I am a <i>paragraph</i> element, created using Observable's HTML tagged template literal!</p>`
Insert cell
Insert cell
md`I, too, am a *paragraph* element, created using Markdown in a JavaScript cell.`
Insert cell
Insert cell
import {ramp} from "@mbostock/color-ramp"
Insert cell
ramp(d3.interpolateBrBG)
Insert cell
Insert cell
import {printTable} from '@jonfroehlich/data-utilities'
Insert cell
Insert cell
exampleData = [
{"city": "Seattle", "month": "Apr", "precip": 2.68},
{"city": "Seattle", "month": "Aug", "precip": 0.87},
{"city": "Seattle", "month": "Dec", "precip": 5.31},
{"city": "New York", "month": "Apr", "precip": 3.94},
{"city": "New York", "month": "Aug", "precip": 4.13},
{"city": "New York", "month": "Dec", "precip": 3.58},
{"city": "Chicago", "month": "Apr", "precip": 3.62},
{"city": "Chicago", "month": "Aug", "precip": 3.98},
{"city": "Chicago", "month": "Dec", "precip": 2.56},
];
Insert cell
Insert cell
Insert cell
Insert cell
import {toc} from "@jonfroehlich/collapsible-toc"
Insert cell

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.
Learn more