2d:null 2e:["$","title",null,{"children":"Reusable and Reactive Visualization Widgets or Components | John Alexis Guerra Gómez | Observable"}] 33:Ta1a,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: ${md`* A **function** that returns: * an 🧱 [**HTML Element**](https://developer.mozilla.org/en-US/docs/Web/API/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 ~~~js 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; } ~~~ These reactive widgets build upon the guidelines of Observable's [custom inputs](https://observablehq.com/@tophtucker/custom-input-example) and [synchronized inputs](https://observablehq.com/@observablehq/synchronized-inputs) ## Contents * [Reactive Widget template](#reactiveWidgetTemplate) * [Helper function](#helperFunction) * [D3 Example](#d3Example) * [Vega Example](#vegaExample) * [Vanilla Javascript Example (outside Observable)](#ES6Example) * [Example Applications and Widgets](#examples) ~~~34:T560,function ReactiveWidgetTemplate( data, { value = 0 // following observable inputs, the value option contains the intial value } = {} ) { // 🧰 The interval value selected by the user interaction let intervalValue = value; // 🧰 The HTML element that we will return // ✅ Add here the visual representation of your widget let target = htl.html`${intervalValue} `; // 🧰 Usually you have a function to reflect in the UI the current value function showValue() { // ✅ Add here the code that updates the current interaction target.querySelector("output").value = intervalValue; } // 🧰 And a function to update the current internal value. This one triggers the input event function setValue(newValue) { intervalValue = newValue; showValue(); target.dispatchEvent(new CustomEvent("input", { bubbles: true })); } // 🧰 The value attribute represents the current interaction Object.defineProperty(target, "value", { get() { return intervalValue; }, set(newValue) { intervalValue = newValue; showValue(); } }); // 🧰 Listen to the input event to show the current interaction target.addEventListener("input", showValue); // 🧰 Finally return the html element return target; }35:T5f1,BrushableHistogram = function ( data, { value = [], x = (d) => d[0], xLabel = "", width = 600, height = 300, marginBottom = 30, vertical = false } = {} ) { // ✅ Add here the code that creates your widget let element = Histogram(data, { x, xLabel, width, height, marginBottom, vertical }); // 🧰 Enhance your html element with reactive value and event handling let widget = ReactiveWidget(element, { value, showValue }); // Enhance the Histogram with a brush function brushended(event) { let selection = event.selection; if (!event.sourceEvent || !selection) return; const [x0, x1] = selection.map((d) => element._xS.invert(d)); widget.setValue(vertical ? [x1, x0] : [x0, x1]); } const brush = (vertical ? d3.brushY() : d3.brushX()) .extent([ [element._margin.left, element._margin.top], [ element._width - element._margin.right, element._height - element._margin.bottom ] ]) .on("brush end", brushended); const gBrush = d3.select(element).append("g").call(brush); // 🧰 ShowValue will display the current internalValue brush position function showValue() { // ✅ Add here the code that updates the current interaction const [x0, x1] = widget.value; // Update the brush position gBrush.call(brush.move, x1 > x0 ? (vertical ? [x1,x0] :[x0, x1]).map(element._xS) : null); } showValue(); // 🧰 Finally return the html element return widget; }36:Tb19,function Histogram( data, { x = (d) => d[0], xLabel = "", yLabel = "Frequency", width = 600, height = 300, marginTop = 20, marginRight = 20, marginBottom = 20, marginLeft = 40, vertical = false } = {} ) { // Code from https://observablehq.com/@d3/histogram/ // Bin the data. const bins = d3.bin().thresholds(40).value(x)(data); const xRange = [marginLeft, width - marginRight]; const yRange = [marginTop, height - marginBottom]; // Declare the x (horizontal position) scale. const xS = d3 .scaleLinear() .domain([bins[0].x0, bins[bins.length - 1].x1]) .range(vertical ? yRange.reverse() : xRange); // Declare the y (vertical position) scale. const yS = d3 .scaleLinear() .domain([0, d3.max(bins, (d) => d.length)]) .range(vertical ? xRange : yRange.reverse()); // Create the SVG container. const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto;"); // Add a rect for each bin. svg .append("g") .attr("fill", "steelblue") .selectAll() .data(bins) .join("rect") .attr(vertical ? "y" : "x", (d) => vertical ? xS(d.x1) : xS(d.x0) + 1) .attr( vertical ? "height" : "width", (d) => vertical ? (xS(d.x0) - xS(d.x1) - 1) : (xS(d.x1) - xS(d.x0) - 1) ) .attr(vertical ? "x" : "y", (d) => (vertical ? yS(0) : yS(d.length))) .attr(vertical ? "width" : "height", (d) => vertical ? yS(d.length) : yS(0) - yS(d.length) ); // Add the x-axis and label. svg .append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call( d3 .axisBottom(vertical ? yS : xS) .ticks(width / 80) .tickSizeOuter(0) ) .call((g) => g .append("text") .attr("x", width) .attr("y", marginBottom - 4) .attr("fill", "currentColor") .attr("text-anchor", "end") .text(`${vertical ? yLabel : xLabel}→`) ); // Add the y-axis and label, and remove the domain line. svg .append("g") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(vertical ? xS : yS).ticks(height / 40)) .call((g) => g.select(".domain").remove()) .call((g) => g .append("text") .attr("x", -marginLeft) .attr("y", 10) .attr("fill", "currentColor") .attr("text-anchor", "start") .text(`↑ ${vertical ? xLabel : yLabel}`) ); // Exposing intervals svg.node()._margin = { left: marginLeft, right: marginRight, bottom: marginBottom, top: marginTop }; svg.node()._height = height; svg.node()._width = width; svg.node()._xS = xS; svg.node()._bins = bins; return svg.node(); }37:T4ac,## Using Reactive Visualization Widgets with Vanilla JavaScript (ES6+) Using this pattern outside of Observable is also simple. You just need to treat the widgets as HTML input elements, that can be added to the dom, and that generate input events when the interactions change, such as ~~~html

~~~ Here is a demo running on https://john-guerra.github.io/reactive-widgets-example-es6/ [👩🏻‍💻 Source](https://github.com/john-guerra/reactive-widgets-example-es6)