Slightly off-topic, but I wanted to share what a joy it was to use VitePress to build this new documentation site. We already use Vite for Plot development: instant hot module reloading is fantastic for iterating on tests as you can instantly see the visual effect of your code changes. VitePress brings the same experience to docs, and the default theme (which we use with minor adjustments) is beautiful out of the box.
For this site, we wrote a little Vue component to support server-side rendering for Plot (as part of static site generation at build time). There’s just a little adapter to convert Vue’s hyperscript to the standard DOM API here:
The end result is that all the Plot examples are authored simply as fenced js code blocks, but we get server-side rendering so the plots are already rendered when the page loads with no reflow! You can see an example here:
(For plots that would be too expensive to serialize to inline SVG, we render them client-side-only, and use requestIdleCallback or an IntersectionObserver to defer rendering to avoid jank.)
Add to that, while we were writing the docs, the VitePress team incorporated minisearch for instant search with no dependencies on external services. Huge kudos to Evan You and the VitePress team for building such a great product! It’s a huge boon to the open-source community to make it easier to write beautiful and usable docs.
I've been looking at the change log for the past year, hoping to see interactions and tooltips. :) I wouldn't want to downplay the progress though, there have been great additions. Looking forward to replacing HighCharts with it soon.
That's good. I used it a few months ago and without ChatGPT I would have given up on it. It "documentation" was mostly dozens of random examples and the discussions within.
Thank $DIVINITY for having manual download instructions to get at d3.min.js and plot.min.js without using yarn or npm. More libraries ought to have easy to use “offline” non-CDN, non-weird-tooling instructions right in the first doc page you come across…
They are using vega-lite for now. But there is a limit of building more fancy and customized visualizations. It seems Plot has a more flexible layer based visualization system that can support larger design space.
Is Plot stable enough now to migrate from vega-lite based system to Plot based? Are there any large milestone or roadmap of Plot in future?
If you’re primarily interested in static charts (or your interactivity is driven by external controls, such as drop-downs and sliders, where you can regenerate the chart as needed for interaction), then Plot is ready for use. On the other hand if you need direct manipulation interaction, such as brushing or painting dots in a scatterplot, then you might stick with Vega-Lite for now.
I expect we’ll release tooltips in a few weeks; I linked that newer PR in another comment. We’ve been exploring interaction while working on many other things (https://github.com/observablehq/plot/blob/main/CHANGELOG.md). Now that we’re feeling good about the foundation for static charts we are starting to address interaction.
These days I can usually dash off a Plot and it actually works the first time, which is a little scary. I used to think I would never get it! But my colleagues and friends often complement the style of my graphics, that I download from Observable and use in presentations or post on Twitter. It really is the accessible D3.
Genuine question: what's differentiating this from Vega/Vega-Lite? Seems like it uses very similar data format and also seems like it chews it in some of the same ways. Reason I ask? Vega's supported in asciidoctor-diagram and Kroki, since I use Asciidoc for everything, Vega is my heavy duty graph block.
I'm not a Vega patriot or anything, just genuinely wondering what I get here.
What I personally like most about Plot is that it’s purely JavaScript (/ TypeScript); it doesn’t try to be serializable as JSON and portable to Python etc. So whereas Vega-Lite has to have its own expression language (https://vega.github.io/vega/docs/expressions/):
Whew, slick. Can't argue with that. Vega's thick as hell, and is my last option before I pull the trigger[1] on prerendering. If I absolutely need box plots or geographic maps. And honestly, unless the data is constantly changing prerendering is more efficient anyway. I'll see if I can get this (ObPlot? OPLot? I don't know what to call it shorthand) into an asciidoc extension.
[1] I can hear you screaming WHAT ARE YOU TALKING ABOUT. I should probably enunciate this better. The docs are aerospace, so any graphics or tables or data or ANYTHING has to be source controlled, so the data goes into VCS with the docs, and it can get traced back to a commit, which is passed into a "List of Changes", a "List of Effective Data Modules", and (biggest pain in my ass) change marks in the output. "Prerendered" is a pass that turns the data into a graphic, and then the doc references the graphic. A graph block just points to the data, and the graph is automatic. If it wasn't so controlled, you could just put a passthrough in the asciidoc to the graph server and call it a day - which, honestly, is a much better option, but would require a few Amazon's worth of forms to fill out. And it would probably get rejected because OH MY GERD SERVERS.
Turn on "show graph", then pan the map a bit to start things moving.
It worked fairly well, although I found there were unexpected places where certain combinations of things just weren't possible. You can have a graph of type X, and color things by Y, and in style Z...and XY works, and YZ works, but not XYZ.
(I never did work out how to change the labels for the colors so they aren't "false" and "true" but something more meaningful.)
It was a bit frustrating at times. The documentation tends to be described in terms of examples and snippets, with not enough rigorous reference material that tells you exactly what properties are available and exactly how they work.
That was a year or so ago, so likely it's improved since then.
Love that this is built in Vue. Looks like the source is https://github.com/stevage/geohash-map, so looking forward to understanding how to make maps w/ vue.
Apologies if I missed examples, how about interactive tooltip and interactive legend support? I'm sure it's doable since so many libs based on d3 do it.
We haven’t implemented it yet, but that’s what we’re working on right now! There’s a PR up here (we just took a small break to focus on TypeScript declarations and then the new documentation website):
Excellent. If I could recommend some inspiration, NVD3 (no longer maintained) had the exact set of features I found useful, as does billboard.js (https://naver.github.io/billboard.js/demo/#Chart.AreaChart). Namely the ability to hide/focus/show certain series from the legend, showing all series in the interactive tooltip, and (NVD3) highlighting in the tooltip which series you are directly hovered over. These all become helpful when you start charting lots of stuff at once. Thanks for being the bedrock of all of this stuff!
This looks fantastic and is as close as an imperative API gets to being declarative.
I dug into the documentation a little bit and didn't see much regarding animation. It looks like the word transitions is used as a data transform in the plot API and not as a CSS transition? I'm unsure if there is another keyword to use when searching. I didn't find much about doing any kind of animations with this library, other than that you need to start customizating using D3 API inside the plot calls.
I'm interested in simple animations like "when this chart displays for the first time, start with data at zero, then animate to the final state." Is that possible with plot? I'm not looking for animation across different sets or shapes of data.
There’s no animation built-in currently. But it’s fast enough that you can often just throw away and re-render the Plot (i.e. handle the animation externally).
This looks very nice indeed - was looking for something web-ready like this earlier today.
My experience in the Python ecosystem a few years back was that for dataviz, there was nothing that approached the polish and power of R’s ggplot2. Does anyone know whether that’s changed?
For me the most useful features of Plot over other libraries are the declarative transforms: bin, stack, map, filter, etc. This means that a lot of the data munging that you would normally do before passing things off to the plotting library are done by Plot itself. Why would you want that? Well these transforms are now "facet aware" - if you want to facet on some some qualitative property, slap a `fx: property` on your mark and your transforms will then be run for each subplot.
Secondly, I simply find the API to be very tastefully built. The Geo API (https://observablehq.com/plot/marks/geo) is a particular highlight. I've used Plot for about 1.5 years for recreational side projects - it has genuinely kept me entertained for many hours in no small part due to its interface design.
Out of curiosity I’d love to see any examples where you think Plotly is especially strong for scientific plotting. I’ve used Plot lots and Plotly none, but I’d guess the big Plotly advantages right now are
- rich tooltips (coming soon in Plot)
- interactive pan & zoom
- multiple panels with shared scales? (like for marginal distributions; you can combine with HTML of course, but it’s not easy/built-in in Plot)
Need a chart library that is easily configurable by an end-user using a GUI. Think they have their data in a spreadsheet and want different types of charts and ability to pick things like color or labels. Does this work? I’ve been looking at recharts or ant-charts recently.
How well does this work in SSG (static sites)? It would be cool to use this with Astro but not if it introduces client side content layout shift due to it not being SSG capable.
I’ve updated the Getting started guide to give examples of both client- and server-side rendering, and there are links to CodeSandbox for code you can copy.
As I mentioned in my other comment, this documentation site is built with VitePress, which is SSG, and we use a Vue component to render the plots statically so that you don’t get any reflow on the client.
It’s a vanilla JavaScript library and you can use it with any framework or site generation tool that you wish. You’re welcome to copy the Vue component we wrote for our VitePress site, or to adapt the same technique for other frameworks. You can supply whatever DOM implementation you like using the document plot option as described here: https://observablehq.com/plot/features/plots
Fil (one of the Plot developers) made https://github.com/Fil/plot-cli, and Michael Keller has https://github.com/mhkeller/plot/, which supports Plot (and Vega-Lite and Plotly). Could probably be more robust; feel free to make feature requests, I know a few other people have asked me about this.
Yes exactly: tools/libraries such as R, D3.js, or even Tableau can go over the top for the simpletons as, me who don't code for a living. There are many data visualization and analysis tools that claim “to do everything without a line of code” but even importing your data into them can be pretty frustrating without knowledge of SQL, Python or JavaScript.
For simple data visualization with animations, e.g. Flourish is a good option, but it's limited without enterprise access. You can find examples here: https://flourish.studio/examples
So, I really enjoyed Observable's new documentation and tutorials which actually show, not tell how to use the cool examples with your own data.
(Note: I really dislike apps that only have video tutorials. It's hard to follow along and not get bored or lost. Sorry about this rant in advance, and thanks for all the producers who offer clear documentation as text or reasonable guided tours.)
For this site, we wrote a little Vue component to support server-side rendering for Plot (as part of static site generation at build time). There’s just a little adapter to convert Vue’s hyperscript to the standard DOM API here:
https://github.com/observablehq/plot/blob/main/docs/componen...
The end result is that all the Plot examples are authored simply as fenced js code blocks, but we get server-side rendering so the plots are already rendered when the page loads with no reflow! You can see an example here:
https://github.com/observablehq/plot/blob/33c5560e24aee08cdb...
(For plots that would be too expensive to serialize to inline SVG, we render them client-side-only, and use requestIdleCallback or an IntersectionObserver to defer rendering to avoid jank.)
Add to that, while we were writing the docs, the VitePress team incorporated minisearch for instant search with no dependencies on external services. Huge kudos to Evan You and the VitePress team for building such a great product! It’s a huge boon to the open-source community to make it easier to write beautiful and usable docs.
Oh. And be sure to try dark mode!