2

I am trying to create a grouped bar chart using Observable's Plot.plot in JavaScript (code is in TypeScript).

The problem is that the x-axis is showing each specific date, however I want the dates to show dynamic months or weeks, not specific dates.

This is the code:

const chart = Plot.plot({
      x: { axis: null, domain: ["Add", "Remove"],  },
      y: { tickFormat: "s", label: "↑ Access Requests", grid: true },
      color: {
        legend: true,
        type: "categorical",
        domain: ["Add", "Remove"],
        range: redGreenColorRange,
      },
      style: {
        background: "transparent",
      },
      width: 1350,
      caption: "in 2 week increments",
      facet: {
        data: groupedAddRemove,
        label: "Created Date",
        x: "createdDate",
        // thresholds: d3.utcWeeks, 
        // ^ this doesn't work, but a similar structure has worked in other projects I've seen
      },
      marks: [
        Plot.barY(groupedAddRemove, {
          x: "type",
          y: "count",
          fill: "type",
        }),
        Plot.ruleY([0]),
      ],
    });

and this is what it looks like:

Chart

I want the x-axis marks to show a dynamic version of Months, like:

X-Axis Example

My data structure either could show the "Date" as a string, or a TypeScript typeof Date object

  1. data structure with date with a type of string
  2. data structure with date with a type of Date

This is the data structure type: The 'groupedAddRemove' is an array of this type ( AddRemoveBarChartType[] )

type AddRemoveBarChartType = {
  createdDate: Date;
  count: number;
  type: "Add" | "Remove";
};

the "Type" can either be "Add" or "Remove". I had a boolean for this value previously, but the "Add" and "Remove" fit better to automatically have the legend say "Add" and "Remove". It could be changed back to a boolean if there is a better way to display it that way.

The data could be changed in other ways too, if that will simplify things. I am also open to using a D3.js implementation instead of Plot.plot.

I'm very new to Observable Plot.plot so any help is appreciated, thank you!

Adam
  • 21
  • 3

0 Answers0