Setting dots' radius: literal vs function channel

In Radius? / Ahmed Fasih / Observable I like how I can set the r (radius) of each dot explicitly to 40 (the largest value of the data’s units column) but then when I try to set the radius using a function r: d=>d.units I see the circles are much smaller?

I read that dot radius goes through a sqrt scale, and that perhaps I ought to explicitly set a domain for the radius, but I wasn’t able to get the “plum” dot to have 40 pixels radius. Any tips?

If you want an identity scale (which allows you to pass the number for r directly in pixels), you can do

Plot.dot(sales, {x: d=>d.units, y: "fruit", r: d => d.units}).plot({r: {type:"identity"}})

Another possibility is to set a proportional scale with:
Plot.dot(sales, {x: d=>d.units, y: "fruit", r: d => d.units}).plot({r: {type:"linear", domain: [0, 40], range: [0, 40]}})

Both result in the same chart, but the meaning is different: in the first case, you pass pixels and they are taken “as is”. This precludes, for example, having a legend: the plot has no notion of what data is passed through. In the second case, you have a scale that maps a value of 10 units to a value of 10 pixels.

3 Likes