Public
Edited
May 7, 2023
N=100
samples = Array.apply(null, {length: N}).map(Function.call, Math.random).map(d=>{return{unit:d}})
bins = Plot.lineY(samples, Plot.binX({y: "count"}, {x: "unit", thresholds:20, curve:"bump-x", opacity:0.2})).initialize().channels
tldr = [
{
metric:"AWA",
x:d3.median(bins.x.value),
y:d3.max(bins.y.value)/2,
text:d3.format(".1f")(d3.median(samples.map(d=>d.unit))),
min:d3.min(bins.y.value),
max:d3.max(bins.y.value),
unit:"m/s"
}
]
viewof size = Inputs.range([1,720],{step:1})
widget(size)
widget = (size) => Plot.plot({
width:size,
height:size,
x: {axis:false,grid: false},
y: {axis:false,grid: false,domain:[0,d3.max(bins.y.value)]},
marks: [
Plot.frame({stroke:"black"}),
Plot.areaY(samples, Plot.binX({y: "count"}, {x: "unit", thresholds:20, curve:"bump-x", opacity:0.2})),
Plot.text(tldr,{
x:"x",
y:"y",
text: "text",
fontSize:size/2,
fontStretch:0.5,
fontWeight:700,
lineAnchor:"middle",
stroke:"#000",
fill:"#444",
fillOpacity:0.8,
paintOrder:"fill"
}),
Plot.text(tldr,{
x:1,
y:"y",
text:"unit",
fontSize:size/18,
fontWeight:900,
textAnchor:"end",
lineAnchor:"middle",
fillOpacity:0.8,
paintOrder:"fill"
}),
Plot.text(tldr,{
x:1,
dx:-4,
dy:4,
y:"max",
text:"metric",
fontWeight:900,
fontSize:size/12,
textAnchor:"end",
lineAnchor:"top",
fillOpacity:0.8,
paintOrder:"fill"
}),
Plot.text(tldr,{
x:"x",
y:0,
dy:-4,
fontSize:size/24,
lineAnchor:"bottom",
text:d=>`min: ${d.min} ${d.unit} max: ${d.max} ${d.unit}`,
//textAnchor: "middle",
})
]
})
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.
