commit ad75b4b388c6c0189bcc7ae69243de40e7a9afe0
parent 3660fec3de7ae741bd80b9b55f94bdbbdf5c7420
Author: Eamon Caddigan <eamon.caddigan@gmail.com>
Date: Mon, 21 Aug 2023 21:17:07 -0700
First look at viewport data
I hope to update this post with some more analyses, but I'm taking
advantage of my new website approach to share something quick.
Diffstat:
5 files changed, 151 insertions(+), 0 deletions(-)
diff --git a/content/posts/viewports/index.Rmd b/content/posts/viewports/index.Rmd
@@ -0,0 +1,112 @@
+---
+title: "Web viewports"
+author: "Eamon Caddigan"
+date: "2023-08-21T21:07:47-07:00"
+draft: False
+categories:
+- Programming
+- Data Science
+output:
+ md_document:
+ variant: markdown
+ preserve_yaml: true
+---
+
+```{r setup, include=FALSE}
+knitr::opts_chunk$set(echo = FALSE,
+ fig.width = 5.5,
+ fig.height = 3)
+```
+
+Andy Bell from [Set Studio](https://set.studio/) shared [the outcome of a study
+of browser viewport sizes](https://viewports.fyi/); the area of the screen
+(measured in pixels) available for web pages. They shared the data so I thought
+I'd take a quick look at it.
+
+```{r packages}
+suppressPackageStartupMessages(library(readr))
+suppressPackageStartupMessages(library(dplyr))
+suppressPackageStartupMessages(library(ggplot2))
+```
+
+```{r load-data}
+viewports <- suppressMessages(read_csv("https://viewports.fyi/data.csv",
+ col_types = cols(
+ Width = col_double(),
+ Height = col_double(),
+ Count = col_double(),
+ ...4 = col_character()
+ ))) %>%
+ mutate(Height = abs(Height),
+ aspect_ratio = Width / Height,
+ area = Width * Height)
+```
+
+First let's check the distribution of aspect ratios. With mobile browsing more
+popular than desktop these days, I expect tall displays to dominate the wide
+ones, but how does the distribution look?
+
+```{r aspect-ratio}
+ggplot(viewports, aes(aspect_ratio)) +
+ geom_density() +
+ scale_x_log10(breaks = c(1/3, 9/16, 1, 16/9, 3/1),
+ labels = c("1:3", "9:16", "1:1", "16:9", "3:1")) +
+ coord_cartesian(xlim = c(1/4, 4/1)) +
+ theme(panel.background = element_blank(),
+ panel.grid = element_blank(),
+ axis.text.y = element_blank(),
+ axis.ticks.y = element_blank(),
+ axis.title = element_blank(),
+ axis.text.x = element_text(size = 14),
+ axis.ticks.x = element_line(linewidth = 1),
+ plot.title = element_text(size = 16)) +
+ labs(title = "Distribution of viewport aspect ratios")
+```
+
+Surprisingly, wide viewports (with aspect ratios greater than 1:1) are slightly
+more common than narrow ones, the distribution of the latter are just more
+tightly clustered (apparently around 9:16).
+
+How do the distribution of height and width relate to each other?
+
+```{r height-width}
+ggplot(viewports, aes(x = Width, y = Height)) +
+ geom_point(alpha = 0.1) +
+ geom_abline(slope = 1, intercept = 0, linetype = "dashed", linewidth = 0.5) +
+ scale_x_log10() +
+ scale_y_log10() +
+ theme_minimal() +
+ theme(axis.title = element_text(size = 14),
+ axis.text = element_text(size = 12)) +
+ labs(x = "Viewport width",
+ y = "Viewport height")
+```
+
+I feel like my eye detects three clusters of height by width combinations, but
+k-means is clustering these unreliably, which suggests that it's not a clean
+clustering.
+
+I think there's more to look at here, and I'll update this if I come back to it!
+
+```{r cluster-exclude, include=FALSE}
+viewports <- viewports %>%
+ mutate(log_width = log(Width),
+ log_height = log(Height))
+
+clust3 <- kmeans(viewports[, c("log_width", "log_height")], 3)
+viewports <- broom::augment(clust3, viewports)
+
+ggplot(viewports, aes(x = Width, y = Height)) +
+ geom_point(aes(color = .cluster), alpha = 0.1) +
+ geom_abline(slope = 1, intercept = 0, linetype = "dashed", size = 0.5) +
+ scale_x_log10() +
+ scale_y_log10() +
+ scale_color_brewer(palette = "Dark2") +
+ theme_minimal() +
+ theme(axis.title = element_text(size = 14),
+ axis.text = element_text(size = 12))+
+ labs(x = "Viewport width",
+ y = "Viewport height")
+```
+
+
diff --git a/content/posts/viewports/index.md b/content/posts/viewports/index.md
@@ -0,0 +1,39 @@
+---
+title: "Web viewports"
+author: "Eamon Caddigan"
+date: "2023-08-21T21:07:47-07:00"
+draft: False
+categories:
+- Programming
+- Data Science
+output:
+ md_document:
+ variant: markdown
+ preserve_yaml: true
+---
+
+Andy Bell from [Set Studio](https://set.studio/) shared [the outcome of
+a study of browser viewport sizes](https://viewports.fyi/); the area of
+the screen (measured in pixels) available for web pages. They shared the
+data so I thought I'd take a quick look at it.
+
+First let's check the distribution of aspect ratios. With mobile
+browsing more popular than desktop these days, I expect tall displays to
+dominate the wide ones, but how does the distribution look?
+
+
+
+Surprisingly, wide viewports (with aspect ratios greater than 1:1) are
+slightly more common than narrow ones, the distribution of the latter
+are just more tightly clustered (apparently around 9:16).
+
+How do the distribution of height and width relate to each other?
+
+
+
+I feel like my eye detects three clusters of height by width
+combinations, but k-means is clustering these unreliably, which suggests
+that it's not a clean clustering.
+
+I think there's more to look at here, and I'll update this if I come
+back to it!
diff --git a/content/posts/viewports/index_files/figure-markdown/aspect-ratio-1.png b/content/posts/viewports/index_files/figure-markdown/aspect-ratio-1.png
Binary files differ.
diff --git a/content/posts/viewports/index_files/figure-markdown/cluster-exclude-1.png b/content/posts/viewports/index_files/figure-markdown/cluster-exclude-1.png
Binary files differ.
diff --git a/content/posts/viewports/index_files/figure-markdown/height-width-1.png b/content/posts/viewports/index_files/figure-markdown/height-width-1.png
Binary files differ.
