Data visualization and analysis at the University of Washington, Seattle.
42
6.022e23 // holy mole-y
+"1.23"
+"Am I a number?"
isNaN(1 / 'monkey boots')
(1 + Math.sqrt(5)) / 2 // a φ-nominal number
Math.random()
true
!false
!0
false
!true
!1
true || false
true && false
2 + 2 === 4
2 + 2 !== "jello"
2 < 1
4 >= 3 + 1
"I" < "you" // whoa
1 == "1"
"1" + 1 == 11
"1" + 1 === 11
"I am a string."
'I am also a string.'
"I am conflicted.'
"0123456789".length
'better' + ' together'
`A backtick-quoted (\`) string with ${'javascript'.toUpperCase() + ' code'} inside it.`
"STOP SHOUTING!".toLowerCase()
' white space surrounds me '.trim() + '?'
"slice".slice(2) // slice from the left
"dice".slice(-3) // now slice from the right
"baby".slice() // now turn it out
"comma,separated,values".split(',')
array = ['a', 'b', 'c']
array.length
array[0] // first element
array[1] // second element
array[2] // third element
array[3] // oops
array[-1] // oops, I did it again
array.indexOf('b') // find the first instance, from the left
array.slice(1) // slice from the left
array.slice(-2) // now slice from the right
array.slice(1, -1) // now slice from both sides
array.join(' -> ') // turn an array into a string
array.concat('d') // combine values into a new array
'I put my thing down split it and reverse it'.split('').reverse().join('')
object = ({key: "value", anotherKey: "anotherValue"})
object.key
object.anotherKey
Object.keys(object) // return an array of property key strings
Object.values(object) // return an array of property values
Object.assign({target: 'me', value: 0}, {source: 'thing1', value: 1}, {source: 'thing2'})
data = [
{city: "Seattle", annual_hours_sunshine: 2163, annual_precipitation: 37.13},
{city: "New York", annual_hours_sunshine: 2677, annual_precipitation: 46.23},
{city: "Chicago", annual_hours_sunshine: 2504, annual_precipitation: 39.04}
]
function addMe(a, b) { // function signature: name and input arguments
return a + b; // function body, with return statement for output
}
addMe(2, 2)
addMe('better', ' together')
addMe(1, '1') // wat?
addMe('💕', 'U', '😍') // sorry heart-eyes, extra arguments are ignored
addMe('1') // something from nothing
addMe() // undefined + undefined is not a number
addMe2 = (a, b) => a + b
addMe2(2, 2)
precip = d => d.annual_precipitation
precip(data[0]) // emerald city
precip(data[1]) // yr city's a sucker
data // expand the inspector above to see the values
hoursPerYear = 365 * 24 // yes yes, but let's ignore leap years for now
data.map(d => d.annual_hours_sunshine / hoursPerYear) // d is for datum
data.filter(d => d.annual_precipitation < 40).map(d => d.city)
'hello cell'
retort = 'hello yourself'
md`Markdown includes _italicized_, **bold**, and \`monospace\` text, as well as [hyperlinks](https://www.youtube.com/watch?v=xfr64zoBTAQ).
- Oh, and of course lists.
- We musn't ever forget,
- the lists.
`
tex`i\hbar \frac{\partial \Psi}{\partial t} = -\frac{\hbar^2}{2m}
\frac{\partial^2 \Psi}{\partial x^2} + V \Psi` // how's your cat?
`You said "${retort}"`
viewof slider = html`<input type="range" value=42 min=0 max=100 step=1></input>`
tex`f(x) = x^2 \rightarrow f(${slider}) = ${slider}^2 = ${slider * slider}`
result = {
const myConstant = '_How do I love thee?_ Let me count the ways: ';
let myVariable = [];
// you didn't think you'd make it to the end without a for loop, did you?
for (let i = 0; i < 3; ++i) {
// push adds an element to an array, updating it in place
myVariable.push(`**${i + 1}...**`);
}
// you can use tagged templates anywhere!
return md`${myConstant + myVariable.join(' ')}`;
}
d3 = require('d3-array')
d3.mean(data, d => d.annual_precipitation)
d3.min(data, d => d.annual_precipitation)
d3.max(data, d => d.annual_precipitation)
import {printTable} from '@uwdata/data-utilities'
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.
