Published
Edited
Dec 27, 2021
3 forks
96 stars
viewof cake = controlPanel([
[
Ctrls.radioGroup("flavor", ["Vanilla", "Chocolate", "Coffee", "Strawberry"], {label: "Flavor:", value: "Vanilla"}),
Ctrls.radioGroup("shape", ["Circle", "Square", "Rectangle", "Triangle"], {label: "Shape:"})
],
[
Ctrls.slider("size", {label: "Size =", min:7, max:13, value:7}),
Ctrls.toggle("candle", {label: "Candle?"}),
Ctrls.dropdown("numOfCandles", [...Array(11).keys()].slice(1)),
Ctrls.radioGroup("card", ["None", "Happy Birthday", "Congratulations", "Good Job!!", "Custom"], {label: "Card:"}),
Ctrls.textBox("customText")
],
[
// Each choice in the toggleGroup becomes a property (camel case) in the controlPanel object
Ctrls.toggleGroup(["Flowers", "Wine", "Chocolates", "Ribbon"], {label: "Specials:", checked: false}),
Ctrls.colorButton("ribbonColor", {value:"#ff0000"})
],
[
Ctrls.date("date", {label: "Date:"}),
Ctrls.radioGroup("pickup", ["Pick up", "Deliver", "Ship"])
],
[Ctrls.rule()]
], {style: "font-family:sans-serif;font-size:10pt;pointer:default"});
cake
viewof userContent = controlPanel([
Ctrls.label({text: "Custom HTML Demo", bold: true, fontSize: "larger"}),
Ctrls.label({text: "Comment"}),
'<textarea name="comment" rows=4 cols=40></textarea>'
])
userContent
viewof radioGroups = controlPanel([
Ctrls.radioGroup("group1", [1, 2, 3], {label: "numbers"}),
Ctrls.radioGroup("group2", [["One", 1], ["Two", 2], ["Three", 3]], {label: "label-value pairs", value: 2})
])
viewof toggleGroups = controlPanel([
Ctrls.toggleGroup([1, 2, 3], {label: "numbers"}),
Ctrls.toggleGroup(["Show Axes", "Show Ticks", "Show Border"], {label: "strings (auto camelcase)", namespace: "tgexample"}),
Ctrls.toggleGroup([["Cake", "cake"], ["Cookies", "cookies", true], ["Coffee", "coffee", true]], {label: "tea time", checked: false})
])
controlPanel([[
Ctrls.dropdown("dropdown1", ["Tableau10", "Category10", "Set3"], {label: "Strings"}),
Ctrls.dropdown("dropdown2", [["Seattle", 0, "North West"], ["Portland", 1, "North West"], ["San Francisco", 2, "South West"], ["Los Angeles", 3, "South West"]], {label: "Option Group"})
]])
controlPanel([[
Ctrls.slider("slider1", {label: "No Number", showNumber: false}),
Ctrls.slider("slider2", {label: "Value = ", min: 100, max: 500, step: 50, value: 400})
]])
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.
