Public
Edited
Oct 27, 2022
9 stars
Also listed in…
Grid
Insert cell
Insert cell
viewof settings = (
Inputs.form(
{
spacing: Inputs.range([-width/4, +width/4], {label: "Spacing", value: 24, step: 1}),
radius: Inputs.range([0, +36], {label: "Radius", value: 9, step: .1}),
shift: Inputs.range([-5, +5], {label: "Shift", value: 0, step: .1}),
orientation: Inputs.radio(["x", "y"], {label: "Orientation", value: "x"})
},
{template}
)
)
Insert cell
settings
Insert cell
template = (inputs) =>
htl.html`<div class="styled">${Object.values(inputs)}</div>
<style>
div.styled {
text-align: right;
column-count: 2;
}
div.styled label {
font-weight: bold;
}
div.styled label:not(div>label):after {
content: ":";
}
</style>`
Insert cell

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.
Learn more