Barcode chart

A barcode chart just adds a tick for each value; if the values overlap, use strokeOpacity to give a sense of density. In this example, the populations are normalized to reflect the percentage of each age class in every State.

Plot.plot({
  x: {
    grid: true,
    label: "Population (%) →",
    percent: true
  },
  y: {
    domain: ages, // in age order
    reverse: true,
    label: "↑ Age (years)",
    labelAnchor: "top"
  },
  marks: [
    Plot.ruleX([0]),
    Plot.tickX(stateage, Plot.normalizeX("sum", {z: "state", x: "population", y: "age"}))
  ]
})

const wide = await FileAttachment("data/us-population-state-age.csv").csv({typed: true});
const ages = wide.columns.slice(1);
const stateage = display(wide.flatMap(({name, ...values}) => ages.map((age) => ({state: name, age, population: values[age]}))));