Bar chart with dates

Community Help
1

Hi everyone,

I’m trying to make a bar chart, and I feel like I’m close, but I want essentially a mix between the two in this codepen example:

I want the axis info and ticks like I have in the lower chart, but with bars in the upper one. A bar per month that shows the volume of that month. Is that possible, and what am I missing?
I’ve been trying all day and I hate to ask for help, but it sure would be appreciated. Thank you for reading!

2

I hacked something together that might help: Time-Based Bar Chart / Observable / Observable

1 Like
3

This is the intended use of the interval transform. For example:

Plot.plot({
  marks: [
    Plot.rectY(dataWithparsedDates, {
      x: "date",
      interval: d3.utcDay,
      y: "volume",
      fill: "magenta"
    })
  ]
})

For more on the interval transform:

1 Like
4

Thank you for looking!
I’ve added your suggestion to my codepen, but it still doesn’t work. I’ve actually tried the interval option (on both barY and rectY marks) but it seems not to do what I want (. Am I forgetting to load a specific library?

If I add the interval line to the BarY marked plot (the upper one in the codepen), I get this, it seems to apply the interval on the wrong axis perhaps?

Schermafbeelding 2022-02-10 om 10.25.00
Schermafbeelding 2022-02-10 om 10.25.001286×782 38.2 KB

5

Thank you! Did you do that specially for me? I’m going to take a look!

6

Hi Shan,

I don’t understand what is going wrong for me, I’ve applied the same things as you (copied it to my context) but I don’t get it working. I’ve copied what you’ve done to a fork of my original codepen. Am I using the wrong versions of the library?

I’m using

<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
<script src="https://cdn.jsdelivr.net/npm/@observablehq/plot@0.2"></script>

7

I see a few syntax problems in your CodePen. Currently your data is defined like so:

  {
    date: 2021-12-10,
    other: 657,
    volume: 243638,
  },

Notice the date is 2021-12-10 which means 2021 minus 12 minus 10 which equals 1999. Somehow the quotes were dropped. You want this:

  {
    date: "2021-12-10",
    other: 657,
    volume: 243638,
  },

Also, I’ll repeat my suggestion to use the interval option and rectY rather than rectX.

Here is a fixed CodePen.

(I also fixed some of the vanilla JavaScript syntax, avoided mutation of data, and upgraded to the latest release of Plot.)

1 Like
8

Thank you so much for your help (both of you), and all the effort you’ve done for me! As you can tell, I could really use the help. I’ll be sure to study your solution Mike to make sure I learn from it.

Is there a way I can compensate you for your time? :slight_smile: I’d love to make a donation on your behalf, or mail you some of our famous stroopwafels (Dutch cookies)! (Feel free to mail an address to mail@annekesinnema.nl )

1 Like