Reactive widgets allow you to build your visualization application in a more modular way, facilitating reusability and replicability of experiments.
Think of them as interactive building blocks for your visualizations!
A Reactive Visualization widget displays data and allows users to directly interact with it (e.g., select a bar in a bar chart 📊). It then emits events based on these interactions (e.g., signaling which bars are selected).
Reactive widget specification
A reusable and reactive visualization widget should be:
-
A function that returns:
- an 🧱 HTML Element
-
and the 🎯 user selection in the
value attribute of the element.
- Receives:
- some 🗃️ input data (usually in tidy format)
-
an 🎛️ options object
- 📣 Emits input events when there is an user interaction
- and 👂🏼 listens to input to the same event to reflect changes made on other widgets
TL;DR Usage
Helper Function
To use within observable just
import { ReactiveWidget } from "@john-guerra/reactive-widgets"
// Outside of observable the easiest is to copy and pase
function MyWidget(
data, { value = 0 } = {}
) {
let widget;
const element = htl.html``; // ✅ Add here the code that creates your widget as an HTML element
function showValue() {
/* ✅ Add here the code that updates the current selection */
}
// 🧰 Then wrap your visualization (html element) with the reactive value
// and input events
let widget = ReactiveWidget(element.node(), { value, showValue });
// 🧰 Show the initial value
showValue();
// 🧰 Finally return the html element
return widget;
}