Public
Edited
Feb 19
vals = d3.range(5)
dist = [0.2,0.3,.15,.25,.1]
avg = d3.sum(d3.zip(vals,dist).map(([a,b])=>a*b))
rcdist = d3.reverse(d3.cumsum(d3.reverse(dist)))
mutable choice=0
makeRects = (val) => [...rcdist,0].slice(val+1).map((cprob,i) =>
svg`<rect x=${val*rwidth} y=${cprob} width=${rwidth} height=${dist[val+i]} fill=${rcolor(val, val+i)}
style="stroke:white;stroke-width:0.01">`)
makeText = (x,y,t,s) => svg`<g transform="translate(${x},${y}) scale(0.004,-0.004)">
<text style="${s}font-family:sans-serif">${t}</text></g>`
rwidth = 1/vals.length
rc_avg = d3.sum(rcdist.slice(1))
cdist = d3.cumsum(dist)
c_avg = 4 - d3.sum(cdist.slice(0,-1))
color = d3.scaleOrdinal(d3.schemeCategory10)
rcolor = (v,i) => v==0?'#eeeeee': color(choice?i:v)
tcolor = (nr,i) => (choice==nr && i>0) ? color(i) : "#000000"
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.
