Data visualization and analysis at the University of Washington, Seattle.
weather = (await require('vega-datasets@1'))['weather.csv']()
printTable(weather.slice(0, 10)) // first ten rows
printTable(weather.slice(-10)) // last ten rows
render({
mark: { type: 'area' },
data: { values: weather },
encoding: {
x: { timeUnit: 'month', field: 'date' },
y: { aggregate: 'average', field: 'temp_max' },
y2: { aggregate: 'average', field: 'temp_min' }
}
})
render({
mark: { type: 'area', opacity: 0.3 },
data: { values: weather },
encoding: {
x: { timeUnit: 'month', field: 'date' },
y: { aggregate: 'average', field: 'temp_max' },
y2: { aggregate: 'average', field: 'temp_min' },
color: { field: 'location', type: 'N' }
}
})
render({
mark: { type: 'line' },
data: { values: weather },
transform: [
{ calculate: '(datum.temp_min + datum.temp_max) / 2', as: 'temp_mid' }
],
encoding: {
x: { timeUnit: 'month', field: 'date' },
y: { aggregate: 'average', field: 'temp_mid' },
color: { field: 'location', type: 'N' }
}
})
{
const tempMinMax = {
mark: { type: 'area', opacity: 0.3 },
data: { values: weather },
encoding: {
x: { timeUnit: 'month', field: 'date' },
y: { aggregate: 'average', field: 'temp_max' },
y2: { aggregate: 'average', field: 'temp_min' },
color: { field: 'location', type: 'N' }
}
};
const tempMid = {
mark: { type: 'line' },
data: { values: weather },
transform: [
{ calculate: '(datum.temp_min + datum.temp_max) / 2', as: 'temp_mid' }
],
encoding: {
x: { timeUnit: 'month', field: 'date' },
y: { aggregate: 'average', field: 'temp_mid' },
color: { field: 'location', type: 'N' }
}
};
return render({ layer: [ tempMinMax, tempMid ] });
}
{
const tempMinMax = {
mark: { type: 'area', opacity: 0.3 },
data: { values: weather },
encoding: {
x: {
timeUnit: 'month', field: 'date',
axis: { format: '%b' },
title: null
},
y: {
aggregate: 'average', field: 'temp_max',
title: 'Avg. Temperature °C'
},
y2: { aggregate: 'average', field: 'temp_min' },
color: { field: 'location', type: 'N' }
}
};
const tempMid = {
mark: { type: 'line' },
data: { values: weather },
transform: [
{ calculate: '(datum.temp_min + datum.temp_max) / 2', as: 'temp_mid' }
],
encoding: {
x: { timeUnit: 'month', field: 'date' },
y: { aggregate: 'average', field: 'temp_mid' },
color: { field: 'location', type: 'N' }
}
};
return render({ layer: [ tempMinMax, tempMid ] });
}
{
const tempMinMax = {
mark: { type: 'area', opacity: 0.3 },
encoding: {
x: {
timeUnit: 'month', field: 'date',
axis: { format: '%b' },
title: null
},
y: {
aggregate: 'average', field: 'temp_max',
title: 'Avg. Temperature °C'
},
y2: { aggregate: 'average', field: 'temp_min' },
color: { field: 'location', type: 'N' }
}
};
const tempMid = {
mark: { type: 'line' },
encoding: {
x: { timeUnit: 'month', field: 'date' },
y: { aggregate: 'average', field: 'temp_mid' },
color: { field: 'location', type: 'N' }
}
};
return render({
layer: [ tempMinMax, tempMid ],
data: { values: weather },
transform: [
{ calculate: '(datum.temp_min + datum.temp_max) / 2', as: 'temp_mid' }
]
});
}
render({
mark: { type: 'line', interpolate: 'monotone', stroke: 'grey' },
data: { values: weather },
transform: [
{ filter: 'datum.location == "Seattle"' }
],
encoding: {
x: { timeUnit: 'month', field: 'date', title: null },
y: { aggregate: 'average', field: 'precipitation', title: 'Precipitation' }
}
})
{
const tempMinMax = {
mark: { type: 'area', opacity: 0.3 },
encoding: {
x: {
timeUnit: 'month', field: 'date',
axis: { format: '%b' },
title: null
},
y: {
aggregate: 'average', field: 'temp_max',
title: 'Avg. Temperature °C'
},
y2: { aggregate: 'average', field: 'temp_min' }
}
};
const precip = {
mark: { type: 'line', interpolate: 'monotone', stroke: 'grey' },
encoding: {
x: { timeUnit: 'month', field: 'date', title: null },
y: { aggregate: 'average', field: 'precipitation', title: 'Precipitation' }
}
};
return render({
layer: [ tempMinMax, precip ],
data: { values: weather },
transform: [
{ filter: 'datum.location == "Seattle"' }
]
});
}
{
const tempMinMax = {
mark: { type: 'area', opacity: 0.3 },
encoding: {
x: {
timeUnit: 'month', field: 'date',
axis: { format: '%b' },
title: null
},
y: {
aggregate: 'average', field: 'temp_max',
title: 'Avg. Temperature °C'
},
y2: { aggregate: 'average', field: 'temp_min' }
}
};
const precip = {
mark: { type: 'line', interpolate: 'monotone', stroke: 'grey' },
encoding: {
x: { timeUnit: 'month', field: 'date', title: null },
y: { aggregate: 'average', field: 'precipitation', title: 'Precipitation' }
}
};
return render({
layer: [ tempMinMax, precip ],
data: { values: weather },
transform: [
{ filter: 'datum.location == "Seattle"' }
],
resolve: {
scale: { y: 'independent' } // resolve to independent y channel scales
}
});
}
render({
mark: { type: 'bar' },
data: { values: weather },
transform: [
{ filter: 'datum.location == "Seattle"' }
],
encoding: {
x: {
field: 'temp_max', type: 'Q', bin: true,
title: 'Temperature (°C)'
},
y: { aggregate: 'count' }
}
})
{
const colors = {
domain: ['drizzle', 'fog', 'rain', 'snow', 'sun'],
range: ['#aec7e8', '#c7c7c7', '#1f77b4', '#9467bd', '#e7ba52']
};
return render({
mark: { type: 'bar' },
data: { values: weather },
transform: [
{ filter: 'datum.location == "Seattle"' }
],
encoding: {
x: {
field: 'temp_max', type: 'Q', bin: true,
title: 'Temperature (°C)'
},
y: { aggregate: 'count' },
color: { field: 'weather', type: 'N', scale: colors },
column: { field: 'weather', type: 'N' }
},
width: 150,
height: 150
});
}
{
const colors = {
domain: ['drizzle', 'fog', 'rain', 'snow', 'sun'],
range: ['#aec7e8', '#c7c7c7', '#1f77b4', '#9467bd', '#e7ba52']
};
return render({
facet: {
column: { field: 'weather' }
},
data: { values: weather },
transform: [
{ filter: 'datum.location == "Seattle"' }
],
spec: {
mark: { type: 'bar' },
encoding: {
x: {
field: 'temp_max', type: 'Q', bin: true,
title: 'Temperature (°C)'
},
y: { aggregate: 'count' },
color: { field: 'weather', type: 'N', scale: colors },
},
width: 150,
height: 150
}
});
}
{
const tempMinMax = {
mark: { type: 'area', opacity: 0.3 },
encoding: {
x: {
timeUnit: 'month', field: 'date',
axis: { format: '%b' },
title: null
},
y: {
aggregate: 'average', field: 'temp_max',
title: 'Avg. Temperature (°C)'
},
y2: { aggregate: 'average', field: 'temp_min' },
color: { field: 'location', type: 'N' }
}
};
const tempMid = {
mark: { type: 'line' },
encoding: {
x: { timeUnit: 'month', field: 'date' },
y: { aggregate: 'average', field: 'temp_mid' },
color: { field: 'location', type: 'N' }
}
};
return render({
facet: {
column: { field: 'location' }
},
spec: {
layer: [ tempMinMax, tempMid ]
},
data: { values: weather },
transform: [
{ calculate: '(datum.temp_min + datum.temp_max) / 2', as: 'temp_mid' }
]
});
}
{
const tempMinMax = {
mark: { type: 'area', opacity: 0.3 },
encoding: {
x: {
timeUnit: 'month', field: 'date',
axis: { format: '%b' },
title: null
},
y: {
aggregate: 'average', field: 'temp_max',
title: 'Avg. Temperature (°C)'
},
y2: { aggregate: 'average', field: 'temp_min' },
color: { field: 'location', type: 'N' }
}
};
const tempMid = {
mark: { type: 'line' },
encoding: {
x: { timeUnit: 'month', field: 'date' },
y: { aggregate: 'average', field: 'temp_mid' },
color: { field: 'location', type: 'N' }
}
};
return render({
facet: {
column: { field: 'location' }
},
spec: {
layer: [ tempMinMax, tempMid ]
},
data: { values: weather },
transform: [
{ calculate: '(datum.temp_min + datum.temp_max) / 2', as: 'temp_mid' }
],
resolve: { axis: { y: 'independent' } }
});
}
{
const tempMinMax = {
mark: { type: 'area', opacity: 0.3 },
encoding: {
x: {
timeUnit: 'month', field: 'date',
axis: { format: '%b' },
title: null
},
y: {
aggregate: 'average', field: 'temp_max',
title: 'Avg. Temperature (°C)'
},
y2: { aggregate: 'average', field: 'temp_min' },
color: { field: 'location', type: 'N' }
}
};
const tempMid = {
mark: { type: 'line' },
encoding: {
x: { timeUnit: 'month', field: 'date' },
y: { aggregate: 'average', field: 'temp_mid' },
color: { field: 'location', type: 'N' }
}
};
return render({
facet: {
column: { field: 'location' }
},
spec: {
layer: [ tempMinMax, tempMid ]
},
data: { values: weather },
transform: [
{ calculate: '(datum.temp_min + datum.temp_max) / 2', as: 'temp_mid' }
],
resolve: { scale: { y: 'independent' } }
});
}
render({
mark: { type: 'line' },
data: { values: weather },
encoding: {
x: { timeUnit: 'month', field: 'date', title: null },
y: { aggregate: 'average', field: 'temp_max' },
color: { field: 'location', type: 'N' }
}
})
{
const base = (encoding) => {
return {
mark: { type: 'line' },
data: { values: weather },
encoding: {
x: { timeUnit: 'month', field: 'date', title: null },
...encoding,
color: { field: 'location', type: 'N' }
},
width: 240,
height: 180
};
};
const temp = base({ y: { aggregate: 'average', field: 'temp_max' } });
const precip = base({ y: { aggregate: 'average', field: 'precipitation' } });
const wind = base({ y: { aggregate: 'average', field: 'wind' } });
return render({
hconcat: [temp, precip, wind]
});
}
render({
repeat: {
column: ['temp_max', 'precipitation', 'wind']
},
spec: {
mark: { type: 'line' },
data: { values: weather },
encoding: {
x: { timeUnit: 'month', field: 'date', title: null },
y: { aggregate: 'average', field: { repeat: 'column' } },
color: { field: 'location', type: 'N' }
},
width: 240,
height: 180
}
})
render({
repeat: {
row: ['temp_max', 'precipitation', 'wind'],
column: ['wind', 'precipitation', 'temp_max']
},
data: { values: weather },
transform: [
{ filter: 'datum.location == "Seattle"' }
],
spec: {
mark: { type: 'circle', size: 15, opacity: 0.5 },
encoding: {
x: { field: { repeat: 'column' }, type: 'Q' },
y: { field: { repeat: 'row' }, type: 'Q' }
},
width: 150,
height: 150
}
})
{
const basic1 = {
mark: { type: 'bar' },
data: { values: weather },
transform: [
{ filter: 'datum.location == "Seattle"' }
],
encoding: {
x: { timeUnit: 'month', field: 'date', type: 'O', title: 'Month' },
y: { aggregate: 'average', field: 'temp_max' }
}
};
const basic2 = {
mark: { type: 'rule', stroke: 'firebrick' },
data: { values: weather },
transform: [
{ filter: 'datum.location == "Seattle"' }
],
encoding: {
y: { aggregate: 'average', field: 'temp_max' }
}
};
return render({
hconcat: [basic1, basic2]
});
}
render({
repeat: {
column: ['temp_max', 'precipitation', 'wind']
},
data: { values: weather },
transform: [
{ filter: 'datum.location == "Seattle"' }
],
spec: {
layer: [
{
mark: { type: 'bar' },
encoding: {
x: { timeUnit: 'month', field: 'date', type: 'O', title: 'Month' },
y: { aggregate: 'average', field: { repeat: 'column' } }
}
},
{
mark: { type: 'rule', stroke: 'firebrick' },
encoding: {
y: { aggregate: 'average', field: { repeat: 'column' } }
}
}
],
width: 200,
height: 150
}
})
{
const splom = {
repeat: {
row: ['temp_max', 'precipitation', 'wind'],
column: ['wind', 'precipitation', 'temp_max']
},
spec: {
mark: { type: 'circle', size: 15, opacity: 0.5 },
encoding: {
x: { field: { repeat: 'column' }, type: 'Q' },
y: { field: { repeat: 'row' }, type: 'Q' }
},
width: 125,
height: 125
}
};
const dateHist = {
repeat: {
row: ['temp_max', 'precipitation', 'wind']
},
spec: {
layer: [
{
mark: { type: 'bar' },
encoding: {
x: { timeUnit: 'month', field: 'date', type: 'O', title: 'Month' },
y: { aggregate: 'average', field: { repeat: 'row' } }
}
},
{
mark: { type: 'rule', stroke: 'firebrick' },
encoding: {
y: { aggregate: 'average', field: { repeat: 'row' } }
}
}
],
width: 175,
height: 125
}
};
const tempHist = {
facet: {
column: { field: 'weather' }
},
spec: {
mark: { type: 'bar' },
encoding: {
x: {
field: 'temp_max', type: 'Q', bin: true,
title: 'Temperature (°C)'
},
y: { aggregate: 'count' },
color: {
field: 'weather', type: 'N',
scale: {
domain: ['drizzle', 'fog', 'rain', 'snow', 'sun'],
range: ['#aec7e8', '#c7c7c7', '#1f77b4', '#9467bd', '#e7ba52']
}
}
},
width: 115,
height: 100
}
};
return render({
data: { values: weather },
transform: [
{ filter: 'datum.location == "Seattle"' }
],
title: 'Seattle Weather Dashboard',
vconcat: [
{ hconcat: [splom, dateHist] },
tempHist
],
resolve: { legend: { color: 'independent' } },
config: { axis: { labelAngle: 0 } }
});
}
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.
