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)
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.