Obviously Observable

Well, if you didn’t think today’s WPE would be about Observable Plot, then I have failed miserably as your humble content curator.

We’ll keep today’s expository a bit short, since there’s not much for me to drone on about.

Your mission: Make some Observable Plots!

Let’s provide some more context, since you can’t get away that easily.

Training Your Plot Mental Model

First, let’s discuss the companion GH repo to this newsletter edition.

Over there, you’ll find two main directories.

One is for a vanilla javascript project that is a basic HTML page, some basic CSS, a core javascript file, and some data files.

The other is a Quarto document with — essentially — the same content as ^^ with a few differences which I’ll explain below.

There is also an Observable notebook companion.

While this WPE is a tad R-centric, you really don’t need to be an “R person” to get something out of it.

What I am asking you to do is go through the geom_ examples in the {ggplot2} R manual and re-create as many of them as is possible (not all are 1:1 easily transferable) so you can develop/refine your Plot mental model. The nice thing about the ggplot2 examples is you know what the result should look like! That’s huge IMO.

With the latest edition of Plot, there’s a bonkers amount of API help in any IDE that can handle TypeScript definitions (I used VS Code).

Now, I have not left you out in the cold. In fact, I’ve recreated a number of the ggplot2 examples, so you can get a feel for how to do it. Fret not! I have left plenty for you to do, and we’ll break both of the folders down individually.

Vanila JS + Vite

The vanilla-vite directory contains a small NPM project. Change to the directory, npm init and then npm run dev and you should be all set. Edits you make to index.html and main.js will appear automagically in whatever browser you use.

You can also view it online.

I provided sample ggplot2 manual page example calls with their Observable Plot counterparts.

For example:

ggplot(faithfuld, aes(waiting, eruptions)) +
  geom_raster(aes(fill = density))

translates to:

const geomRaster01 = document.getElementById("geom-raster-01")

geomRaster01.replaceChildren(

  Plot.plot({
    style: defaultStyle,
    marks: [
      Plot.raster(
        faithfuld,
        { x: "waiting",
          y: "eruptions", 
          fill: "density", 
          interpolate: "nearest" }
      )
    ]
  })
	
)

where that raster id is assigned to this element <div id="geom-raster-01"></div>, and faitfuld came from const faithfuld = await d3.csv('./data/faithfuld.csv', d3.autoType) that I also included.

The section header is what it generates.

To add more examples, just mimic the entries in index.html and corresponding JS code in main.js.

Quarto

The Quarto one is almost the same.

One difference is that I was lazy and didn’t copy over the ggplot2 lines (I have faith in your ability to cross-reference).

The other is that we take some data from R, but also read some other data in from CSVs. We do that because my version of Quarto doesn’t seem to have Plot.raster nor Plot.auto. That means I had to show you how to use Observable Plot the normal way (i.e., in {ojs} blocks) and the vanilla way, via regular ol’ JavaScript.

I’m kind of glad it worked out this way, though, since you really do not need the Observable runtime to use Plot.

Help!

Ping me in the comments, in Notes, in GH Issues, or on 🐘 if you require some assistance. While I won’t constantly be attending to glowing rectangles over the weekend, I will have plenty of screen time. Note: I will not answer q’s on the bird site. Musk deserves no 👀.

FIN

I hope this helps folks take a look at Plot and consider using it in upcoming projects. If you don’t have a local copy of R, there are lots of R documentation sites online that will have the examples you can work from. ☮