I love to build dataviz for insight discovery. I also love to put technology to the service of humanity
Public
Edited
Feb 25
Paused
1 fork
Importers
4 stars
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)Brushable ScatterPlot (Reactive Widget)Force Directed Reactive Widget
Conditional Show
Also listed in…
Observable Tricks
viewof selected = conditionalShow(await navio(penguins), {
label: htl.html`<h3 style="display:inline">Show Navio</h3>`,
checked: this ? this.checked : true, // keep previous value
// checked: false,
returns: (checked, navElem) => (checked ? navElem.value : navElem.value) // what do you want it to return
})
viewof selected.checked
selected
function conditionalShow(
element,
{
label = "Show",
checked = false,
returns = (checked, element) => element?.value || element,
// returns = (checked, element) => checked ? element?.value || element : null, // If you want it to return null when unchecked
bindInput = true,
showValueSummary = true
} = {}
) {
const show = htl.html`${label}`;
const container = htl.html`<div>${element}<div>`;
const valueSummary = htl.html`<output></output>`;
const target = htl.html`<details ${checked ? { open: true } : {}} >
<summary>${show} ${showValueSummary ? valueSummary : ""}</summary>
${container}
</details>`;
function updateValueSummary() {
if (
showValueSummary &&
target.value &&
target.value &&
Array.isArray(target.value)
) {
valueSummary.innerHTML = `(Returns ${target.value.length} elements)`;
} else {
valueSummary.innerHTML = ``;
}
}
function set(evt) {
if (evt) {
evt.stopPropagation();
}
target.value = returns(target.open, element);
target.checked = target.open;
console.log("target.open", target.open, target);
target.dispatchEvent(new Event("input", { bubbles: true }));
updateValueSummary();
}
set();
if (bindInput) {
element.addEventListener("input", set);
}
target.addEventListener("toggle", () => {
target.checked = target.open;
});
return target;
}
import { navio } from "@john-guerra/navio"
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.