Computer Graphics & Visualization @ufrj.br
Published
Edited
Nov 5, 2021
2 forks
Importers
9 stars
viewof ex0 = htl.html`<input type=range min=1 max=40 step=1 value=30 style="width:100px">`
ex0
viewof ex1 = pack({
things: htl.html`<input type=range min=1 max=40 step=1 value=30 style="width:100px">`,
items: htl.html`<input type=range min=1 max=40 step=1 value=30 style="width:100px">`,
goodness: htl.html`<input type=range min=1 max=40 step=1 value=30 step=0.1 style="width:100px">`
})
ex1
Range([1, 10])
Range([1, 10], { label: "Things:" })
Range([1, 10], {
step: 0.1,
value: 3.4,
format: (x) => x.toFixed(1) + " Things"
})
Range([1, 10], { style: "padding:5px;border:1px dashed gray" })
Range([1, 10], { label: "Things:", vertical: true })
viewof ex2 = pack({
things: Range([1, 10], { label: "things:" }),
items: Range([0, 20], { label: "items:" }),
goodness: Range([0, 5], { step: 0.1, label: "goodness:" })
})
ex2
//
// Suggestion of default style for the range input components created by functions
// in this notebook. Import this style along with the function(s) or adapt it to your needs.
//
rangeStyles = htl.html`<style>
.Range, .Popup {
display: inline-flex;
align-items:center;
font-family:sans-serif;
font-size: 10pt;
}
.Range input[type=range] {
width:100px;
}
.Range input[type=range][orient=vertical] {
width:8px;
height:100px;
}
.Range label {
margin-right: 5px;
}
.Range output {
margin-left:5px;
}
.Popup button{
margin-right:10px;
}
</style>
`
Range([1, 10], { label: "Things: " })
Range([1, 10], { label: "Things: ", className: "NoStyle" })
Range([1, 10], { label: "Things", className: "Custom" })
//
// Custom styles for range input components
//
customStyles = htl.html`<style>
.Custom {
font-family:monospace;
font-weight:bold;
font-size: 12pt;
background:#eee;
padding:0.5em 1em;
border:4px outset #ccc;
}
.Custom input[type=range] {
width:120px;
}
.Custom label {
margin-right: 5px;
}
.Custom output {
margin-left:5px;
}
</style>
`
BubbleRange([1, 10])
BubbleRange([1, 10], {
format: (x) => x + " things",
vertical: true
})
pack({
things: BubbleRange([1, 10], { label: "things:", value: 10 }),
items: BubbleRange([0, 20], { label: "items:" }),
goodness: BubbleRange([0, 5], { step: 0.1, label: "goodness:" })
})
pack(
{
things: BubbleRange([1, 10], {
vertical: true,
label: "things:"
}),
items: BubbleRange([0, 20], {
vertical: true,
label: "items:"
}),
goodness: BubbleRange([0, 5], {
vertical: true,
step: 0.1,
label: "goodness:"
})
},
{ sep: 35 }
)
pack(
{
things: HideInput("things", BubbleRange([1, 10])),
items: HideInput("items", BubbleRange([0, 30])),
goodness: HideInput(
"goodness",
BubbleRange([0, 5], { step: 0.1, format: d3.format("0.1f") })
),
howmuch: HideInput(
"how much?",
htl.html`<input type=text value="very much indeed">`
)
},
{ sep: 20 }
)
pack(
{
things: HideInput("things", Range([1, 10], { vertical: true })),
items: HideInput("items", Range([0, 30], { vertical: true })),
goodness: HideInput(
"goodness",
Range([0, 5], { step: 0.1, vertical: true, format: d3.format("0.1f") })
),
howmuch: HideInput(
"how much?",
htl.html`<input type=text value="very much indeed">`
)
},
{ sep: 20 }
)
pack(
{
things: HideInput("things", Range([1, 10], { vertical: true }), {
pop: true
}),
items: HideInput("items", Range([0, 10], { vertical: true }), {
pop: true
}),
goodness: HideInput(
"goodness",
Range([0, 5], { step: 0.1, vertical: true, format: d3.format("0.1f") }),
{ pop: true }
),
howmuch: HideInput(
"how much?",
htl.html`<input type=text value="very much indeed">`
)
},
{ sep: 20, style: "border:1px solid gray;min-height:80px;padding:0 10px;" }
)
a = Range([1, 2])
a.querySelector("span")
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.
