Data visualization and analysis at the University of Washington, Seattle.
data = (await require('vega-datasets@1'))['gapminder.json']()
md`${data.length} rows, ${Object.keys(data[0]).length} columns!`
printTable(data.slice(0, 10))
data2000 = data.filter(d => d.year === 2000)
printTable(data2000.slice(0, 10))
render({
mark: 'point',
data: { values: data2000 },
encoding: {
x: { field: 'fertility', type: 'Q' } // we can use 'Q' or 'quantitative'
}
})
render({
mark: 'point',
data: { values: data2000 },
encoding: {
x: { field: 'fertility', type: 'Q' },
y: { field: 'cluster', type: 'O' } // we can use 'O' or 'ordinal'
}
})
render({
mark: 'point',
data: { values: data2000 },
encoding: {
x: { field: 'fertility', type: 'Q' },
y: { field: 'life_expect', type: 'Q' }
}
})
render({
mark: 'point',
data: { values: data2000 },
encoding: {
x: { field: 'fertility', type: 'Q', scale: { zero: false } },
y: { field: 'life_expect', type: 'Q', scale: { zero: false } }
}
})
render({
mark: 'point',
data: { values: data2000 },
encoding: {
x: { field: 'fertility', type: 'Q' },
y: { field: 'life_expect', type: 'Q' },
size: { field: 'pop', type: 'Q' }
}
})
render({
mark: 'point',
data: { values: data2000 },
encoding: {
x: { field: 'fertility', type: 'Q' },
y: { field: 'life_expect', type: 'Q' },
size: { field: 'pop', type: 'Q', scale: { range: [0, 1000] } }
}
})
render({
mark: 'point',
data: { values: data2000 },
encoding: {
x: { field: 'fertility', type: 'Q' },
y: { field: 'life_expect', type: 'Q' },
size: { field: 'pop', type: 'Q', scale: { range: [0, 1000] } },
color: { field: 'cluster', type: 'N' } // we can use 'N' or 'nominal'
}
})
render({
mark: { type: 'point', filled: true },
data: { values: data2000 },
encoding: {
x: { field: 'fertility', type: 'Q' },
y: { field: 'life_expect', type: 'Q' },
size: { field: 'pop', type: 'Q', scale: { range: [0, 1000] } },
color: { field: 'cluster', type: 'N' }
}
})
render({
mark: { type: 'point', filled: true },
data: { values: data2000 },
encoding: {
x: { field: 'fertility', type: 'Q' },
y: { field: 'life_expect', type: 'Q' },
size: { field: 'pop', type: 'Q', scale: { range: [0, 1000] } },
color: { field: 'cluster', type: 'N' },
opacity: { value: 0.5 }
}
})
render({
mark: { type: 'point', filled: true },
data: { values: data2000 },
encoding: {
x: { field: 'fertility', type: 'Q' },
y: { field: 'life_expect', type: 'Q' },
size: { field: 'pop', type: 'Q', scale: { range: [0, 1000] } },
color: { field: 'cluster', type: 'N' },
opacity: { value: 0.5 },
shape: { field: 'cluster', type: 'N' }
}
})
render({
mark: { type: 'point', filled: true },
data: { values: data2000 },
encoding: {
x: { field: 'fertility', type: 'Q' },
y: { field: 'life_expect', type: 'Q' },
size: { field: 'pop', type: 'Q', scale: { range: [0, 1000] } },
color: { field: 'cluster', type: 'N' },
opacity: { value: 0.5 },
tooltip: { field: 'country', type: 'N' }
}
})
render({
mark: { type: 'point', filled: true },
data: { values: data2000 },
encoding: {
x: { field: 'fertility', type: 'Q' },
y: { field: 'life_expect', type: 'Q' },
size: { field: 'pop', type: 'Q', scale: { range: [0, 1000] } },
color: { field: 'cluster', type: 'N' },
opacity: { value: 0.5 },
tooltip: { field: 'country', type: 'N' },
order: { field: 'pop', sort: 'descending' }
}
})
render({
mark: { type: 'point', filled: true },
data: { values: data2000 },
encoding: {
x: { field: 'fertility', type: 'Q' },
y: { field: 'life_expect', type: 'Q' },
size: { field: 'pop', type: 'Q', scale: { range: [0, 1000] } },
color: { field: 'cluster', type: 'N' },
opacity: { value: 0.5 },
order: { field: 'pop', sort: 'descending' },
tooltip: [
{ field: 'country', type: 'N' },
{ field: 'fertility', type: 'Q' },
{ field: 'life_expect', type: 'Q' }
]
}
})
render({
mark: { type: 'point', filled: true },
data: { values: data2000 },
encoding: {
x: { field: 'fertility', type: 'Q' },
y: { field: 'life_expect', type: 'Q' },
size: { field: 'pop', type: 'Q', scale: { range: [0, 1000] } },
color: { field: 'cluster', type: 'N' },
opacity: { value: 0.5 },
order: { field: 'pop', sort: 'descending' },
column: { field: 'cluster', type: 'N' }
}
})
render({
mark: { type: 'point', filled: true },
data: { values: data2000 },
encoding: {
x: { field: 'fertility', type: 'Q' },
y: { field: 'life_expect', type: 'Q' },
size: {
field: 'pop', type: 'Q', scale: { range: [0, 1000] },
legend: { orient: 'bottom', titleOrient: 'left' }
},
color: { field: 'cluster', type: 'N', legend: null },
opacity: { value: 0.5 },
order: { field: 'pop', sort: 'descending' },
column: { field: 'cluster', type: 'N' }
},
width: 130,
height: 130
})
render({
mark: { type: 'point' },
data: { values: data2000 },
encoding: {
x: { field: 'fertility', type: 'Q' },
y: { field: 'cluster', type: 'N' },
shape: { field: 'cluster', type: 'N' }
}
})
render({
mark: { type: 'point', filled: true, size: 100 },
data: { values: data2000 },
encoding: {
x: { field: 'fertility', type: 'Q' },
y: { field: 'cluster', type: 'N' },
shape: { field: 'cluster', type: 'N' }
}
})
render({
mark: { type: 'circle', size: 100 },
data: { values: data2000 },
encoding: {
x: { field: 'fertility', type: 'Q' },
y: { field: 'cluster', type: 'N' }
}
})
render({
mark: { type: 'square', size: 100 },
data: { values: data2000 },
encoding: {
x: { field: 'fertility', type: 'Q' },
y: { field: 'cluster', type: 'N' }
}
})
render({
mark: { type: 'tick' },
data: { values: data2000 },
encoding: {
x: { field: 'fertility', type: 'Q' },
y: { field: 'cluster', type: 'N' }
}
})
render({
mark: { type: 'bar' },
data: { values: data2000 },
encoding: {
x: { field: 'country', type: 'N' },
y: { field: 'pop', type: 'Q' }
}
})
render({
mark: { type: 'bar' },
data: { values: data2000 },
encoding: {
x: { field: 'cluster', type: 'N' },
y: { field: 'pop', type: 'Q' },
color: { field: 'country', type: 'N', legend: null },
tooltip: { field: 'country', type: 'N' }
}
})
render({
mark: { type: 'bar' },
data: { values: data2000 },
encoding: {
x: { aggregate: 'min', field: 'life_expect' },
x2: { aggregate: 'max', field: 'life_expect' },
y: { field: 'cluster', type: 'N' }
}
})
render({
mark: { type: 'line' },
data: { values: data },
encoding: {
x: { field: 'year', type: 'O' },
y: { field: 'fertility', type: 'Q' },
color: { field: 'country', type: 'N', legend: null },
tooltip: { field: 'country', type: 'N' }
},
width: 400
})
render({
mark: { type: 'line', strokeWidth: 3, opacity: 0.5, interpolate: 'monotone' },
data: { values: data },
encoding: {
x: { field: 'year', type: 'O' },
y: { field: 'fertility', type: 'Q' },
color: { field: 'country', type: 'N', legend: null },
tooltip: { field: 'country', type: 'N' }
},
width: 400
})
render({
mark: { type: 'line', opacity: 0.5 },
data: { values: data.filter(d => d.year === 1955 || d.year === 2005) },
encoding: {
x: { field: 'year', type: 'O', scale: { padding: 0.1 } },
y: { field: 'pop', type: 'Q' },
color: { field: 'country', type: 'N', legend: null },
tooltip: { field: 'country', type: 'N' }
},
width: { step: 100 }
})
dataUS = data.filter(d => d.country === 'United States')
render({
mark: { type: 'area' },
data: { values: dataUS },
encoding: {
x: { field: 'year', type: 'O' },
y: { field: 'fertility', type: 'Q' }
}
})
render({
mark: { type: 'area', interpolate: 'monotone' },
data: { values: dataUS },
encoding: {
x: { field: 'year', type: 'O' },
y: { field: 'fertility', type: 'Q' }
}
})
dataNA = data.filter(d => {
return d.country === 'United States'
|| d.country === 'Canada'
|| d.country === 'Mexico';
})
render({
mark: { type: 'area' },
data: { values: dataNA },
encoding: {
x: { field: 'year', type: 'O' },
y: { field: 'pop', type: 'Q' },
color: { field: 'country', type: 'N' }
}
})
render({
mark: { type: 'area' },
data: { values: dataNA },
encoding: {
x: { field: 'year', type: 'O' },
y: { field: 'pop', type: 'Q', stack: 'center' },
color: { field: 'country', type: 'N' }
}
})
render({
mark: { type: 'area', opacity: 0.5 },
data: { values: dataNA },
encoding: {
x: { field: 'year', type: 'O' },
y: { field: 'pop', type: 'Q', stack: null },
color: { field: 'country', type: 'N' }
}
})
render({
mark: { type: 'area' },
data: { values: dataNA },
encoding: {
x: { field: 'year', type: 'O' },
y: { aggregate: 'min', field: 'fertility' },
y2: { aggregate: 'max', field: 'fertility' }
},
width: { step: 40 }
})
render({
mark: { type: 'area' },
data: { values: dataNA },
encoding: {
y: { field: 'year', type: 'O' },
x: { aggregate: 'min', field: 'fertility' },
x2: { aggregate: 'max', field: 'fertility' }
},
height: { step: 40 }
})
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.
