curiosity about d3 scales and decimal pixels

Community Help
1

Hi, I’ve a general question about how scales work. Let’s say we have this scale:

myScale = d3.scaleLinear()
  .domain([0, 100000])
  .range([0, 400])

So, myScale(556) = 2.2239999.... I’m wondering how decimal pixels are managed under the hood, since pixels should be integers on the screen.

2

to have a continuous scale return integers you can use the rangeRound option: GitHub - d3/d3-scale: Encodings that map abstract data to visual representation.

3

Thank you @Fil. I’m perfectly fine with scaleLinear. I’m just curios about how decimal values in the range are mapped to screen pixels, since they are finite and non-fractional. A very low-level question. :slight_smile:

4

The linear scale returns numbers, not pixels.

Of course in many applications, that number is used to define pixel positions, for example by setting an attribute on the DOM, maybe for a svg circle like so:

d3.select(“circle”).attr(“cx”, scale(value))

In that case, if scale(value) has returned a number such as 123.45678901, that number is passed as-is to the DOM, resulting in a circle with a cx attribute equal to “123.45678901”.

And then it is the browser that colors the pixels with that information, using anti-aliasing if the values do not exactly match pixels.

Not sure if this helps to clarify :slight_smile:

5

Yes, it helps a lot. I was puzzled by the mapping to physical pixels. Scales just pass down values to svg, the rest is browser / OS “magic”.

Thank you!

P.S.
For those interested, see also: Pixel-fitting

1 Like