render({
mark: { type: 'bar', tooltip: true },
data: { values: census },
encoding: {
x: {
aggregate: 'sum', field: 'people',
title: 'Sum of people (all years)'
}
},
width: 640
})
render({
mark: { type: 'bar', tooltip: true },
data: { values: census },
encoding: {
x: { field: 'year', type: 'O', axis: { labelAngle: 0 } }, // <-- add year to x channel
y: { aggregate: 'sum', field: 'people' } // <-- move sum(people) to y channel
},
width: 640,
height: 300
})
render({
mark: { type: 'bar', tooltip: true },
data: { values: census },
encoding: {
x: { field: 'year', type: 'O', axis: { labelAngle: 0 } },
y: { aggregate: 'sum', field: 'people' },
color: { field: 'sex', type: 'N' } // <- add sex to color channel
},
width: 640,
height: 300
})
render({
mark: { type: 'bar', tooltip: true },
data: { values: census },
encoding: {
column: { field: 'sex', type: 'N' }, // <-- add sex to column channel (redundant encoding)
x: { field: 'year', type: 'O', axis: { labelAngle: 0 } },
y: { aggregate: 'sum', field: 'people' },
color: { field: 'sex', type: 'N' }
},
width: 400,
height: 300
})
render({
mark: { type: 'bar', tooltip: true },
data: { values: census },
encoding: {
column: { field: 'year', type: 'N', title: null, spacing: 5 }, // <-- move year to column channel
x: { field: 'sex', type: 'N', title: null }, // <-- move sex to x channel
y: { aggregate: 'sum', field: 'people' },
color: { field: 'sex', type: 'N' }
},
height: 300
})
render({
mark: { type: 'bar', tooltip: true },
data: { values: census },
transform: [
{ filter: 'datum.year === 2000' } // <-- look at 2000 only
],
encoding: {
column: { field: 'sex', type: 'N', title: null, spacing: 10 },
x: { aggregate: 'sum', field: 'people' }, // <-- move people to x channel
y: { field: 'age', type: 'O', scale: { reverse: true } }, // <-- add age to y channel
color: { field: 'sex', type: 'N' }
},
width: 320,
height: 300
})
census = {
const rows = await FileAttachment("census.txt").tsv({ typed: true });
return rows.map(datum => {
const marst = alias_marst.get(datum.marst); // map integer codes to string
const sex = alias_sex.get(datum.sex); // map integer codes to string
const order = -marst_domain.indexOf(marst); // add ordering field by marital status
return { ...datum, marst, sex, order }; // return new object with computed properties
});
}
alias_sex = new Map().set(1, 'Male').set(2, 'Female')
alias_marst = new Map()
.set(0, 'Unknown')
.set(1, 'Married')
.set(2, 'Married, Spouse Absent')
.set(3, 'Separated')
.set(4, 'Divorced')
.set(5, 'Widowed')
.set(6, 'Single')
marst_domain = [
'Unknown',
'Single',
'Widowed',
'Divorced',
'Separated',
'Married, Spouse Absent',
'Married'
]
colors = [
'#C7C7C7', // unknown
'#9EDAE5', // single
'#7F7F7F', // widowed
'#9467BD', // divorced
'#F7B6D2', // separated
'#FFBB78', // married, spouse absent
'#FFBB78' // married
]
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.
