12 ms·

Observable Plot: A JavaScript library for exploratory data visualization

216 points by mbostock 3y ago

xrd 3y ago
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.
- tophtucker 3y ago
  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 https://observablehq.com/@mkfreeman/plot-animation You could upvote this incremental rendering issue: https://github.com/observablehq/plot/issues/328 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 https://github.com/observablehq/plot/issues/166
stevage 3y ago
I used Observable Plot to build the graphs here: https://geohashing.win/ 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.
- rscrawfo 3y ago
  Heads up… Your scaling seems broken in iOS. There’s a scrollbar but some of the content is still cut off.
  - stevage 3y ago
    Thanks, perhaps you could post a screenshot at https://github.com/stevage/geohash-map https://github.com/stevage/geohash-map ?
- brianzelip 3y ago
  Love that this is built in Vue. Looks like the source is https://github.com/stevage/geohash-map 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 https://en.wikipedia.org/wiki/Geohash and https://en.wikipedia.org/wiki/Geocaching https://en.wikipedia.org/wiki/Geocaching?
  - stevage 3y ago
    So close, it's this: https://en.wikipedia.org/wiki/Geohashing https://en.wikipedia.org/wiki/Geohashing
darkteflon 3y ago
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?
shanghaikid 3y ago
It looks great, but why should I use it over EChats, plotly.js ...
MattPalmer1086 3y ago
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?
- Donckele 3y ago
  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.
  - MattPalmer1086 3y ago
    Yes, this is for charts on experimental data. Plotly seemed good for that.
    - tophtucker 3y ago
      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)
      - MattPalmer1086 3y ago
        The interactive stuff and tooltips are useful for exploring the data for sure.
- simonw 3y ago
  I think their examples gallery mostly speaks for itself: this is a VERY capable plotting library. https://observablehq.com/@observablehq/plot-gallery https://observablehq.com/@observablehq/plot-gallery
mukundesh 3y ago
Nice, would be nice to have it integrated in GitHub markdown. Looks similar to Vega or Vega-lite(https://vega.github.io/vega-lite/ https://vega.github.io/vega-lite/). Definitely as rich as D3.js but gets the job done for simple visualisations.
lloydatkinson 3y ago
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.
- mbostock 3y ago
  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.
  - lloydatkinson 3y ago
    Maybe I'm confused then, are these not components anyone can use? It's only for VitePress?
    - mbostock 3y ago
      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 https://observablehq.com/plot/features/plots
      - lloydatkinson 3y ago
        It doesn’t support SSR then, got it
        mbostock 3y ago
        In what sense? All the examples on the Plot documentation site are server-side rendered?
- mbostock 3y ago
simonw 3y ago
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 https://github.com/observablehq/plot/blob/main/CHANGELOG.md
- ayhanfuat 3y ago
  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.
- megaman821 3y ago
  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.
chrisweekly 3y ago
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 https://observablehq.com/@observablehq/plot-gallery
totalhack 3y ago
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.
- mbostock 3y ago
  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 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://observablehq.com/@mkfreeman/plot-tooltip
  - totalhack 3y ago
    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 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!
  - simonw 3y ago
    Yes! I've been looking forward to official tooltip support for ages.
kickout 3y ago
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
chunsj 3y ago
Are there anything similar to this https://github.com/yinshanyang/cli-d3 https://github.com/yinshanyang/cli-d3 for Plot?
- tophtucker 3y ago
  Fil (one of the Plot developers) made https://github.com/Fil/plot-cli https://github.com/Fil/plot-cli, and Michael Keller has https://github.com/mhkeller/plot/ 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.
  - chunsj 3y ago
    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.
mbostock 3y ago
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: https://github.com/observablehq/plot/blob/main/docs/components/PlotRender.js 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/33c5560e24aee08cdb648c847a7a2c7b6ebd3241/docs/why-plot.md?plain=1#L32-L36 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!
loa_observer 3y ago
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 https://github.com/Kanaries/Rath GraphicWalker, embeddable data exploration component: https://github.com/Kanaries/graphic-walker 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?
- mbostock 3y ago
  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 https://github.com/observablehq/plot/pull/721
  - derekperkins 3y ago
    That PR was created 15 months ago. Any rough idea when we might expect tooltips to be available?
    - mbostock 3y ago
      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 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.
jeffbee 3y ago
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.
Tenal 3y ago
[dead]
yawnxyz 3y ago
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-network https://truth-and-beauty.net/projects/muesli-ingredient-netw...
- tophtucker 3y ago
  It’s not easy to do radial stuff right now; you can upvote this issue: https://github.com/observablehq/plot/issues/133 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 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/@fil/radial-transform, https://observablehq.com/@observablehq/plot-radial-line 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-tree-flare, https://observablehq.com/@observablehq/plot-custom-tree-layout 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/chord-diagram, https://observablehq.com/@d3/hierarchical-edge-bundling/2 https://observablehq.com/@d3/hierarchical-edge-bundling/2
lmc 3y ago
Looks great! I would love to see a violin plot example.
- recifs 3y ago
  Here's an example https://observablehq.com/@jonhelfman/plot-violin-chart-with-facet 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 https://github.com/observablehq/plot/issues/1469
  - lmc 3y ago
    Thanks! And, done :-)
