Rotating a bar chart in D3 ("Invert SVG Elements" challenge)

So, I understand that the way SVG elements work, your X and Y origin is the top left corner, which causes the inverted bar chart issue addressed in the “Invert SVG Elements” challenge. However, the solution they propose, which is setting “y = height of SVG - height of bar * scaling constant” seems a bit convoluted.

Couldn’t you just add ‘.style(“transform”, “scaleY(-1)”)’ to the SVG element? I know the challenge wont pass with this technique, but is there a problem with letting the CSS do the heavy lifting here?

I think they just want you to understand what’s going on and why the chart appears upside down. Later, you will be shown a better way to handle it without CSS or extra calculations by inverting the scale in d3.