Observable Plot: A JavaScript library for exploratory data visualization(observablehq.com)
observablehq.com
Observable Plot: A JavaScript library for exploratory data visualization
https://observablehq.com/plot
63 comments
Observable Plot has been around for a while but the documentation has just had a massive upgrade.
If you've looked at Plot in the past you have almost certainly missed a ton of stuff, they're shipping new features constantly. It's worth reviewing the changelog: https://github.com/observablehq/plot/blob/main/CHANGELOG.md
If you've looked at Plot in the past you have almost certainly missed a ton of stuff, they're shipping new features constantly. It's worth reviewing the changelog: https://github.com/observablehq/plot/blob/main/CHANGELOG.md
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…
Big fan of D3.js and now there is Observable Plot! I am building several data visualization software for exploratory data analysis:
RATH, auto exploratory data analysis: https://github.com/Kanaries/Rath
GraphicWalker, embeddable data exploration component: https://github.com/Kanaries/graphic-walker
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?
RATH, auto exploratory data analysis: https://github.com/Kanaries/Rath
GraphicWalker, embeddable data exploration component: https://github.com/Kanaries/graphic-walker
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.
We’re working on tooltips now, and interaction next. There’s a PR here with an early sketch and demo video: https://github.com/observablehq/plot/pull/721
We’re working on tooltips now, and interaction next. There’s a PR here with an early sketch and demo video: https://github.com/observablehq/plot/pull/721
That PR was created 15 months ago. Any rough idea when we might expect tooltips to be available?
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.
You have no idea how excited I am about this.
Thanks, and we're very excited!
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.
I love what this team is doing. Fantastic lib, world-class pedigree, and check out the breadth and depth covered in their examples page: https://observablehq.com/@observablehq/plot-gallery
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.
I'm not a Vega patriot or anything, just genuinely wondering what I get here.
This might help: https://observablehq.com/@observablehq/plot-vega-lite
More generally, our motivations are here: https://observablehq.com/plot/why-plot
More generally, our motivations are here: https://observablehq.com/plot/why-plot
asciidoc-diagram & Kroki look cool, hadn’t seen them. I don’t think Plot’s very good at (or built for) that sort of diagramming, though you can do it if you want: https://observablehq.com/@observablehq/plot-finite-state-mac....
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/):
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/):
"transform": {
"calculate": [{"field": "b2","expr": "2*datum.b"}],
"filter": "datum.b2 > 60"
},
y: d => 2 * d.b,
filter: d => d.b2 > 60
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.
[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.
I used Observable Plot to build the graphs here: https://geohashing.win/
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.
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.
What are we looking at though? Logs of personal treasure hunt hikes related to https://en.wikipedia.org/wiki/Geohash and https://en.wikipedia.org/wiki/Geocaching?
What are we looking at though? Logs of personal treasure hunt hikes related to https://en.wikipedia.org/wiki/Geohash and https://en.wikipedia.org/wiki/Geocaching?
So close, it's this: https://en.wikipedia.org/wiki/Geohashing
Heads up… Your scaling seems broken in iOS. There’s a scrollbar but some of the content is still cut off.
Thanks, perhaps you could post a screenshot at https://github.com/stevage/geohash-map ?
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):
https://github.com/observablehq/plot/pull/1304
In the meantime, you can do lots of interactive stuff with the SVG that Plot generates. There’s a nice tooltip plugin by Mike Freeman here:
https://observablehq.com/@mkfreeman/plot-tooltip
https://github.com/observablehq/plot/pull/1304
In the meantime, you can do lots of interactive stuff with the SVG that Plot generates. There’s a nice tooltip plugin by Mike Freeman here:
https://observablehq.com/@mkfreeman/plot-tooltip
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!
Yes! I've been looking forward to official tooltip support for ages.
Wow this is incredible!
Is it easy to customize charts? It'd be so nice to use this to do a circular/radial tree/node visualization, e.g. something like this: https://truth-and-beauty.net/projects/muesli-ingredient-netw...
Is it easy to customize charts? It'd be so nice to use this to do a circular/radial tree/node visualization, e.g. something like this: https://truth-and-beauty.net/projects/muesli-ingredient-netw...
It’s not easy to do radial stuff right now; you can upvote this issue: https://github.com/observablehq/plot/issues/133
One bizarre workaround right now is to abuse the geographic projections: https://observablehq.com/@observablehq/pie-to-donut-chart
In general, you can do a lot of customization, including plugins (though that’s not well-documented yet), so you could make it work… see https://observablehq.com/@fil/radial-transform, https://observablehq.com/@observablehq/plot-radial-line for other approaches to hacking radial stuff into Plot.
You can do Cartesian tree diagrams in Plot, e.g. https://observablehq.com/@observablehq/plot-tree-flare, https://observablehq.com/@observablehq/plot-custom-tree-layo...
If you want to make a chord diagram like that “Müsli Ingredient Network” example, you could try one of these D3 examples: https://observablehq.com/@d3/chord-diagram, https://observablehq.com/@d3/hierarchical-edge-bundling/2
One bizarre workaround right now is to abuse the geographic projections: https://observablehq.com/@observablehq/pie-to-donut-chart
In general, you can do a lot of customization, including plugins (though that’s not well-documented yet), so you could make it work… see https://observablehq.com/@fil/radial-transform, https://observablehq.com/@observablehq/plot-radial-line for other approaches to hacking radial stuff into Plot.
You can do Cartesian tree diagrams in Plot, e.g. https://observablehq.com/@observablehq/plot-tree-flare, https://observablehq.com/@observablehq/plot-custom-tree-layo...
If you want to make a chord diagram like that “Müsli Ingredient Network” example, you could try one of these D3 examples: https://observablehq.com/@d3/chord-diagram, https://observablehq.com/@d3/hierarchical-edge-bundling/2
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.
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).
Mike Freeman made a helper function that adds that sort of animation (data gradually coming in) using D3 atop Plot: https://observablehq.com/@mkfreeman/plot-animation
You could upvote this incremental rendering issue: https://github.com/observablehq/plot/issues/328
Or this one for adding a “time channel” to do data-driven animation (for which there’s an old draft PR): https://github.com/observablehq/plot/issues/166
Mike Freeman made a helper function that adds that sort of animation (data gradually coming in) using D3 atop Plot: https://observablehq.com/@mkfreeman/plot-animation
You could upvote this incremental rendering issue: https://github.com/observablehq/plot/issues/328
Or this one for adding a “time channel” to do data-driven animation (for which there’s an old draft PR): https://github.com/observablehq/plot/issues/166
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?
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?
The question I would ask is why should I use this over the many other JavaScript plotting libraries?
I just went through a process of evaluating around 7 different libraries and eventually decided on Plotly.
What is the USP of Observable Plot?
I just went through a process of evaluating around 7 different libraries and eventually decided on Plotly.
What is the USP of Observable Plot?
I think their examples gallery mostly speaks for itself: this is a VERY capable plotting library. https://observablehq.com/@observablehq/plot-gallery
Yes, there are lots of nice charts. Other libraries also have lots of nice charts too though!
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.
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.
Thanks, that is genuinely useful.
I may have a look at the transforms.
I may have a look at the transforms.
If you’re using plotly (js) and good at it then stick with it as it gives you so much flexibility - especially with scientific plotting.
I saw the examples for OP and did not see anything challenging Plotly for my use cases.
I saw the examples for OP and did not see anything challenging Plotly for my use cases.
Yes, this is for charts on experimental data. Plotly seemed good for that.
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)
- 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)
The interactive stuff and tooltips are useful for exploring the data for sure.
As a user of both native D3 and the new Plot, it’s a game changer for non-programmers to access this level of plots. My highest recommendation
Nice, would be nice to have it integrated in GitHub markdown.
Looks similar to Vega or Vega-lite(https://vega.github.io/vega-lite/). Definitely as rich as D3.js but gets the job done for simple visualisations.
Looks similar to Vega or Vega-lite(https://vega.github.io/vega-lite/). Definitely as rich as D3.js but gets the job done for simple visualisations.
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.
We built Observable’s chart cell on top of Plot (the auto mark).
You can read more about our chart cell here: https://observablehq.com/@observablehq/chart-cell
And Plot.auto here: https://observablehq.com/plot/marks/auto
You can read more about our chart cell here: https://observablehq.com/@observablehq/chart-cell
And Plot.auto here: https://observablehq.com/plot/marks/auto
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.
React: https://observablehq.com/plot/getting-started#plot-in-react
Vue: https://observablehq.com/plot/getting-started#plot-in-vue
React: https://observablehq.com/plot/getting-started#plot-in-react
Vue: https://observablehq.com/plot/getting-started#plot-in-vue
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.
Maybe I'm confused then, are these not components anyone can use? It's only for VitePress?
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
It doesn’t support SSR then, got it
In what sense? All the examples on the Plot documentation site are server-side rendered?
Are there anything similar to this https://github.com/yinshanyang/cli-d3 for Plot?
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.
Wow, this looks nice. Thank you!
I've been using GNUPlot in drawing chart in emacs. Plot has much better examples and I'd like to try this instead.
I've been using GNUPlot in drawing chart in emacs. Plot has much better examples and I'd like to try this instead.
It looks great, but why should I use it over EChats, plotly.js ...
Any guides to make this part of a pandas based data exploration?
Check this out: https://juba.github.io/pyobsplot/
Looks great! I would love to see a violin plot example.
Here's an example https://observablehq.com/@jonhelfman/plot-violin-chart-with-...
We don't have a good KDE built-in yet, but you could upvote https://github.com/observablehq/plot/issues/1469
We don't have a good KDE built-in yet, but you could upvote https://github.com/observablehq/plot/issues/1469
Thanks! And, done :-)
This is beautiful. Tableau look out.
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 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!