search

observablehq / plot

A concise API for exploratory data visualization implementing a layered grammar of graphics
https://observablehq.com/plot/
ISC License
4.25k stars 173 forks source link

A scale for the strokeWidth channel? #2017

Open jimjam-slam opened 6 months ago

jimjam-slam commented 6 months ago

The finite state machine example shows the use of strokeWidth as a channel to vary widths. But getting this going on a map is proving tricky:

https://observablehq.com/@jimjamslam/vary-stroke-width-on-map

Without varying stroke widths I see the expected links. But once I add strokeWidth as a channel, the values appear to be interpreted literally, making them too large enough to overwhelm the plot. (I can see them vary if I manually scale the values with something like strokeWidth: d => d.count / 100.

I've tried adding a strokeWidth object with a range and type: "log", but that doesn't seem to get me the result I'm looking for, unfortunately!

mbostock commented 6 months ago

The strokeWidth channel is not bound to a scale, so you can only it express it as literal values (currently). As you discerned, you’ll need to say something like strokeWidth: (d) => d.count / 100, replacing 100 with whatever value is appropriate to your data.

https://github.com/observablehq/plot/blob/41a63e372453d2f95e7a046839dfd245d21e7660/src/style.js#L144

jimjam-slam commented 6 months ago

Thanks v much for confirming!