Public
Edited
Sep 7, 2023
1 star
Insert cell
Insert cell
result = {
let cnt = 0;
for (let i = 1; i <= 100; i++) {
cnt = cnt + i;
}
return cnt;
}
Insert cell
Insert cell
same_result = d3.sum(d3.range(101))
Insert cell
Insert cell
Insert cell
x0 = 0.123
Insert cell
orbit = {
let x = x0;
let orbit = [x0];
for (let i = 0; i < n; i++) {
x = f(x);
orbit.push(x);
}
return orbit;
}
Insert cell
// Verbose function definition
function f(x) {
return 4 * x * (1 - x);
}

// Equivalent arrow notation
// f = (x) => 4 * x * (1 - x)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Inputs.range([-3, 3])
Insert cell
Insert cell
viewof n = Inputs.range([0, 20], { value: 10, step: 1, label: tex`n:` })
Insert cell
Insert cell
n ** 2
Insert cell
Insert cell
Insert cell
double_quoted = "I'm doing great!"
Insert cell
single_quoted = 'I\'m doing "great"!'
Insert cell
template_literal = `I'm doing "great"!
Really, I'm really doing **great**!!`
Insert cell
Insert cell
`Let's iterate ${n} times`
Insert cell
Insert cell
If ${tex`n=${n}`}, then
${tex.block`\sum_{i=1}^{n} i = \sum_{i=1}^{${n}} i = \frac{n(n+1)}{2} = \frac{${n}\times${n+1}}{2} = ${n*(n+1)/2}.`}
Insert cell
Insert cell
function f1(x) {
return x ** 2;
}
Insert cell
Insert cell
f2 = (x) => x ** 2
Insert cell
Insert cell
f1(2) == 4 && f2(2) == 4
Insert cell
Insert cell
function iterate(f, x0, n) {
let x = x0;
const output = [x];
for (let i = 0; i < n; i++) {
x = f(x);
output.push(x);
}
return output;
}
Insert cell
Insert cell
iterate((x) => x ** 2 - 1, 0.2, 15)
Insert cell
Insert cell
sum_result = {
let n = 10; // local
let s = 0;
let i = 2;
for (let i = 0; i <= n; i++) {
// i is local and runs 0 to 10 here.
s = s + i;
}
// i = 2 out here.
return [s, i * s];
}
Insert cell
Insert cell
Insert cell
A = [1, 2, 3, true, false, "good", "bad"]
Insert cell
Insert cell
A[0]
Insert cell
Insert cell
A.slice(2, 4)
Insert cell
Insert cell
A.map((x) => x ** 2)
Insert cell
Insert cell
A.filter((v) => !isNaN(v))
Insert cell
Insert cell
A.filter((v) => !isNaN(v) && v !== true && v !== false)
Insert cell
false == 0
Insert cell
Insert cell
A.join(" -- ")
Insert cell
Insert cell
A.length
Insert cell
Insert cell
// Generate some random numeric data
numeric_data = d3.range(20).map(() => d3.randomNormal(10, 2)())
Insert cell
// I recommend that you use d3.sort, rather than the
// built in array method A.sort()
d3.sort(numeric_data)
Insert cell
// The same goes for finding maxima
d3.max(numeric_data)
Insert cell
// You can also find the min and max values simultaneously
d3.extent(numeric_data)
Insert cell
Insert cell
my_object = ({ a: 1, b: "two", c: "red", "three part key": 3 })
Insert cell
Insert cell
[my_object.b, my_object["three part key"]]
Insert cell
Insert cell
data = [
{ age: 19, height: 5.51, weight: 160 },
{ age: 26, height: 6.2, weight: 174 },
{ age: 24, height: 6.33, weight: 166 },
{ age: 25, height: 5.42, weight: 169 },
{ age: 22, height: 5.53, weight: 158 },
{ age: 20, height: 6.06, weight: 170 },
{ age: 26, height: 5.34, weight: 166 },
{ age: 28, height: 6.13, weight: 175 },
{ age: 24, height: 5.88, weight: 173 },
{ age: 23, height: 5.83, weight: 179 }
]
Insert cell
Insert cell
// Sort by age
d3.sort(data, (o) => o.age)
Insert cell
Insert cell
filtered_data = data.filter((o) => o.age < 24)
Insert cell
Insert cell
filtered_data.length
Insert cell
Insert cell
function list_object_info(data_array) {
let rows = data_array.map(
(O) => `- Age: ${O.age}, height: ${O.height}, weight: ${O.weight}`
);
return md`${rows.join("\n")}`;
}
Insert cell
Insert cell
list_object_info(data)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
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