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'
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.