What's all this then, now, eh?
Well, I needed a Bonus Drop, and I also wanted to talk about how Observable Plot objects are really just SVG elements on (doctor approved) steroids. So, I combined the two, and went a bit overboard by desiging a custom LitElement that would let me type the least amount of keystrokes to demonstrate what I'm talking about. (Link to that at the end.)
You'll see some references to mtcars in code snippets. That's because I'm an old "R" dude and have that example dataset everywhere. You can use it in JS via https://rud.is/data/mtcars.csv. That directory has a generous CORS policy, too.
You'll also see references to ipBytes and tagsToIps. You can find that data in this Observable notebook.
So, below are some example OJS/OBS (I mix up the acronyms alot) Plot examples that show the Plot code, the rendered plot, and then the generated SVG. Here's an example one:
(Feel heartily encouraged to ignore me forever if that example text offends you.)
That initial example is actually a pretty decent encapsulation of what you get when you fill in a good chunk of Plot details. There's the figure HTML element with our custom className, some header bits, the SVG with some style and elements that make up the actual plot.
The result of that Plot call is an SVG JS object. But, before we talk about that, let's see a bit more. How about a scatterplot with a legend?!
We can target all those elements in JS and setup all kinds of event handlers and styling just like we would back in the vanilla D3 days.
Let's use some of my data. In a new prototype/blueprint app we're making at work, I wanted to be able to do "things" with the IP addresses in this chart:
We'll be seeing that plot one more time.
Let's try to get at the text elements on that Y-axis. That IP address boxplot was stored in a ipPlt object, so we can interrogate it:
The textElements object is a live NodeList. That means we can do fun things like:
Which you can try out below, by hovering over the IP addresses:
You can see some additional JS machinations the aforementioned Observable notebook.
You can also find two Lit Elements used in this Bonus Drop on GitLab.