scotthmurray/d3-book

Chapter 8 - Positioning Axes suggestion

atisor73 opened this issue · 2 comments

I'm not sure if this qualifies as an issue, but as I was working through chapter 8, I had some trouble positioning my axes to get the zeroes to intersect as I had used some different padding logic previously. Given that the data and the axes are drawn independently, it might work better to directly transform/translate the axes to xScale(0) and yScale(0), that way they explicitly line up with how the data is drawn.

So currently the code is:
.attr("transform", "translate(0," + (h - padding) + ")"
.attr("transform", "translate( padding + ", 0)"

If it were this instead:
.attr("transform", "translate(0," + yScale(0) + ")"
.attr("transform", "translate(" + xScale(0) + ", 0)"

The first line is positioning the x-axis down to where the y-axis is zero, and the second is shifting the y-axis to where the x-axis is zero. I believe the plots in the book would be visually unaffected, as the padding is accounted for in the scale variables/functions.

Perhaps I am totally misunderstanding things, but just in case this helps anyone else :-)

@atisor73 thank you! What a great idea.

It's been some time now since I wrote those examples, so I don't remember exactly why I chose to use padding there… I think it was due to the sequence of introducing concepts — the idea of a generic padding value first, followed by the idea of scales second. So at the time I may not have wanted to change that element of the example (as doing so would require explaining how and why, in the text of the book).

Anyway, I agree that your proposal here is more clear, so I'm flagging this issue to be revisited at some mythical future date, should the book ever undergo another revision. 😁 Thanks!

Sounds good, really enjoying the book by the way!