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 WidgetImage LoaderThrottleBrushable HistogramOn Click ButtonCached WidgetPersistent Table
Input Number
viewof val = InputNumber([0,10], {label: "Label: "})
val
function InputNumber(
range = [0, 10],
{
step = 1,
value = 0,
label = "",
pattern = "[0-9]*.?[0-9]{0,2}",
format = (_) => parseFloat(_).toFixed(2),
inputStyle = "margin-left: 5px;"
} = {}
) {
const [min, max] = range;
const input = htl.html`<input
type=${isMobile() ? "text" : "number"}
style=${inputStyle}
inputmode="decimal"
pattern="${pattern}"
placeholder="${min}"
min=${min}
max=${max}
step=${step}
value=${value}
name="min"></input>`;
const widget = ReactiveWidget(htl.html`<label>${label}${input}</label>`, {
value,
showValue
});
function showValue() {
console.log("🔢 input show Value", widget.value, input.value);
// input.value = format(widget.value);
}
input.addEventListener("blur", function (evt) {
evt.stopPropagation();
evt.preventDefault();
// console.log("input blur", input.value, widget.value);
// Only format if there's a value and it's a valid number
if (this.value !== undefined && !isNaN(parseFloat(this.value))) {
this.value = format(this.value);
}
});
input.addEventListener("input", (evt) => {
console.log("input", input.value);
if (input.value !== undefined && !isNaN(parseFloat(input.value))) {
console.log("✅ input setting", input.value);
evt.stopPropagation();
widget.setValue(+input.value);
}
});
return widget;
}
ReactiveWidget = require("reactive-widget-helper")
isMobile = () => /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
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.
