Senior Data Scientist, MassMutual
Lecturer, UC Berkeley MIDS
--
PhD Applied Math, Computational Story Lab, UVM
MS Applied Math, UVM
BS Math, Virginia Tech
Public
Edited
Aug 5, 2024
width
Inputs.radio(letters)
letters = d3.range(26).map(i => String.fromCharCode(97 + i));
Inputs.radio(
letters,
{
style: "width: 1000px;"
}
)
viewof selection = html`
<div style="width: 1000px; padding: 10px;">
${Inputs.radio(
letters,
{ label: "Choose a letter:", value: "a" }
)}
</div>
`
viewof selection2 = html`
<style>
.radio-container {
display: flex;
flex-wrap: wrap;
gap: 10px;
max-width: 100%;
}
.radio-container > form {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.radio-container label {
display: flex;
align-items: center;
margin-right: 10px;
}
</style>
<div class="radio-container">
${Inputs.radio(
letters,
{ label: "Choose a letter:", value: "a" }
)}
</div>
`
viewof selection3 = {
const form = html`
<style>
.custom-radio-container {
display: flex;
flex-wrap: wrap;
gap: 10px;
max-width: 100%;
}
.custom-radio-label {
display: inline-flex;
align-items: center;
margin-right: 10px;
}
</style>
<form class="custom-radio-container">
${letters.map(letter => html`
<label class="custom-radio-label">
<input type="radio" name="letter" value="${letter}" ${letter === "a" ? "checked" : ""}>
${letter}
</label>
`)}
</form>
`;
form.oninput = () => form.value = form.querySelector('input:checked').value;
form.value = "a";
return form;
}
selection3
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.
