I like teaching, computing, and teaching computing
Unlisted
Edited
May 14
// numbers
10
10 + 4.3
Math.PI
'This is a string'
"This is also a string"
`The answer to life is ${21 * 2}`
random = Math.random()
`This is a random number: ${random}. It is ${random > 0.5 ? "greater than " : "less than "} 0.5`
true
!false
!1
!0
arr = ['red', 'white', 'green']
arr.push('blue')
arr[3]
arr[-1]
arr.slice(2, 4)
[[1, 2], [3, 4], [5, 6]].flat()
arr.indexOf('blue')
arr.indexOf('goldenrod')
arr.slice(2, 4)
// basic syntax
course = ({
department: 'CSC',
number: 477,
name: 'Scientific and Information Visualization'
})
course.department
course['department']
// Object.keys() and Object.values()
Object.keys(course)
Object.values(course)
// spread syntax
/*
{
department: 'CSC',
number: 477,
name: 'Scientific and Information Visualization',
roomNumber: '14-232b'
}
*/
Object.assign(course, { number: 4077, roomNumber: '14-232b' })
// spread syntax
({ ...course, roomNumber: '14-232b', number: 4077 })
// function syntax
function addTwo(a, b) {
return a + b
}
// arrow syntax
addTwoAlt = (a, b) => a + b;
max = (a, b) => a > b ? a : b;
to_string = n => n.toString()
addTwo(2, addTwoAlt(2, 5))
// functions are values; first-class functions
weather.find(obj => obj.month === 'March').temp
weather
.filter(obj => obj.precip > 0)
.map(obj => obj.month)
[1, 2, 3, 4].reduce((accumulator, current) => accumulator > current ? accumulator : current)
weather.every(obj => obj.precip > 0)
{
const result = []
for (const obj of weather) {
if (obj.precip > 0) {
result.push(obj.month)
}
}
return result
}
// won't deal with them too much directly, but worth knowing what they are
10
ten = 10
ten + 12
codeBlockValue = {
let s = ''; // variable can be re-assigned
for (let i = 0; i < 10; i++) {
s = s + ', ' + i;
}
return s.trim().replace(',', '');
}
a = b + 10 // This cell references "b", which is defined in the next cell and changes every 3 seconds
b = {
let val = 0; // "val" is LOCAL to this code block, and cannot be accessed in other cells.
while (true) {
// "yield" is like "return", except instead of giving up control after returning the value,
// this cell will "return" the value val++ and then come back to this line.
yield Promises.delay(3000, val++); // Wait 3 seconds, then increment val and yield the value.
}
}
viewof fontSize = Inputs.range([0.1, 2], { step: 0.1, value: 1, label: 'Font size' })
fontSize + 10
<div style='font-size: ${fontSize}em'>
Try dragging the slider back and forth! Then expand this cell and think about what's happening here.
</div>
For example, 2 + 3 is ${2 + 3}
randomNum = {
return Math.floor(Math.random() * (10));
}
// 👈🏽 Note that this is a JavaScript cell
html`<b>This is HTML text using Observable's facilities for <a href="https://observablehq.com/@observablehq/htl"><i>Tagged templates.</i></a></b>`
// Similarly for markdown
md`**This is Markdown content using Observable's facilities for [_Tagged templates_](https://observablehq.com/@observablehq/htl).**`
${flag()} ${flag('pause')} ${flag('note')} ${flag('alert')} ${flag('custom', 'white', 'plum')}
// d3.range
// d3.mean, d3.sum, d3.deviation
// d3.extent
// d3.median, d3.quantile
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.
