Observable Plot

[mbostock]

We’ve been developing Observable Plot for a while now, and I’m thrilled to finally have it out in the public. Feel free to ask me any questions! Or share your plots on Observable and I can make suggestions. ;)

[parksy]

I went through the tutorials/demos and this seems very intuitive. I don't do a lot of visualisation, but when I do, I've found manually coaxing data and configuring visual parameters to please a library to be tedious as it's time spent doing busy work I'd rather spend analysing the results. So for me the major drawcard is being able to drop a simple table of results in and let the library handle the necessary inferences for the type of vis I'm after. If it works for the majority of my use-cases, that's a big timesaver for me.

One type of visualisation I sometimes (honestly rarely) use but is extremely useful for finding unintuitive relationships in higher dimensions of data are parallel coordinates charts (actually it's your d3 code I've been borrowing in the past - so thanks for that!) Is this something that can be achieved with Plot at this stage? I'm not sure if it would be a facet, a transform, or something else, like a cross between marks and links (if that's doable).

Anyway, definitely bookmarked - I'll be sure to spend more time using this next time I need to visualise some data, looks like it will handle a lot of the standard vis without the typical boilerplate, thanks for releasing this.

[dodgez]

I didn't see any mention of this, but does Observable Plot support interactive charts? E.g. detailed summary on data point hover?

[SamBam]

I've been using D3 for charts for a while. I'm not a power-user by any means, but I understand it enough to make basic plots.

When would I use this instead of straight D3?

[drej]

Hey Mike, thanks for all the work you've been doing - I first used D3 back in 2013/2014 and been using them for side projects since.

I haven't dug into the whole v3/v4 modularisation, so that might answer it, but is there a way to minimise the dependencies that Plot brings? You say it needs D3, but what of it does it need specifically, the whole thing? It's just that it's 250K or so, so I was wondering what the minimal setup here is.

Cheers and congrats on the release!

[breck]

Always a joy to read your code and loved the 'In the spirit of show don’t tell' notebook. Quickly grasped what it's about.

Edit: deleted my question, as it is answered here https://observablehq.com/@observablehq/plot-vega-lite

[marze]

It looks awesome, but from the forums it doesn't appear that there is a built-in way to output direct to a pdf. I would value that feature, as options to convert html to pdf often have page boundary and formatting difficulties.

Am I missing anything, and is there a chance this feature might be added in the near term?

[RobinL]

As soon as I saw this, I thought: 'how is this different from vega lite'.

An answer is here: https://observablehq.com/@observablehq/plot-vega-lite

It'll be very interesting to see this develop. My initial reaction, as a vega-lite user is I'm not sure it's worth learning the new API immediately.

Having said that, I do find the idea of writing transforms in javascript compelling, and I can see there may be some situations in which this is a very elegant solution.

I think the idea of a plotting library allowing transforms is initially a little jarring - feels potentially like poor separation of concerns. But the more I think about it, the more it seems really logical: a lot of transforms (e.g binning) are done only for plotting purposes, in which case keeping them in the visualisation logic makes complete sense.