wodenokoto 3y ago
Any guides to make this part of a pandas based data exploration?
- mbostock 3y ago
  Check this out: https://juba.github.io/pyobsplot/ https://juba.github.io/pyobsplot/
MilStdJunkie 3y ago
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.
- tophtucker 3y ago
  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-machine 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/ https://vega.github.io/vega/docs/expressions/): "transform": { "calculate": [{"field": "b2","expr": "2*datum.b"}], "filter": "datum.b2 > 60" }, …in Plot you’d use plain JavaScript: y: d => 2 * d.b, filter: d => d.b2 > 60 …which I find easier and more powerful. (But I don’t need VL’s portability; others may.)
  - MilStdJunkie 3y ago
    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.
bhl 3y ago
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.
- mbostock 3y ago
  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 https://observablehq.com/@observablehq/chart-cell And Plot.auto here: https://observablehq.com/plot/marks/auto https://observablehq.com/plot/marks/auto
hbarka 3y ago
This is beautiful. Tableau look out.
- riialist 3y ago
  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 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.)
rcarmo 3y ago
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…

216 points by mbostock 3y ago

xrd 3y ago

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.

tophtucker 3y ago
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 https://observablehq.com/@mkfreeman/plot-animation You could upvote this incremental rendering issue: https://github.com/observablehq/plot/issues/328 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 https://github.com/observablehq/plot/issues/166

stevage 3y ago

I used Observable Plot to build the graphs here: https://geohashing.win/ 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.

rscrawfo 3y ago
Heads up… Your scaling seems broken in iOS. There’s a scrollbar but some of the content is still cut off.
- stevage 3y ago
  Thanks, perhaps you could post a screenshot at https://github.com/stevage/geohash-map https://github.com/stevage/geohash-map ?
brianzelip 3y ago
Love that this is built in Vue. Looks like the source is https://github.com/stevage/geohash-map 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 https://en.wikipedia.org/wiki/Geohash and https://en.wikipedia.org/wiki/Geocaching https://en.wikipedia.org/wiki/Geocaching?
- stevage 3y ago
  So close, it's this: https://en.wikipedia.org/wiki/Geohashing https://en.wikipedia.org/wiki/Geohashing

darkteflon 3y ago

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?

shanghaikid 3y ago

It looks great, but why should I use it over EChats, plotly.js ...

MattPalmer1086 3y ago

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?

Donckele 3y ago
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.
- MattPalmer1086 3y ago
  Yes, this is for charts on experimental data. Plotly seemed good for that.
  - tophtucker 3y ago
    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)
    - MattPalmer1086 3y ago
      The interactive stuff and tooltips are useful for exploring the data for sure.
simonw 3y ago
I think their examples gallery mostly speaks for itself: this is a VERY capable plotting library. https://observablehq.com/@observablehq/plot-gallery https://observablehq.com/@observablehq/plot-gallery

mukundesh 3y ago

