U.S. Population 1850-2000

Sum of People Across All Census Decades

render({
  mark: { type: 'bar', tooltip: true },
  data: { values: census },
  encoding: {
    x: {
      aggregate: 'sum', field: 'people',
      title: 'Sum of people (all years)',
      axis: { format: ',d' }
    }
  },
  width: 640
})

People by Census Decade

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' }
  },
  width: 640,
  height: 300
})

People by Census Decade and Sex (Stacked)

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
})

People by Census Decade and Sex (Side-by-Side)

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
})

People by Census Decade and Sex (Grouped)

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
})

Population Pyramid for 2000 (Take 1)

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
})

Population Pyramid for 2000 (Take 2)

Interactive Pyramid

Interactive Pyramid by Marital Status

Interactive Pyramid by Marital Status (Normalized)

Data Preparation

const rows = await FileAttachment('../../../data/census.txt').tsv({ typed: true });
const census = 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
});

const alias_sex = new Map().set(1, 'Male').set(2, 'Female')

const 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')

const marst_domain = [
  'Unknown',
  'Single',
  'Widowed',
  'Divorced',
  'Separated',
  'Married, Spouse Absent',
  'Married'
]

const colors = [
  '#C7C7C7', // unknown
  '#9EDAE5', // single
  '#7F7F7F', // widowed
  '#9467BD', // divorced
  '#F7B6D2', // separated
  '#FFBB78', // married, spouse absent
  '#FFBB78'  // married
]