Looking further ahead (not sure this is possible in Plot yet, but giving its integration with Observable I'm sure it will be), the idea of a reactive model where charts can both react to user interactions, but also be the source of inputs (select a range, drag a bar, draw a distribution freehand) is very exciting.

Transforms and signals are both possible in vega/vega lite, but I can definitely see the benefit of them being cleaner and being able to accept arbitrary javascript.

[mbostock]

Yep, transforms in Plot are totally optional — you can do them outside of plotting if it’s more convenient for you, say using Arquero, and it tends to be efficient since you can supply Plot with columnar data. But having transforms integrated with plotting is convenient for fast exploration, especially since it plays nicely with faceting.

We allude to this in overview, but yes it is our intention to leverage Observable’s dataflow for interactivity, both for any cell to drive what is shown in a plot, and for the plot to drive computation in downstream cells. E.g., you can brush a scatterplot and then show the selected data in a table. Observable Plot is designed to work with Observable Inputs (or anything else interactive):

https://observablehq.com/@observablehq/inputs

Plot is designed to leverage Observable’s language-level interactivity (dataflow) rather than design a new interaction system that is limited to within the visualization.

[jacobolus]

The first-order difference seems to be: Plot looks designed to be quicker to learn and take less syntax when you want to throw something generic up quickly, with an API carefully designed to get out of the way.

One of the things I have previously found Javascript to lack compared to Matlab, R, Python, or Julia (or Excel for that matter) for doing exploratory data analysis is a standard dead-simple plot tool when you want to draw a bar chart or scatter plot without thinking about it or making any up-front decisions.

Vega-lite (and especially D3) make it possible to make pretty and sophisticated charts with lots of bells and whistles, but I still find vega-lite heavyweight when I want a plot right now. This would surely get easier with experience, but for a newcomer it still adds noticeable friction.

[acomjean]

That was my reaction. It seems very similar (which makes sense, they're all using grammar of graphics style).

Vega Lite is very close to R's ggplot2, so we use it for our online science visualizations. The built in downloading svg/pngs built in is pretty awesome.

Vega-Lite it gets us 90% of the way there easily, the remaining 10% is always a struggle. Its well documented but sometimes lacks examples (In a side by side bar graph, how do I move the column heading to the bottom. (column->header->labelOrient: Bottom..)

We plot single cell experiment data (lots of points) and we find vegalite, very performant.

But We'll give this a look. The Javascript transforms seem nice.

[oandrew]

How does this compare to Apache Echarts (https://echarts.apache.org/en/index.html) ?

p.s. My favorite data exploration toolkit is Clickhouse + Tabix (it uses apache echarts). e.g. https://tabix.io/doc/draw/Draw_Chart/

[skadamat]

I'm very excited about ECharts, Superset is moving all of their charts to ECharts (I wrote about this in fact: https://preset.io/blog/2021-4-1-why-echarts/)

[simonw]

I'm so excited about this release. I use and like Vega-Lite, and this is openly inspired by that.

The ideas embedded in Vega-Lite are such good ideas that having an alternative implementation of them - especially with the pedigree of D3 and Observable behind them - is a big win. I can't wait to see what happens as Vega-Lite and Observable Plot continue to be inspired by each other in the future.

[domoritz]

Thanks for the Vega-Lite feedback. We are huge fans of Observable and D3 and will see what we can learn from Plot.

[laGrenouille]

Exciting work; great to see the new wave of data science oriented JavaScript modules like this and Arquero focused on general principles such as the grammar of graphics and relational algebra.

If I could make a suggestion to the author: it would be a great selling point to include some interactivity in the example demo. This is really hard in R and Python, but easy in JavaScript, and would be a good/easy selling point to a lot of data science people.

[mbostock]

Thanks for the suggestion. We will be adding more examples soon (both interactive inputs driving plots, and interactive plots driving outputs). Here’s one with a search box:

https://observablehq.com/@mbostock/us-covid-vaccinations

[cphills]

This looks great! I spent a few months earlier this year learning and implementing D3 and while a little bit of a learning curve to pick up, it made sense once you got into the flow of things. Looking at this and amazed with how simple it could have been to use as a starting point if there was no need for customization. Great addition to the growing JS solutions for data needs. Another step and tool towards a JS suite of tools for data analysis!

[antew]

As a D3 user for years, this looks great, the API looks really clean, congrats on the release!

[mbostock]

Thank you!

[mf_viz]

If you're interested in learning more about Plot, we'll be streaming a free workshop about it on May 18th! Details here: https://www.meetup.com/observablehq/events/277855082/

[ZeroCool2u]

When I think of easy to use charting for almost any scientific domain I work with, I usually think of Plotly. How does this compare with Plotly?

[nicolaskruchten]

If you're familiar with Plotly Express in Python, this is like a Javascript API with similar feel. It's a lot less verbose than the equivalent raw Plotly.js code.

[aarondia]

I've been reading about D3 and am thinking about integrating it into my React project. But I've come across a number of posts that discuss how React & D3 don't play nicely together because they both manipulate the DOM. [1] is a good starting point for this deep dive.

Does Observable Plot resolve those issues or do we need still to be careful integrating it into a React environment?

[1] https://medium.com/capital-one-tech/a-comparison-of-data-vis...

[chaps]

This is really neat! 'Been using observable for about a year now, and I really appreciate how easy it is to share notebooks with it. Circular dependencies can be fun, but that's not really unexpected considering the model y'all use.

How well does this framework do with something relatively complex like an animated choropleth? Vega-lite and D3 can do them both, but they can both get complicated pretty quickly.

[mbostock]

We (and by we I really mean my inimitable collaborator Philippe Rivière) have started prototyping plugins for rendering geographic shapes using D3 projections, so I expect Plot would be able to support this fairly soon. Then you can use something like this Scrubber component to drive the animation:

https://observablehq.com/@mbostock/scrubber

[boardwaalk]

Are there Typescript definitions? Bit of a JS/TS noob, maybe it’s obvious, but I couldn’t find any.

[tophtucker]

Not currently, but we’ve talked about it. We’ve been using a lot more TS internally lately so there’s a growing case and it’s good to hear your vote.

[iddan]

I published a thin wrapper for React https://github.com/iddan/plot-react

[kickout]

Nice....Appreciate the drive towards easier use and non-programmers in general. D3 and Observeable in general are doing excellent work

[terpimost]

Awesome. Does it require access to the document/window or it can be used in React?

[terpimost]

Ok, I see it does use document since there is d3.create() is under the hood.

[epgui]

This seems very well crafted. You have my attention!