d3 scatter plot, y axis issue

Hello, I’m new to observable notebook, apologies if this has been asked before.

I was trying to plot a scatter chart for random numbers, notebook link: https://observablehq.com/@quantlib/random-numbers-and-dimensionality

in second d3 chart, the y axis text is not displayed, and y axis is upside down.
i googed around and tried many different code, it’s always the same

btw for the same data, i plotted using microsoft excel, it supposed to look like this:

please helpl, thank you!

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:

2 Likes

@bgchen, wow, awesome! I’m learning new things of D3.js, thanks a lot!

Wait, what?! I didn’t even know you could do that! :smiley:

1 Like

Yeah, I learned that from @mbostock’s post in the other thread!