prefixVarsInFormulaDiscrete distribution inputheightiframe testFenced code highlighterWhat's this?FullscreenSVG editingEditable SVGFile Uploaderpt - pretty-print matrices & tensorsHello html2canvasGeoJSON feature editorwidthTesting visibility continuouslyForce Simulation Web WorkermathHello SharedArrayBufferPrettier Observable BookmarkletD3 ProjectionsFullwidth Observable BookmarkletInvalidationHello iocaneDrag to re-arrangeSignatureHello JSON-editorWorkerd3.csv code snippetFormat Comma-Separated TreeLayers PerspectiveMy NotebooksCool Observable NotebooksCool Notebooks Circle
selectFlat input
value
viewof value = selectFlat({
options: ["A", "B", "C", "D"],
value: "B",
output: false,
description: "your choice"
})
html`${[a, b, c].filter(d => d > 1).join(' × ') || "1"} = ${a * b * c}`
viewof multipleSelect = selectFlat({
options: ["A", "B", "C", "D"],
value: "B",
output: true,
multiple: true,
description: "multiple selection"
})
multipleSelect
function selectFlatStyle(id, show_ouput = false) {
return html`
<style>
#${id} option {
height:1em; width: 1em; display: inline-block; overflow: hidden; background: #f4f4f4; margin-right:1px; border: 0.5px solid black;
color: transparent!important;
}
#${id} option.hovered { background: orange }
#${id} option.hovered:disabled { background: #CCC }
#${id} select {
overflow: hidden; height: 1.5em; border: 0!important;outline: none;
}
#${id} output {
display: ${show_ouput ? "inline-block" : "none"};
}
</style>`;
}
import { input } from "@jashkenas/inputs"
// adapted from "@jashkenas/inputs"
function selectFlat(config = {}) {
let {
value: formValue,
title,
description,
submit,
multiple,
size,
output,
options
} = Array.isArray(config) ? { options: config } : config;
options = options.map(o =>
typeof o === "object" ? o : { value: o, label: o }
);
var currentValue = null;
const id = DOM.uid().id;
const form = input({
type: "select",
title,
description: `${
description ? (output ? `${description}: ` : description) : ""
}<span>`,
submit,
getValue: input => {
if (currentValue !== null) return currentValue;
const selected = Array.prototype.filter
.call(input.options, i => i.selected)
.map(i => i.value);
return multiple ? selected : selected[0];
},
form: html`
<form class=selectBox id=${id}>
<select name="input" ${
multiple ? `multiple size="${size || options.length}"` : ""
}>
${options.map(({ value, label, disabled = false }) =>
Object.assign(html`<option>`, {
value,
selected: Array.isArray(formValue)
? formValue.includes(value)
: formValue === value,
disabled,
textContent: label
})
)}
</select>
${selectFlatStyle(id, output)}
</form>
`
});
form.output.style = "";
d3.select(form)
.select("span")
.node()
.appendChild(form.output);
const s = form.getElementsByTagName("select")[0];
s.size = 2;
d3.select(s)
.on("mouseleave", function() {
currentValue = null;
form.dispatchEvent(new CustomEvent("input"));
})
.selectAll("option")
.on("mouseenter", function() {
d3.select(this).classed("hovered", true);
currentValue = this.disabled ? null : multiple ? [this.value] : this.value;
form.dispatchEvent(new CustomEvent("input"));
})
.on("mouseleave", function() {
d3.select(this).classed("hovered", false);
});
return form;
}
d3 = require("d3-selection@1")
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.