I love to build dataviz for insight discovery. I also love to put technology to the service of humanity
Public
Edited
May 11, 2024
Paused
Importers
9 stars
Reusable and Reactive Visualization Widgets or ComponentsSearch Checkbox 🔎☑Faceted SearchChoropleth MapMulti Auto SelectScented CheckboxNavioVega SelectedVega crossfilterSpaceTreeTree, ValueCollapsible TreeTree, Tidy fit to HeightZoomable Variable Size IcicleVisualize ERD SQLITE3 (WIP)Conditional ShowBrushable ScatterPlot (Reactive Widget)Force Directed Reactive WidgetImage LoaderThrottleBrushable HistogramInput NumberOn Click ButtonCached WidgetPersistent Table
Persist Input
Also listed in…
Observable Tricks
viewof name = PersistInput(
"name",
Inputs.text({ label: "name", value: "initial Value" })
)
viewof choice = PersistInput("choice", Inputs.select(["1", 2, "3", 4]))
viewof r = PersistInput("radius", Inputs.range())
viewof checks = PersistInput("checks", Inputs.checkbox(["two words", "{B, C}", "D"]))
PersistInput = (field, input) => {
const getHashValue = () => {
let hashValue = new URLSearchParams(location.hash.slice(1)).get(field);
try {
hashValue = JSON.parse(hashValue);
} catch {}
return hashValue ? hashValue : input.value;
};
const setHashValue = (val) => {
const params = new URLSearchParams(location.hash.slice(1));
params.set(field, JSON.stringify(val));
html`<a href="#${params.toString()}">`.click();
};
const setInput = (val) => {
input.value = val;
input.dispatchEvent(new Event("input", { bubbles: true }));
};
const onInputChange = () => {
setHashValue(input.value);
};
input.addEventListener("input", onInputChange);
setInput(getHashValue() || input.value);
onInputChange();
return input;
}
copyURL = {
const target = html`<button>Copy URL`;
target.addEventListener("click", () =>
navigator.clipboard.writeText(currentURL)
);
return target;
}
currentURL = Generators.observe((notify) => {
const hashchange = () => {
notify(document.baseURI);
};
hashchange();
addEventListener("hashchange", hashchange);
invalidation.then(() => removeEventListener("hashchange", hashchange));
})
viewof lo = logTracker()
function logTracker({ title = "Log", storageName = "persist-input" } = {}) {
let log = [];
const lsv = localStorageView(storageName, { json: true });
const inName = html`<input name="name">`;
const btnSave = html`<button type="submit">Save`;
const listLogs = html`<ul>`;
const target = html`
<h3>${title}</h3>
${listLogs}
<form><label>Name: ${inName}<label>${btnSave}</form>
`;
log = [];
function set(val) {
target.value = val;
target.dispatchEvent(new Event("input", { bubbles: true }));
}
function renderLogs() {
listLogs.innerHTML = "";
const logsElems = log.map((l) => {
const btnRemove = html`<button>❌`;
btnRemove.onclick = () => {
log.splice(log.indexOf(l), 1);
set(log);
};
return html`<li><a href=${l.url} target="_blank">${l.name}</a> ${btnRemove}</a></li>`;
});
listLogs.appendChild(html`${logsElems}`);
}
btnSave.onclick = (evt) => {
evt.preventDefault();
target.value.push({
name: inName.value,
url: currentURL,
created_at: new Date()
});
inName.value = "";
set(target.value);
};
// Update the display whenever the value changes
Object.defineProperty(target, "value", {
get() {
return log;
},
set(v) {
log = v || [];
renderLogs();
}
});
return Inputs.bind(target, lsv);
}
import { localStorageView } from "@tomlarkworthy/local-storage-view"
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.
