Comment by maegul | Hacker News Reader

Comment by maegul | Hacker News Reader

Nice work!

Two questions.

1) Do you have any thoughts or insights having now made both a low level graphics library (D3) and now a higher level library with “Plot”, on the nature and utilities of such tools it even data vis in general?

For instance, I remember when Plot first came out, I noticed many popular D3 users were enamoured with how quick and easy it was to use, to realise it seemed many of them might have been using exclusively D3 for so long, they didn’t really know about these sorts of tools that us “plebs” use (not that “Plot” didn’t look good, it did!). Having used both D3 and higher level tools (not Plot, yet, I haven’t been working in JS land lately), I felt like the nature of the technologies is rather discrete such that they’re different worlds and you kind of have to choose which one you’re in and stay there.

Which leads to my second question…

2) The documentation indicates that Plot is built on D3 (which makes sense!). Is there any capacity to manipulate a Plot graph with D3 once it has been constructed? I’m not sure what this would look like exactly, but blurring the lines between higher and lower level graphic manipulation would be interesting.

Otherwise, thanks for all your work!

Thanks, and great questions!

I like having multiple tools that make different design trade-offs. There’s no “one ring to rule them all.” For analysis I like to start with a high-level tool so that I can explore quickly and see if the data is interesting. I can then “eject” to a lower-level abstraction if I reach the limits of expressiveness in the higher-level tool and determine it’s worth the additional effort to drop down.

Observable Plot is optimized for fast visual exploration: it’s concise, with good defaults, and lots of built-in conveniences for transforming data. In this regard Plot is similar to Vega-Lite and other high-level tools based on the Grammar of Graphics. Whereas D3 is optimized for bespoke presentation, like the sort of work we were doing at The New York Times; D3 prioritizes expressiveness.

I recommend Plot for most people over D3 because it’s more efficient: more of your time can be spent deriving insight from your data rather than programming. But there are still plenty of things that Plot can’t do yet (without plugins), like brushing a scatterplot, panning and zooming, and animation. We’re working on those!

And yep, Plot is built on D3. It’s nice to not have to re-implement the low-level visualization primitives like scales and layouts. Plot generates SVG output, so you can readily manipulate what Plot generates using D3 selections. Also, Plot is highly extensible: you can implement custom mark types, custom symbols, custom transforms, etc. Here are two examples, the first to apply some custom clipping, and the second to design a custom symbol for a dot map:

https://observablehq.com/@fil/plot-difference-chart https://observablehq.com/@observablehq/plot-spike-map

We haven’t fully documented how to write custom marks in Plot yet, but we plan to do that (along with animation and interaction) prior to the 1.0 release. There’s a ton to do but it’s exciting and we love hearing feature requests!

Re 1), I like Mike's talk from the 10th anniversary of D3. It came while working on Plot but before it was officially released; a few of the points relate to the high/low-level thing and anticipate Plot:

Video: https://www.youtube.com/watch?v=Sqeymt1mqAw Essay: https://observablehq.com/@mbostock/10-years-of-open-source-v...

Re 2), Plot returns a regular DOM node, so you can select any part of it and do anything you’d otherwise do with D3. Plots also expose their scales: assuming the DOM node of a generated Plot is named myPlot, you can call myPlot.scale("x"), and then feed that domain and range into a D3 scale. I can find some examples later if you’re interested.

Thanks! And examples would be appreciated!

Here’s an example using D3 to add interactive tooltips to Plot:

https://observablehq.com/@mkfreeman/plot-tooltip

Here’s one that lets you click on a region in a line chart to select it:

https://observablehq.com/@skybrian/select-from-predefined-re...

Here’s using rough.js to stylize a plot:

https://observablehq.com/@fil/rough-plot

Nice! Thank you!

The tooltip example in particular strikes me as a convincing demonstration that there's a fairly coherent vertical stack of tools in D3->Plot around which a useful and flexible ecosystem of plugins and extensions can be built, all in SVG too (of course!)

Also, tangentially ... I just went on to https://bl.ocks.org/mbostock for old time's sake, knowing full well that Observable is your new home, and got a Heroku error. Presuming it's because the bl.ocks are no longer maintained, I figured I'd let you know.

Reply on news.ycombinator.com