Hi and welcome!
Here’s a diff with a few fixes to the issues you mentioned:
https://observablehq.com/compare/fb240bfc888da4e6@135...dbcf4c98eafe5632@152
(I only applied them to the first two charts, hopefully you can see what to do for the rest.)
Some comments:
the y axis text is not displayed,
This is because you were missing some required attributes on the text
element, namely the x
attribute and the fill
(or stroke
) attribute. This aside, the axis labels were being drawn outside the SVG, which I solved by setting overflow: visible
. There are also other ways to fix this, see the examples in the forum post below.
y axis is upside down.
Your function for the cy
attribute was reversed (recall that y=0
is the top of the image, and y=height
is the bottom). I changed the cx
and cy
functions to use the x
and y
scales that you already defined.
This recent forum post has some more resources for axes in D3 charts on Observable: