Multiple bars side-by-side

[Hvass-Labs]

There are various posts and Notebooks relating to this issue, but I'm not sure what is the best / correct way of doing this.

My data looks something like this:

var data = [
  // Name: Foo
  { Date: new Date('1962-01-02'), Value: 0.05, Name: 'Foo' },
  { Date: new Date('1962-01-03'), Value: 0.04, Name: 'Foo' },
  { Date: new Date('1962-01-04'), Value: 0.03, Name: 'Foo' },
  { Date: new Date('1962-01-05'), Value: 0.02, Name: 'Foo' },
  { Date: new Date('1962-01-06'), Value: 0.01, Name: 'Foo' },

  // Name: Bar, different values but same dates as above.
  { Date: new Date('1962-01-02'), Value: 0.01, Name: 'Bar' },
  { Date: new Date('1962-01-03'), Value: 0.02, Name: 'Bar' },
  { Date: new Date('1962-01-04'), Value: 0.03, Name: 'Bar' },
  { Date: new Date('1962-01-05'), Value: 0.04, Name: 'Bar' },
  { Date: new Date('1962-01-06'), Value: 0.05, Name: 'Bar' },
];

I want this shown as a bar-plot with Date on the x-axis, Value on the y-axis, and the color according to Name. I would prefer the bars to be shown next to each other, rather than stacked on top of each other. I have tried the following:

Plot.plot({
  y: {
    label: null,
    zero: true,
  },
  grid: true,
  color: {
    legend: true,
  },
  style: {
    fontSize: 13,
  },
  marks: [
    Plot.frame(),

    Plot.barY(data, {x: "Date", y: "Value", stroke: "Name"}),
   ],
});

The plot shows the bars stacked on top of each other, and I would prefer them side-by-side.

When I have a lot of data-points the x-axis labels also look messy:

I'm running this in a web-site and I get the following Java-script warning:

Warning: some data associated with the x scale are dates. Dates are typically associated with a "utc" or "time" scale rather than a "band" scale. If you are using a bar mark, you probably want a rect mark with the interval option instead; if you are using a group transform, you probably want a bin transform instead. If you want to treat this data as ordinal, you can specify the interval of the x scale (e.g., d3.utcDay), or you can suppress this warning by setting the type of the x scale to "band".

How can I show the bars side-by-side, and fix the x-axis labels?

Thanks!

[Fil]

Here's a way:

    Plot.rectY(data, {
      x1: (d) => d3.utcHour.offset(d.Date, d.Name === "Bar" ? 8 : 0),
      x2: (d) => d3.utcHour.offset(d.Date, d.Name === "Bar" ? 16 : 8),
      y: "Value",
      fill: "Name"
    })

[Hvass-Labs]

Thanks! I can grasp what you're doing here, but how would you generalize this in an elegant way to an arbitrary number of names?

[Fil]

I would certainly divide foo (the interval) by bar (the number of bars).

[Hvass-Labs]

Your suggestion doesn't seem to scale very well, because I would need to make if-else conditions for each value of d.Name, unless there is a more elegant way of doing it?

[Fil]

This is a general programming question, nothing specific to Plot. We're here to support you with using Plot, but we can't do your work for you. Thanks for your understanding.

[Hvass-Labs]

I disagree. This is very much a Plot issue. If it is beneath you to help people, then please get a junior developer to answer these questions. Your curtness and belittling comment is also not very constructive.

I tried the following:

const mapx = {'Foo': 0, 'Bar': 2, 'Baz': 4};

// ...

Plot.rectY(data, {
  x1: (d) => d3.utcWeek.offset(d.Date, mapx[d.Name]),
  x2: (d) => d3.utcWeek.offset(d.Date, mapx[d.Name]+2),
  y: "Value",
  fill: "Name"
}),

This works but it is a quite hacky solution. For others who want to use this solution, you may have to use e.g. utcDay or utcMonth instead depending on the spacing of your data-points.

Faceting has a much more elegant syntax, but I couldn't get it working properly with a lot of data on the x-axis.

[mbostock]

Probably you want to use faceting here, along x by Date, so that you have side-by-side bars for each day.

Plot.plot({
  grid: true,
  fx: {interval: "day"},
  x: {axis: null, padding: 0},
  y: {label: null},
  color: {legend: true},
  marks: [
    Plot.barY(data, {fx: "Date", y: "Value", x: "Name", fill: "Name"}),
    Plot.ruleY([0])
  ]
})

Notebook: https://observablehq.com/d/d7646ef51f9d78f2

Note that your fx scale should declare the expected time interval (above day) so that you get nice ticks. If you don’t specify the interval, Plot won’t be able to guess the time interval of your data, and won’t be able to reduce the number of ticks in some sensible manner to reduce overlap.

For example, if you have five years of monthly data:

data = d3.utcMonths(new Date("1962-01-01"), new Date("1967-01-01")).flatMap((Date) => ["cos", "sin"].map((f) => ({Date, Name: f, Value: Math[f](d3.utcDay.count(0, Date) / 100) + 2})))

You’ll get this if you change the fx interval to month:

[Hvass-Labs]

Thanks very much!

I now understand that the key to get faceting working for a lot of data on the x-axis is to set the interval and padding as you did:

fx: {interval: "day"},
x: {axis: null, padding: 0},

Please consider adding a section to the docs on faceting about the interval, as it is not really explained there. I notice it also seems to stack the data within an interval. I found out that I can also use e.g. "3 months".

I have one more problem with the frame which I like on my plots. I have tried two ways, essentially:

Plot.frame().plot({ ... });

and:

Plot.plot({marks:[Plot.frame(), ...]});

In both cases they produce plots like this where there is a frame on every facet:

I have a similar problem when I'm adding a title using Plot.text that it seems to add it to every single facet.

Is there a way to only add the frame and e.g. Plot.text elements to the "whole" plot and not to every single facet? It might be a good idea to add a section to the docs on this as well.

Thanks!

---

Allow me to make a brief comment on our minor "clashes" in this thread and elsewhere. I am not trying to ingratiate myself with you, when I say your system is beautifully made. As a computer scientist who cares greatly about API design, documentation, etc., I truly appreciate how much effort has gone into designing and polishing your system. That's also why it takes so long for you to finish e.g. the very important brushing feature, because you want to get it right.

But your system is also quite complex, and the way you use functions, maps, dicts, etc. to filter and manipulate data is quite sophisticated and very different from something like Matplotlib, especially for people who are not expert Javascript programmers.

Your docs are often quite abstract and long, and may not solve the user's problems. So after browsing your docs, GitHub issues and discussions, Notebooks on HQ, etc. and I still can't find a solution to my problem, then I finally ask for your help. It takes me time to write a good question and I'm not sure I'll get a good answer - or if you might even get annoyed with me.

I appreciate you have more important things to do, which is why I keep asking you to assign a junior developer to help people with problems that seem trivial to you, but are quite tricky for people who are not familiar with your system.

It is important to spend some time and effort to give people a complete answer with code, because it can otherwise be hard for novice users to see what is the correct way to use your powerful API. Although this may seem like a hassle to you, your time is not wasted, because it may help many people in the future - and it will also help AI systems like ChatGPT, Google Bard, etc. to better understand your system, so they can solve more and more problems for people without having to ask a human for help.

At the end of the day, most of us probably just want to make some nice plots as easy as possible. We have many hard problems to solve in our own daily work, so we just want to copy-paste-modify the plotting code we need, without necessarily having a deep understanding of your beautiful but also quite complex API. I hope that makes sense.