Public
Edited
Jul 21
1 fork
Insert cell
Insert cell
Insert cell
Insert cell
123
Insert cell
1 + 23
Insert cell
Insert cell
x = 23
Insert cell
viewof LearningRate = Inputs.range([0, 100], {
label: "Learning Rate",
step: 1
})
Insert cell
LearningRate
Insert cell
I am really learning at a slow rate today - ${LearningRate}
Insert cell
typeof x
Insert cell
Insert cell
"hello"
Insert cell
s = "hello"
Insert cell
`This is the first sentence.
This is the second sentence.
`
Insert cell
viewof textColor = Inputs.color({label: "Favorite color", value: "#4682b4"})
Insert cell
<p style="color:${textColor}">This is looking fanstastic</p>
Insert cell
typeof s
Insert cell
Insert cell
true
Insert cell
y = false
Insert cell
typeof y
Insert cell
Insert cell
range = ["ixd", "inxd", "dre", "ud"]
Insert cell
range[0]
Insert cell
Insert cell
options = ({
width: 100,
height: 200,
15: "hello",
"two words": 2
})
Insert cell
options.width
Insert cell
options["width"]
Insert cell
options[15]
Insert cell
Insert cell
numRange = [1, 9, 6, 8, 9]
Insert cell
numRange.length
Insert cell
numRange.sort()
Insert cell
// Our own functions
function double(x) {
let y = x + x;
return y;
}
Insert cell
double(6)
Insert cell
Insert cell
Insert cell
Insert cell
dataString = `Area,Sales,Profit
North,5,2
East,25,8
West,15,6
South,20,5
Central,10,3`
Insert cell
// Array of Objects
data = d3.csvParse(dataString)
Insert cell
data
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Plot.plot({
marks: [Plot.frame()]
})
Insert cell
Plot.plot({
width: 800,
title: "Sample Sales vs Profit",
marks: [
Plot.frame({ fill: "red" }),
// Plot.ruleY([0]),
Plot.barY(data, {
x: "Area",
y: "Sales",
sort: { x: "y", reverse: true }
}),
Plot.ruleX([0])
]
})
Insert cell
Plot.plot({
width: 800,
title: "Sample Sales vs Profit",
marks: [
Plot.barY(data, {
x: "Area",
y: "Sales",
sort: { x: "y", reverse: true }
}),
Plot.barY(data, {
x: "Area",
y: "Profit",
sort: { x: "y", reverse: true },
fill: "red"
}),
Plot.ruleX([0])
]
})
Insert cell
Insert cell
foldeddata = aq
.from(data)
.derive({
Cost: function Cost(d) {
return d.Sales - d.Profit;
}
})
.fold(["Cost", "Profit"], { as: ["Type", "Value"] })
Insert cell
foldeddata
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Plot.plot({
marks: [
Plot.barY(foldeddata, {
x: "Area",
y: "Value",
sort: { x: "y", reverse: true },
fill: "Type"
}),
Plot.ruleY([0])
]
})
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