Using Observable Plot in Vue
#dataviz #howto
Observable Plot is an awesome tool for quickly sketching and exploring data. It is wonderful when paired with Vue, which can handle user interactions, routing, and state management that can be a bridge between a prototype and a functional tool.
Observable Plot is a free, open-source JavaScript library to help you quickly visualize tabular data. It has a concise and (hopefully) memorable API to foster fluency — and plenty of examples to learn from and copy-paste.
Plot makes it very easy to try out lots of different visual forms without hand-building everything. Because of that, Observable and Plot are a crucial part of the exploratory process of beginning to become acquainted with a dataset and beginning to interrogate a dataset
Getting set up
npx nuxi init PROJECT-NAME
installs a blank Nuxt 3 project ready to go.
Getting Observable Plot into Vue
yarn add @observablehq/plot
adds Plot to our project.
Then, at the top of any component where we want to use Plot, we need to import it: import * as Plot from '@observablehq/plot'
Making a chart with Plot and rendering with Vue
Vue and Observable Plot live in slightly different worlds that we need to bridge a bit. When we change our data, we want our Plot to automatically re-render. When we resize our page, we also want our Plot to automatically re-render. We will need to handle some of that in the way we build and call our chart within Vue.
Making a function to make the viz
Getting the data and rendering it
Triggering chart updates when the data changes
First we load the data using fetch:
We need a computed property that holds the HTML of the rendered Plot based on the data we just updated.
Then we render this computed HTML with a simple template
One-time Support
Every bit matters. Thank you!