Nice, would be nice to have it integrated in GitHub markdown. Looks similar to Vega or Vega-lite(https://vega.github.io/vega-lite/ https://vega.github.io/vega-lite/). Definitely as rich as D3.js but gets the job done for simple visualisations.

lloydatkinson 3y ago

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.

mbostock 3y ago
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.
- lloydatkinson 3y ago
  Maybe I'm confused then, are these not components anyone can use? It's only for VitePress?
  - mbostock 3y ago
    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 https://observablehq.com/plot/features/plots
    - lloydatkinson 3y ago
      It doesn’t support SSR then, got it
      - mbostock 3y ago
        In what sense? All the examples on the Plot documentation site are server-side rendered?
mbostock 3y ago

simonw 3y ago

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 https://github.com/observablehq/plot/blob/main/CHANGELOG.md

ayhanfuat 3y ago
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.
megaman821 3y ago
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.

chrisweekly 3y ago

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 https://observablehq.com/@observablehq/plot-gallery

totalhack 3y ago

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.

mbostock 3y ago
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 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://observablehq.com/@mkfreeman/plot-tooltip
- totalhack 3y ago
  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 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!
- simonw 3y ago
  Yes! I've been looking forward to official tooltip support for ages.

kickout 3y ago

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

chunsj 3y ago

Are there anything similar to this https://github.com/yinshanyang/cli-d3 https://github.com/yinshanyang/cli-d3 for Plot?

tophtucker 3y ago
Fil (one of the Plot developers) made https://github.com/Fil/plot-cli https://github.com/Fil/plot-cli, and Michael Keller has https://github.com/mhkeller/plot/ 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.
- chunsj 3y ago
  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.

mbostock 3y ago

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: https://github.com/observablehq/plot/blob/main/docs/components/PlotRender.js 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/33c5560e24aee08cdb648c847a7a2c7b6ebd3241/docs/why-plot.md?plain=1#L32-L36 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!

loa_observer 3y ago

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 https://github.com/Kanaries/Rath GraphicWalker, embeddable data exploration component: https://github.com/Kanaries/graphic-walker 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?

mbostock 3y ago
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 https://github.com/observablehq/plot/pull/721
- derekperkins 3y ago
  That PR was created 15 months ago. Any rough idea when we might expect tooltips to be available?
  - mbostock 3y ago
    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 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.

jeffbee 3y ago

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.

Tenal 3y ago

[dead]

yawnxyz 3y ago

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-network https://truth-and-beauty.net/projects/muesli-ingredient-netw...

tophtucker 3y ago
It’s not easy to do radial stuff right now; you can upvote this issue: https://github.com/observablehq/plot/issues/133 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 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/@fil/radial-transform, https://observablehq.com/@observablehq/plot-radial-line 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-tree-flare, https://observablehq.com/@observablehq/plot-custom-tree-layout 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/chord-diagram, https://observablehq.com/@d3/hierarchical-edge-bundling/2 https://observablehq.com/@d3/hierarchical-edge-bundling/2

lmc 3y ago

Looks great! I would love to see a violin plot example.

recifs 3y ago
Here's an example https://observablehq.com/@jonhelfman/plot-violin-chart-with-facet 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 https://github.com/observablehq/plot/issues/1469
- lmc 3y ago
  Thanks! And, done :-)

wodenokoto 3y ago

Any guides to make this part of a pandas based data exploration?

mbostock 3y ago
Check this out: https://juba.github.io/pyobsplot/ https://juba.github.io/pyobsplot/

MilStdJunkie 3y ago

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.

tophtucker 3y ago
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-machine 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/ https://vega.github.io/vega/docs/expressions/): "transform": { "calculate": [{"field": "b2","expr": "2*datum.b"}], "filter": "datum.b2 > 60" }, …in Plot you’d use plain JavaScript: y: d => 2 * d.b, filter: d => d.b2 > 60 …which I find easier and more powerful. (But I don’t need VL’s portability; others may.)
- MilStdJunkie 3y ago
  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.

bhl 3y ago

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.

mbostock 3y ago
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 https://observablehq.com/@observablehq/chart-cell And Plot.auto here: https://observablehq.com/plot/marks/auto https://observablehq.com/plot/marks/auto

hbarka 3y ago

This is beautiful. Tableau look out.

riialist 3y ago
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 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.)

rcarmo 3y ago

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…