Menu
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.
487
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.
Because the domain refers to the set of possible input values, the domain of a graph consists of all the input values shown on the x -axis. The range is the set of possible output values, which are shown on the y -axis.
A scale's range, on the other hand, describes the set of possible output values that the input values can be converted to. If we're building a bar chart to display our test scores, we'd want our range to describe the minimum and maximum bar sizes.
The d3. scaleLinear() method is used to create a visual scale point. This method is used to transform data values into visual variables.
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.
133
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
