Web Platform Advocate at @CloudinaryLtd
Published
Edited
May 31, 2022
Plot.plot({
width: width,
marginBottom: 50,
grid: true,
y: { percent: true, domain: [0, 100] },
marks: [
Plot.areaY(
dprs,
{ x: "dpr", y: "cumulativePercentOfSessions", fill: "steelblue", opacity: 0.75 }
),
Plot.ruleY([0])
]
})
data = FileAttachment("gov_uk_width_dpr.json").json()
processedData = data.map(o => ({
dpr: o.dpr,
sessionsPercent: o.sessions / totalSessions
}))
dprs = {
let results = [];
for( let i = 0.01; i < maxDPR; i += 0.01 ) {
results.push( {
dpr: i,
cumulativePercentOfSessions: processedData
.filter( d => d.dpr <= i )
.reduce( ( acc, cv ) => acc += cv.sessionsPercent, 0 )
} );
}
return results;
}
totalSessions = data.reduce( ( totalSessions, o ) => {
return totalSessions + o.sessions;
}, 0 )
maxDPR = d3.max( data, d => d.dpr )
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.
