Horizontal Stacked Bar Chart Timeline

[scottfranz]

Hello,

I am trying to create a horizontal stacked bar chart that shows survey administrations of a longitudinal panel study. I would like each bar to represent each cohort. Then I would like to color a portion of each bar based on how many follow-up surveys they should have completed (how far along in the study they are).

I am using this observable example to visualize each panel cohort. Plot: Civilizations timeline / Observable | Observable
So the X-axis is time (or age) and the Y-axis is the cohort. But I would like to color portions of each bar based on how many follow up surveys they completed. Similar to something like this example Plot: Horizontal stacked bars / Observable | Observable

Except instead of grouping “counts” of a categorical variable like party affiliation. I would like to color portions of the bars based on ranges in time where they should have filled out a follow up surveys. Because I am fabricating this data and do not have a bunch of rows to count. Is this possible am I on the wrong track with the bar mark? I have not created a variable to use to color the bars yet but essentially I want the first 10 years to be a color, then the next 10 years to be a different color to denote which follow-up period they are in. Here is the code I have so far.

mtf = { 
  const subset = data.map(
    ({ Panel, Start, End, AgeStart, AgeEnd }) => ({
      Panel: Panel,
      Start: parser(Start),
      End: parser(End),
      AgeStart: AgeStart,
      AgeEnd: AgeEnd
    })
  );

  return subset;
}

formatter = d3.timeFormat("%Y")

Plot.plot({
  marginLeft: 130,
  axis: null,
  x: {
    axis: "top",
    grid: true,
  },
  marks: [
    Plot.barX(mtf, {
      x1: "Start",
      x2: "End",
      y: "Panel",
      sort: {y: "x1"}
    }),
    Plot.text(mtf, {
      x: "Start",
      y: "Panel",
      text: (d) => `${formatter(d.Start)}`,
      textAnchor: "end",
      dx: -3
    })
  ]
})

Here is the csv file I created mtfdata.csv. Also here is the bar chart I just need to figure out how to color portions of the bars.

[scottfranz]

I was also able to formulate the data in a different way to try to color the bars. Here is the new data
panel.csv. Here is the code:

Plot.plot({
  //x: { tickFormat: Math.abs, label: "# of answers" },
  y: { tickSize: 0 },
  color: {
    legend: true,
    domain: [
      "12th Grade",
      "1st Follow Up",
      "2nd Follow Up",
      "3rd Follow Up",
      "4th Follow Up",
      "5th Follow Up",
      "6th Follow Up",
      "7th Follow Up",
      "8th Follow Up",
      "9th Follow Up",
      "10th Follow Up",
      "11th Follow Up",
      "12th Follow Up",
      "13th Follow Up",
    ],
    scheme: "blues"
  },
  marks: [
    Plot.barX(
      panel,
      Plot.groupY(
        { x: "count" },
        {
          fill: "Age Group",
          order: [
            "12th Grade",
            "1st Follow Up",
            "2nd Follow Up",
            "3rd Follow Up",
            "4th Follow Up",
            "5th Follow Up",
            "6th Follow Up",
            "7th Follow Up",
            "8th Follow Up",
            "9th Follow Up",
            "10th Follow Up",
            "11th Follow Up",
            "12th Follow Up",
            "13th Follow Up",
          ],
          y: "Panel"
        }
      )
    )
  ]
})

Here is the output:

Instead of the frequency of counts I would like the x-axis to be years.

[scottfranz]

I am getting closer to what I want. I figured out a better way to organize the data mtfdata3.csv. Now I am having trouble with both sorting on the "x1" channel and with my text labels. For some reason the sorting is different around "Cohort 21". Also how do I just show the first text label but not the others? Thanks!

Plot.plot({
  marginLeft: 130,
  axis: null,
  color: {
     legend: true
  },
  x: {
    axis: "top",
    grid: true,
  },
  marks: [
    Plot.barX(mtf, {
      x1: "Start",
      x2: "End",
      y: "Cohort",
      fill: "Group",
      sort: {y: "x1"}
    }),
    Plot.text(mtf, {
      x: "Start",
      y: "Cohort",
      text: "Cohort",
      textAnchor: "end",
      dx: -3
    })
  ]
})

[scottfranz]

Something about all Cohorts above 32 having not having a 5-Year Follow Up value. I am confused about the default sorting behavior as well. Here is a picture.

[scottfranz]

Almost have it where I want it. I had to manually set the domain on the y axis. Now I am hoping to add text labels on the right side that show the age.

[Fil]

the default reducer for the sort option is "max"; maybe you want to try "min" instead:

sort: {y: "x1", reduce: "min"}

or in long form:

sort: {y: {value: "x1", reduce: "min"}}

[scottfranz]

Thanks that helped!