link plot custom lines

Sorry if this is a bit simple, I am not sure where to start.

If I want to use properties of these special lines types as marks, for example, using a squiggle in a link plot, how do I bring them in and apply them?

IOW how to put this: 044 Fifteen silly ways to draw a line / Saneef H. Ansari / Observable
into this: Link Mark / Observable Plot / Observable / Observable

1 Like

This is not at all simple!

First, Plot uses SVG and the silly lines are drawn in canvas, so we need a way to create a canvas mark. Second, the code cannot be imported as is, because we need each function call to have a possibly different canvas for each plot.

I’ve put up a minimalist version in this notebook to get you started.

It still needs a bit of work if we want to support color, opacity, and line width as plot channels (I’ve set them as fixed values in the code).

Also, it only does two silly ways; adding the thirteen others is not too difficult, you just need to paste the code and append ctx to the arguments list.


Thanks @Fil! I will take a look and try to put this info to good use.

Re: simplicity: one reason I struggle with when to plod vs when to ask is that esp. at my experience level, I am quite bad at predicting when something will turn out to be simple. So increasingly I lean toward asking after a quick search.

Really appreciate your work here. I hope others will find this useful also. I’m never going to be some d3 pro but I do hope to use it to show data densely (faithfully) and expressively (interestingly) where other solutions fail. A possible downside is that I tend to look to d3 to solve the weirder problems or more indulgent whims. I must say, impulsively asking about some thorny problem, and having smarter people actually substantially help with it, could become somewhat addictive.

One visualization theme I come back to is how to assist intuition especially where humans are bad at thinking about scale. The reason I am so interested in particular uses of dots and squiggles is that I want to show a lot of data–approaching or achieving 1:1 :: mark:unit–where possible. With small quantities, drawing by hand can be fun and effective. But if you want to select data and use it to draw thousands or millions of things with precision and fidelity, d3 is better. I want visualizations to do things that cartoons do but that are difficult or tedious to draw. To get back to some kind of higher-trust society, I think we need to use more of our ‘cartoon-brain’ to get some kind of handle on the various ‘hyperobjects’ we confront. This conversation touches on some of what I mean:

@njcode Regarding D3, I often find that it already helps to learn what’s in a toolbox, even without learning the individual tools in details.

Here’s a work-in-progress notebook that may help you to get a bird’s eye view on D3:

1 Like

Awesome, I will check this out. Thanks!