Reactive Visualization Widgets

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).

• 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

To create a Reactive Widget

import { ReactiveWidget } from "@john-guerra/reactive-widgets"

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;
}

The Paper

Towards Reusable and Reactive Widgets for Information Visualization Research and Dissemination

Presentation

Fast forward presentation

Example applications and widgets

Here are some other examples that follow (at least in part) the idea of reactive visualization widgets

Helper functions

• vegaSelected vega/vega-lite helper function to convert any spec into a Reactive Widget
• ReactiveWidget helper function to convert a D3 visualization into a Reactive Widget

Examples

• IEEE VIS 2024 Papers Explorer
• US Federal Budget History
• CHI 2024 Papers Explorer
• UMAP Playground
• Guitar Improviser

Widgets

• Navio
• SpaceTree Widget
• Scented checkboxes, group data by attribute, count occurrences and select by those
• Multi Auto Select: select multiple attributes with a search box, and order them
• Search checkboxes: combine searching and checkboxes with select all/none buttons
• Collapsible Tree
• PersistInput make a widget persistent using URL
• Conditionally show a widget on demand
• Visualize SQLite
• A very basic Faceted Search input
• Vega Crossfilter

Observable Notebook