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:
why does x.bandwidth() (used in many notebooks) return an error but x.bandwidth doesn’t?
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)?
are there any suggestions you have in general for my code (simpler/better ways to write it)?
Thanks in advance for your help 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:
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.