myNumber = 1
myString = "Hello world!"
myOtherString = myString
1 < 2
"a" > "b" // Why? Explain
'2' > 1 // Comparison of different types
1 < 2 && 3 > 4
1 < 2 || 3 > 4
array1 = new Array()
array2 = [] // Another way of creating an array
array3 = ["Steve Jobs", "Bill Gates", "Jeff Bezos"]
// Arrays can contain different data types
array4 = ["Steve Jobs", 55, true]
// Accessing arrays, arrays in JavaScript are 0-indexed
array4[0]
array5 = [0, 1, 2, 3, 4, 5] // Initialise the array
// Slice from left
array5.slice(2)
// Slice from right
array5.slice(-2)
// Slice from both ends, first index inclusive
array5.slice(0, 2)
// Turn an array into a string
array5.join('\n')
// Append to the end of an array - note that this DOES NOT change the original!
array5.concat(6)
// Remove from end of array - note that this mutates the original!
array5.pop()
object1 = new Object() // "Object constructor"
object2 = {} // "Object literal"
object3 = ({
name: "Jeff Bezos",
age: 55,
netWorth: "filthy rich"
})
object3.netWorth = "very filthy rich"
object3
object3["netWorth"]
// In other words...
object3.netWorth == object3["netWorth"]
object3["netWorth"] = "extremely filthy rich"
object3
{
let x = 0;
for (let i = 1; i <= 5; ++i) {
x += i; // adding numbers from 1 - 5
}
return x;
}
function showMessage() {
console.log("Hi")
}
showMessage()
function newFunction() {
let myVariable = 3
myVariable = myVariable + 1
return myVariable
}
newFunction() // 1 + 3
myVariable = 10
newFunction() // Still returns 4! Because it uses the local variable.
function add(a, b) {
return a + b
}
add(1, 2)
outputFromFunction = add(1,2)
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
function (a, b) {
return a + b
}(1,2)
myNamedAddFunction = (a, b) => {
return a + b
}
myNamedAddFunction(1, 2)
// Here, we download some data on Covid-19 in San Francisco
df = FileAttachment("cars.csv").csv({typed: true}) // Dataframe
Inputs.table(df.slice(0, 10))
carsDf = FileAttachment("cars.csv").csv({typed: true})
Inputs.table(carsDf)
Plot.dot(carsDf,
{
x: "economy (mpg)",
y: "power (hp)"
})
.plot()
Plot.dot(carsDf,
{
x: d => (d["weight (lb)"] * 0.425144),
y: d => d["power (hp)"]
})
.plot()
Plot.dot(carsDf,
{
x: d => d["weight (lb)"],
y: d => d["power (hp)"]
})
.plot()
Plot.dot(carsDf, {x: d => d["weight (lb)"] * 0.425144, y: d => d["power (hp)"]})
.plot({
x: {
grid: true,
label: "Weight (kg)",
labelAnchor: "center"
},
y: {
grid: true,
label: "Power (hp)",
labelAnchor: "center"
}
})
Plot.dot(carsDf, {x: d => d["weight (lb)"], y: d => d["power (hp)"]})
Plot.dot([[3750, 200],
[3864, 250],
[3901, 304]]).plot()
Plot.dot([[3750, 200],
[3864, 250],
[3901, 304]])
.plot({
x: {
grid: true,
domain: [3500, 5000]
},
y: {
grid: true,
domain: [80, 500]
}
})
irisDf = FileAttachment("iris.csv").csv({typed: true})
Inputs.table(irisDf)
/* Enter Your Code Below */
Plot.dot([[3750, 200], [3864, 250], [3901, 304]])
.plot({
x: {
grid: true,
domain: [3500, 5000]
},
y: {
grid: true,
domain: [80, 500]
}
})
Plot.plot({
marks: [
Plot.dot(carsDf, {x: "economy (mpg)", y: "power (hp)"}),
Plot.ruleX([30]), // a rule at x = 0, x= 80
Plot.ruleY([60])
],
x: {
grid: true,
domain: [0, 100]
},
y: {
grid: true,
domain: [0, 250]
}
})
irisMeanDf = FileAttachment("iris_mean.csv").csv({typed: true})
Inputs.table(irisMeanDf)
Plot.barX(irisMeanDf,
{
x: "petal.width",
y: "variety"
})
.plot()
Plot.barX(irisMeanDf,
{
x1: 0,
x2: "petal.width",
y: "variety"
})
.plot(
{
x: {
labelAnchor: "center"
},
y: {
labelAnchor: "top",
}
}
)
Plot.barY(irisMeanDf,
{
y1: 0,
y2: "petal.width",
x: "variety"
})
.plot({
y: {
labelAnchor: "top",
}
}
)
Plot.barX(irisMeanDf,
{
x1: 0,
x2: "petal.width",
y: "variety",
fillOpacity: 0.5
})
.plot(
{
y: {
labelAnchor: "top"
}
}
)
Plot.plot({
marks: [
Plot.barX(irisMeanDf, {x: "petal.width", y: "variety", fill: "salmon"}),
Plot.ruleX([0, 1.2])
],
y: {
labelAnchor: "top"
}
})
Plot.plot({
marks: [
Plot.barX(irisMeanDf, {x: "petal.width", y: "variety", fill: "variety"}),
Plot.ruleX([0])
],
y: {
labelAnchor: "top"
}
})
Plot.plot({
marks: [
Plot.barX(irisMeanDf,
{
x: "petal.width",
y: "variety",
fill: d => d["petal.width"] > 1.4 ? "salmon" : "steelblue"
}),
Plot.ruleX([0])
]
})
Plot.plot({
color: {
domain: ["small", "big"],
range: ["salmon", "steelblue"],
legend: true
},
marks: [
Plot.barX(irisMeanDf,
{
x: "petal.width",
y: "variety",
fill: d => d["petal.width"] > 1.4 ? "small" : "big"}),
Plot.ruleX([0])
],
y: {
labelAnchor: "top"
}
})
tempDf = FileAttachment("temp_anomalies_data.csv").csv({typed: true})
/* Enter your code below */
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.
