I love to build dataviz for insight discovery. I also love to put technology to the service of humanity
Reusable and Reactive Visualization Widgets or ComponentsSearch Checkbox 🔎☑Faceted SearchChoropleth MapMulti Auto SelectScented CheckboxNavioVega SelectedPersist InputVega crossfilterSpaceTreeTree, ValueCollapsible TreeTree, Tidy fit to HeightZoomable Variable Size IcicleVisualize ERD SQLITE3 (WIP)Conditional ShowBrushable ScatterPlot (Reactive Widget)Force Directed Reactive WidgetThrottleBrushable HistogramInput NumberOn Click ButtonCached WidgetPersistent Table
Image Loader
viewof files = ImageLoader()
files
function ImageLoader({ width = 50, files = [] } = {}) {
const filesIn = Inputs.file({
multiple: true,
accept: ".jpg, .png,.tiff,.png"
});
const thumbsHolder = htl.html`<output></output>`;
const target = htl.html`<div>
${filesIn}
<div>
<style>
img {
max-width: 50px;
max-height: 50px;
}
</style>
${thumbsHolder}
</div>
</div>`;
async function showValue() {
const thumbs = htl.html`${await Promise.all(widget.value.map((i) => i.image()))}`;
thumbsHolder.innerHTML = "";
thumbsHolder.appendChild(thumbs);
}
const widget = ReactiveWidget(target, {
value: files,
showValue
});
filesIn.oninput = (evt) => {
evt.stopPropagation();
evt.preventDefault();
widget.setValue(filesIn.value);
};
return widget;
}
// ReactiveWidget = require("reactive-widget-helper")
import {ReactiveWidget} from "@john-guerra/reactive-widgets"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
