Bar chart code help

Hi all. I’m a newbie in JS/d3 and I’m still playing around to figure things out. Can anybody guide me through why my bar chart doesn’t show here? @blanchild/who-data-heat-indonesia-births

I also have a few other questions on the linked notebook:

  1. why does x.bandwidth() (used in many notebooks) return an error but x.bandwidth doesn’t?
  2. is there a guideline as to how margins in Observable work? I’ve played around with the values to place my y-axis text, but I don’t really understand how it works. Are the y-axis coordinates inverted (0 is at the top)?
  3. are there any suggestions you have in general for my code (simpler/better ways to write it)?

Thanks in advance for your help :slight_smile: I will need a lot more soon, as I’m trying to build an interactive forecasting model!

The reason that x.bandwidth() returns an error is because that is not a function on d3.scaleTime. Maybe there is a way to handle this using d3.scaleTime, but you probably want d3.scaleBand.

Yes, y values start from 0 at the top.

Not sure exactly what the expected output is here, but you might check out this example:

Good luck.

1 Like

Thanks a lot for your help! I’ve used the example you gave me (which is exactly what I’m trying to achieve), but I somehow got stuck again and my code only shows 3 bars rather than 5!

EDIT: I managed to fix the issue, which was related to the data labels containing brackets (i.e. “Quintile 1 (poorest)”). The data read in fine with the brackets, so I didn’t think it would be an issue when generating the chart.