Public
Edited
Mar 10, 2023
Insert cell
Insert cell
viewof sizes = Inputs.table(
[
[2560,1440],
[1920,1080],
[1600,900],
[1536,864],
[1440,900],
[1366,768],
[1280,720],
[810,1080],
[768,1024],
[428,926],
[414,896],
[414,736],
[412,915],
[412,869],
[412,846],
[390,844],
[375,812],
[375,667],
[360,800],
[360,640],
]
.map(wha)
.sort(descending)
.map((r, i) => ({i: i+1, ...r, f: Fraction(r.w,r.h).toFraction()}))
, {width: 36*15, rows: 100, format: {a: x => x.toFixed(3)}, align: {f: "center"}}
)
Insert cell
Inputs.table(resolutions, {width: 36*15, rows: 100, format: {a: x => x.toFixed(3)}, align: {f: "center"}})
Insert cell
resolutions = {
const f = await FileAttachment("resolution-US-monthly-202202-202302-bar.csv").csv({typed:true});
return f
.map(k => k["Screen Resolution"].split("x"))
.map(wha)
.filter(({w,h}) => !(isNaN(w) || isNaN(h)))
.sort(descending)
.map((r, i) => ({i: i+1, ...r, f: Fraction(r.w,r.h).toFraction()}))
;
}
Insert cell
descending = (a, b) => a.a > b.a
Insert cell
wha = ([w, h]) => {
w = +w;
h = +h;
return ({w, h, a: w>h?w/h:h/w})
}
Insert cell
z = Fraction(512,683)
Insert cell
z.simplify().toFraction()
Insert cell
Fraction = require("fraction.js")
Insert cell

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.
Learn more