Public
Edited
Aug 27, 2023
viewof opt = Inputs.form([
Inputs.radio(['light', 'dark'], {label: html`<i>Select theme:</i>`}),
Inputs.toggle({label: "Include logo?"}),
Inputs.range([25, 100], {value: 75, label: html`<span style="background-color: rgb(250, 207, 57);">Logo size:</span>`, step: 5}),
Inputs.range([0, 100], {label: "Value:", value: 1}),
Inputs.text({label: "Text", value: "Text to plot..."}),
Inputs.button("Click me"),
Inputs.checkbox(["salty", "sweet", "bitter", "sour", "umami"], {label: "Flavors"}),
Inputs.select([null].concat(island), {label: "Home state"}),
Inputs.select(island, {label: "Visited states", multiple: 5}),
Inputs.textarea({label: "Biography", placeholder: "What’s your story?"}),
Inputs.date({label: "Birthday"}),
Inputs.color({label: "Favorite color", value: "#4682b4"}),
Inputs.file({label: "CSV file", accept: ".csv", required: true}),
Inputs.search(island, {placeholder: "Search U.S. capitals"}),
//Inputs.table(penguins)
])
ns = Inputs.text().classList[0]
html`<style>
/* all */
.${ns}{
/*background-color: gray;*/
}
/* label */
.${ns} label {
border: 0px;
background-color: #ebebeb;
border-radius: 10px;
padding: 10px;
accent-color: black;
border-style: none;
}
.${ns} label:hover {
background-color: red;
}
/* right side */
.${ns} div {
background-color: steelblue;
padding: 0.5rem 0.5rem;
border-radius: 0.5rem;
}
/* right side: label */
.${ns} div label {
background-color: #f4f4f4;
padding: 0.25rem 0.5rem;
border-radius: 0.5rem;
font-weight: normal;
}
.${ns} div label:hover,
.${ns} div label:active,
.${ns} div label:focus {
background-color: #cdecff;
}
/* right side: input */
.${ns} input {
background-color: lightgray;
color: red;
accent-color: rebeccapurple;
padding: 0.5rem 0.5rem;
border-radius: 0.5rem;
}
.${ns} input:hover {
background-color: gray;
color: blue;
}
/* font */
:root {
--sans-serif: "Roboto Mono", sans-serif;
}
</style>`
html`<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">`
island = penguins.map(d => d.island)
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.
