Dustin Boston

import numpy as np
from sklearn.cluster import KMeans
import matplotlib.pyplot as plt
import pandas as pd

resolutions_str = [
  "1920x1080"
  "390x844"
  "375x812"
  "1366x768"
  "1536x864"
  "393x852"
  "430x932"
  "428x926"
  "414x896"
  "1440x900"
  "1280x720"
  "1280x960"
  "412x915"
  "360x800"
  "360x780"
  "375x667"
  "2560x1440"
  "810x1080"
  "800x600"
  "384x832"
]

resolutions = []
for res in resolutions_str:
    width, height = map(int, res.split("x"))
    resolutions.append([width, height])

resolutions_array = np.array(resolutions)

#K-Means clustering
kmeans = KMeans(n_clusters=4) #change number of clusters as needed.
kmeans.fit(resolutions_array)
labels = kmeans.predict(resolutions_array)

#visualization
plt.scatter(resolutions_array[:, 0], resolutions_array[:, 1], c=labels)
plt.xlabel("Width")
plt.ylabel("Height")
plt.title("Resolution Clustering")

#add labels
for i, txt in enumerate(resolutions_str):
    plt.annotate(txt, (resolutions_array[i, 0], resolutions_array[i, 1]))
plt.tight_layout()

#plt.show()

# Create and display the DataFrame
df = pd.DataFrame({'Resolution': resolutions_str, 'Cluster': labels})
print(df)

body { min-width: 375px; }

/* Taking a mobile-first approach, we'd remove this media query and
   let it become our default, like the body, above. */
/* Mobile (iPhone SE size) */
@media (min-width: 375px) {
  /* Styles for screens 375px wide and larger */
}

/* Mobile (iPhone Plus sizes) */
@media (min-width: 414px) {
  /* Styles for screens 414px wide and larger */
}

/* Tablet (iPad portrait) */
@media (min-width: 768px) {
  /* Styles for screens 768px wide and larger */
}

/* Tablet / Small Laptop */
@media (min-width: 810px) {
  /* Styles for screens 810px wide and larger */
}

/* Laptop / Desktop */
@media (min-width: 1280px) {
  /* Styles for screens 1280px wide and larger */
}

/* Large Desktop / 1080p */
@media (min-width: 1920px) {
  /* Styles for screens 1920px wide and larger */
}