Understanding D3 domain and ranges

Question

I have a temperature range of 33 degrees to 64 degrees F. I'm trying to figure out the pixel position of 59 degrees along a y-axis that spans 600 pixels. This is for a column chart.

Full disclosure, this is homework that I've been grappling for a while and simply have not yet figured it out.

var scale = d3.scale.linear().domain([33,64]).range([0,64]);

scale(59) returns 53.677419354838705 which is the wrong answer. 600 - 53.677419354838705 is also the wrong answer.

What might I be missing?

Thank you.

Answer 1

The domain is the complete set of values, so in this case that is all of your temperatures, from 33 to 64. The range is the set of resulting values of a function, in this case the resulting values of scaling your temperatures from 0 to 600.

So you're almost there, you're just using the wrong range - in this case your range should be the span of your y-axis (0 - 600):

var scale = d3.scale.linear().domain([33, 64]).range([0, 600]);

Which will result in scale(59) giving an output of 503.2258064516129 .