Published
Edited
May 8, 2022
Insert cell
Insert cell
Insert cell
Insert cell
"hello"
Insert cell
2 + 1
Insert cell
Insert cell
myText = "hello"
Insert cell
Insert cell
myResult = 2 + 1
Insert cell
Insert cell
// to define multiple variables make that n these parenthese {}
{
let originalText = "hello";
let transformedText = "hello".toUpperCase();
return transformedText;
}
Insert cell
Insert cell
// JS comment
myData = [1, 2, 3]
Insert cell
<!-- HTML commment -->
<p>Some text</p>
Insert cell
Better to use the keyboard shortcut for commenting in and out ("Cmd + /" for Mac).
Insert cell
({
name: "Gandalf",
// nickName: "Mithrandir",
age: "24_000+"
})
Insert cell
Insert cell
Insert cell
"a" // or 'a'
Insert cell
Insert cell
10
Insert cell
10_000_000
Insert cell
Insert cell
true
Insert cell
Insert cell
String(10)
Insert cell
Number('10')
Insert cell
(204401).toFixed(3)
Insert cell
Insert cell
Insert cell
myArray = [1, 2, 3, 4, 5]
Insert cell
myArray[0]
Insert cell
Insert cell
entity = ({
name: "Gandalf",
nickName: "Mithrandir",
age: "24_000+"
})
Insert cell
entity["name"]
Insert cell
entity.name
Insert cell
Insert cell
Insert cell
Insert cell
names = ['Gandalf', 'Sauron', 'Leto II']
Insert cell
names[0]
Insert cell
Insert cell
myNestedArray = [
["Car", "Bicycle"],
["James", "Annie"]
]
Insert cell
myNestedArray[0][0]
Insert cell
myNestedArray[1][1]
Insert cell
Insert cell
Insert cell
myDataset = [
{name: "Gandalf", alias: "Mithrandir", age: 24_000 },
{name: "Sauron", alias: "The Great Eye", age: 54_960 },
{name: "Galadriel", alias: "Lady of Light", age: 8_372 },
{name: "Elrond", alias: "Lord of Rivendell", age: 6_000 },
{name: "Legolas", alias: "Greenleaf", age: 2_931 },
{name: "Arwen", alias: "Evenstar", age: 2901 },
{name: "Gollum", alias: "Sméagol", age: 598 },
{name: "Aragorn", alias: "Elessar", age: 89 },
{name: "R. Daneel Olivaw", alias: "Eto Demerzel,", age: 19_230 },
{name: "Dors Venabili", alias: "The Tigress", age: 183 },
{name: "Leto II", alias: "Worm", age: 3_000 },
{name: "Thanos", alias: "The Mad Titan", age: 1_000 },
{name: "The Oracle", alias: "", age: 450 },
{name: "The Architect", alias: "", age: 450 },
]
Insert cell
myDataset[0]
Insert cell
myDataset[0].name
Insert cell
myDataset[0]["name"]
Insert cell
Insert cell
Insert cell
myNestedDataset = [
{lordOfTheRings: [
{name: "Gandalf", alias: "Mithrandir", age: 24_000 },
{name: "Sauron", alias: "The Great Eye", age: 54_960 },
{name: "Galadriel", alias: "Lady of Light", age: 8_372 },
{name: "Elrond", alias: "Lord of Rivendell", age: 6_000 },
{name: "Legolas", alias: "Greenleaf", age: 2_931 },
{name: "Arwen", alias: "Evenstar", age: 2901 },
{name: "Gollum", alias: "Sméagol", age: 598 },
{name: "Aragorn", alias: "Elessar", age: 89 },
]},
{foundation: [
{name: "R. Daneel Olivaw", alias: "Eto Demerzel", age: 19_230 },
{name: "Dors Venabili", alias: "The Tigress", age: 183 },
]},
{dune: [
{name: "Leto II", alias: "Worm", age: 3_000 },
]},
{marvel:[
{name: "Thanos", alias: "The Mad Titan", age: 1_000 }
] },

{theMatrix: [
{name: "The Oracle", alias: "", age: 450 },
{name: "The Architect", alias: "", age: 450 },
]}
]
Insert cell
myNestedDataset[0]
Insert cell
myNestedDataset[0].lordOfTheRings[0].name
Insert cell
Insert cell
Insert cell
myString = 'a'
Insert cell
myNumber = 1
Insert cell
myString.constructor.name
Insert cell
myNumber.constructor.name
Insert cell
Insert cell
Insert cell
// Jump to cell where name was first defined (command+J)
names
Insert cell
// d is datum
names.map((d) => d + " is old.")
Insert cell
names.map(function (d) {
return d + " is old.";
})
Insert cell
Insert cell
// tripple equality is better, e.g. ===
names.filter((d) => d[0] === "S")
Insert cell
Insert cell
names.forEach( d => document.querySelector(d) )
Insert cell
Insert cell
Insert cell
names
Insert cell
Insert cell
postFix = function(d) {
return d + ' is old.'
}
Insert cell
Insert cell
names.map( postFix )
Insert cell
Insert cell
names.map( function(d) {
return d + ' is old.'
} )
Insert cell
Insert cell
names.map( function(d) {return d + ' is old.'} )
Insert cell
Insert cell
names.map( (d) => {return d + ' is old.'} )
Insert cell
Insert cell
names.map( (d) => d + ' is old.' )
Insert cell
Insert cell
names.map((d) => d + " is old.")
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
sum = 2 + 4
Insert cell
sumIsSeven = sum === 7 ? true : false
Insert cell
allIsGood = true
Insert cell
color = allIsGood
? "green"
: "red"
Insert cell
Insert cell
Insert cell
firstName = "Jane"
Insert cell
lastName = "Doe"
Insert cell
// add the tilda sign ` `and not " "
`His first name is ${firstName} and last name is ${lastName}.`
Insert cell
Insert cell
1 === 1
Insert cell
2 !==1
Insert cell
2 > 5
Insert cell
2 >= 5
Insert cell
2 <= 5
Insert cell
Insert cell
2 && 2
Insert cell
2 || 2
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
import {imageToDo} from "@clokman/student-blocks"
Insert cell
imageToDo
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