datasette-plot - a new Datasette Plugin for building data visualizations

It seems like everyday there's a new frontend JavaScript framework being invented, but JavaScript data visualization frameworks are a once-in-a-lifetime phenomenon. Sure, there are the famous ones like Vega, Recharts, and Plotly.js, all of which depend on some way on D3, the quintessential low-level JavaScript visualization library. But building re-usable data viz libraries and components is hard, so novel data viz frameworks are rare.

Which is why I was shocked when Observable Plot was released in 2021! Created by the original D3 creator Mike Bostock, maintained by the Observable team. Even if you spend just a few minutes scrolling through the Plot Gallery, you'll soon understand how intricate and beautiful data visualization can be in Plot.

But more importantly - the code used to create these visualization is short! Take for example the Stacked area chart example in Plot. Normally, building stacked area charts in pure D3 would typically be a painful and long experience, filled with bugs are sadness (trust me on this). But in Plot, it basically boils down to a single line:

Plot.areaY(unemployment,  {
    x: "date", 
    y: "unemployed", 
    fill: "industry", 
    title: "industry"
}).plot()

So, as we reviewed what data visualizations options we have in Datasette, we decided to combine Plot's expressive, simple charts with Datasette's collaborative and explorative interface.

The result — datasette-plot!

How datasette-plot works

datasette-plot is a Datasette plugin that can be install with:

datasette install datasette-plot

Once installed, navigate to a table or SQL query in Datasette (or try this demo), and you'll see a new "Show plot" option like so:

Once clicked, you'll be greeted with a default chart with some columns pre-configured.

In this case, the default "visualization mark" is a single Dot plot. The first two numerical columns are used as X and Y, with default black dots.

Let's make it pop with some color! In this Palmer Penguins dataset, we'll change the color of the dots based on which island the penguin lives on.

And datasette-plot doesn't just allow one visualization mark, we can have multiple! Let's add a linear regression mark for each island group.

And for good measure, one more linear regression mark for the entire dataset.

Once you have configured your visualization to your liking, you can share your creation with friends and coworkers with the Link to this plot option right below your chart. That link will encode your visualization options in the URL like so:

http://localhost:8000/test/unemployment?_plot-mark=%7B%22mark%22%3A%22area-y%22%2C%22options%22%3A%7B%22x%22%3A%22date%22%2C%22y%22%3A%22unemployed%22%2C%22fill%22%3A%22industry%22%2C%22tip%22%3Atrue%7D%7D

It's a bit long and unwieldily (may change in the future 👀), but it will link directly back to the same table/SQL query and visualization that you have configured.

Future datasette-plot features

This is initial release of datasette-plot is a small proof-of-concept experiment to see if Plot was a good choice for Datasette. And so far, it is! We plan on making incremental improvements to this plugin to make it an integral part of your workflows. Some of our planned improvements include:

More visualization marks

Observable Plot supports dozens of different visualzation marks, but datasette-plot only uses 4 of them so far! We plan to add more, so let us know which you'd like to see!

Better sharing options

Sharing by URL is great, it would be nice to create re-usable data visualization for use across your tables. Maybe you have a chart that you want to re-use every month, or on different tables with similar schemas. Currently you'd have to rebuild the chart from scratch on every new table, which isn't very fun. Let us know what you think!

Richer data types

datasette-plot defaults to only strings/numbers/nulls when plotting data. The downside: no dates! Observable Plot requires JavaScript Date() objects to properly plot time-series data. Follow #3 for updates on this!