Public
Edited
Mar 9, 2023
1 star
options=(
{
speed:40,
types:'two',
color:[0,128,255],
age:5
});
function r2(){
const container =DOM.element("div");
const form=DOM.element("form")
//autoPlace is true by default, which will display outside cell,so change to false.
const gui = new dat.GUI({ autoPlace: false })
/*
!!! IMPORTANT:
special handle for color,or observable will not observe the change imediately.
same with range control
so you can simplely add .onChange for all control to dispatchEvent again
*/
gui.addColor(options,'color').onChange(v=>form.dispatchEvent(new CustomEvent("input", {bubbles: true})))
gui.add(options,'types',['one','two','three'])
gui.add(options,'speed',{slow:1,fast:40})
gui.add(options,'age',1,40)
form.append(gui.domElement)
container.value=options
container.append(form)
return container
}
viewof c = r2()
c.color
[c.types,+c.speed]
config=[
{type:'folder',key:'Figure'},
{type:'control',key:'width',defaultValue:600,args:[200,1000]} ,
{type:'control',key:'height',defaultValue:400,args:[200,800]} ,
{type:'folder',key:'X axis'},
{type:'control',key:'X',defaultValue:'height',args:[['height','weight']]} ,
{type:'control',key:'threshholds',defaultValue:20,args:[2,50,2]} ,
{type:'folder',key:'Y axis'},
{type:'control',key:'Y', defaultValue:'sum',args:[['count','sum']]} ,
{type:'folder',key:'Colors'},
{type:'control',key:'stroke',defaultValue:'sex',args:[['sex','nationality']]} ,
{type:'color',key:'background',defaultValue:[255,255,255]} ,
{type:'color',key:'color',defaultValue:[0,0,0]}
]
function OptionPane(config){
const data={}
const container =DOM.element("div");
const form=DOM.element("form")
//autoPlace is true by default, which will display outside cell,so change to false.
const gui = new dat.GUI({ autoPlace: false })
config.forEach(item=>{
console.log(item)
const {type,key}=item
switch(item.type){
case 'folder':
gui.addFolder(key)
break;
case 'control':
const {defaultValue,args}=item
data[key]=defaultValue;
gui.add(data,key,args[0],args[1]?args[1]:null,args[2]?args[2]:null,args[3]?args[3]:null)
.onChange(v=>form.dispatchEvent(new CustomEvent("input", {bubbles: true})))
break;
case 'color':
data[item.key]=item.defaultValue;
console.log('color',data,item)
gui.addColor(data,item.key).onChange(v=>form.dispatchEvent(new CustomEvent("input", {bubbles: true})))
break
default:
console.log('Unsported control')
}
})
form.append(gui.domElement)
container.value=data
container.append(form)
return container
}
Plot.plot({
height: option.height,
width:option.width,
marks: [
Plot.barY(olympians, Plot.binX({ y:option.Y }, { x: option.X ,fill:option.stroke,thresholds: option.threshholds})),
Plot.ruleY([0])
],
style:{
background:`rgb(${option.background.join(",")})`,
color:`rgb(${option.color.join(",")})`
}
})
Inputs.table(olympians)
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.
