Web Platform Advocate at @CloudinaryLtd
Public
Edited
Mar 6, 2023
Importers
gov.uk dpr and viewport width data, july 2021
data = FileAttachment("gov_uk_width_dpr.json").json()
totalSessions = data.reduce( ( totalSessions, o ) => {
return totalSessions + o.sessions;
}, 0 )
roundViewportWidthBy = 10
roundDprBy = 1/32
checker = binned.reduce( ( a, o ) => a + o.sessionsPercent, 0 )
nonBinnedUniqueWidths = processed.reduce( (uniqueWidths, o) => uniqueWidths.add( o.viewportWidth ), new Set() ).size
nonBinnedUniqueDPRs = processed.reduce( (uniqueWidths, o) => uniqueWidths.add( o.dpr ), new Set() ).size
binnedUniqueWidths = binned.reduce( (uniqueWidths, o) => uniqueWidths.add( o.viewportWidth ), new Set() ).size
binnedUniqueDPRs = binned.reduce( (uniqueWidths, o) => uniqueWidths.add( o.dpr ), new Set() ).size
// userData looks like [ { viewportWidth, dpr, sessionsPercent }, +... ], and all percentages add to 1
function weightedRandomUserAgent( userData ) {
let i, sum=0, r=Math.random();
for (i in userData) {
sum += userData[i].sessionsPercent;
if (r <= sum) {
return { viewportWidth: userData[i].viewportWidth, dpr: userData[i].dpr }
};
}
}
weightedRandomUserAgent( binned )
gimme_a_user_agent = function() {
return weightedRandomUserAgent( binned );
}
sortedDprFrequencies = {
const dprs = processed.reduce( (ac, cv) => {
if ( ac[cv.dpr] ) {
ac[cv.dpr] += cv.sessionsPercent;
} else {
ac[cv.dpr] = cv.sessionsPercent;
}
return ac;
}, {} );
return Object.keys(dprs)
.map( dpr => ({ dpr: dpr, sessionsPercent: dprs[dpr] }) )
.sort( (a, b) => b.sessionsPercent - a.sessionsPercent );
}
sortedDprFrequencies.map( d => `${d.dpr}\t${d.sessionsPercent}` ).join('\n')
top = 2
topDprs = sortedDprFrequencies.slice(0, top).map( o => parseFloat(o.dpr) )
sortedDprFrequencies.slice(0, top).reduce( (a, o) => a + o.sessionsPercent, 0 )
sortedDprFrequencies.slice(top, -1).reduce( (a, o) => a + o.sessionsPercent, 0 )
longTail = processed.filter( o => !(topDprs.includes( o.dpr )) )
longTail.reduce( (ac, cv) => ac + cv.sessionsPercent, 0)
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.
