3 ms·

The visualization, I think, could be improved. Make a graph of points, where X and Y coordinates correspond to width and height of the viewport, this is like im

by avmich 3y ago

The visualization, I think, could be improved. Make a graph of points, where X and Y coordinates correspond to width and height of the viewport, this is like imagining all those viewports having the same left top corner and recording bottom right corner. Those points on the graph which correspond to more frequently occurring viewports should be brighter (if not bigger circles). Many points for large number of small viewports will be clustered in left top corner, to make points more evenly spaced, the coordinates could be logarithmic. +--------------------+ | . . | | *. .*. | | .**. .. | | ..*. | | . . | | . | +--------------------+

hddqsb 3y ago
Here you go: https://i.imgur.com/9cJ13ue.png https://i.imgur.com/9cJ13ue.png (alternative link: https://imgur.com/a/uBG5KUD https://imgur.com/a/uBG5KUD) (The area of each circle is proportional to the count, clamped to a minimum value. Axes a are linear.) Uses the data from https://viewports.fyi/data.csv https://viewports.fyi/data.csv. Code: import csv from math import sqrt import sys csv_reader = csv.reader(sys.stdin) headings = next(csv_reader) data = [tuple(map(int, row[:3])) for row in csv_reader] max_w = 7100 # max(row[0] for row in data) + fudge max_h = 7100 # max(row[1] for row in data) + fudge max_count = max(row[2] for row in data) margin = 200 svg_width = max_w + 2*margin svg_height = max_h + 2*margin max_r = 90 min_r = 4 print('<?xml version="1.0"?>') print(f'<svg xmlns="http://www.w3.org/2000/svg" width="{svg_width}" height="{svg_height}" viewBox="{-margin} {-margin} {svg_width} {svg_height}">') print('<desc>Visualization of viewport sizes from https://viewports.fyi/</desc>') print(f'<rect x="{-margin}" y="{-margin}" width="{svg_width}" height="{svg_height}" fill="white"/>') print(f'<line x1="0" y1="0" x2="{max_w}" y2="0" stroke="black"/>') print(f'<line x1="0" y1="0" x2="0" y2="{max_h}" stroke="black"/>') for i in range(0, max_w, 200): print(f'<text font-size="64" font-family="sans-serif" x="{i}" y="-30" text-anchor="middle">{i}</text>') print(f'<line x1="{i}" y1="0" x2="{i}" y2="-20" stroke="black"/>') for i in range(0, max_h, 200): print(f'<text font-size="64" font-family="sans-serif" x="-30" y="{i + 20}" text-anchor="end">{i}</text>') print(f'<line x1="0" y1="{i}" x2="-20" y2="{i}" stroke="black"/>') print('<g fill="blue" stroke="darkblue">') for w, h, count in data: r = max(min_r, sqrt(count) / sqrt(max_count) * max_r) print(f'<circle cx="{w}" cy="{h}" r="{r}"/>') print('</g>') print('</svg>')

by avmich 3y ago

hddqsb 3y ago

Here you go: https://i.imgur.com/9cJ13ue.png https://i.imgur.com/9cJ13ue.png (alternative link: https://imgur.com/a/uBG5KUD https://imgur.com/a/uBG5KUD) (The area of each circle is proportional to the count, clamped to a minimum value. Axes a are linear.) Uses the data from https://viewports.fyi/data.csv https://viewports.fyi/data.csv. Code: import csv from math import sqrt import sys csv_reader = csv.reader(sys.stdin) headings = next(csv_reader) data = [tuple(map(int, row[:3])) for row in csv_reader] max_w = 7100 # max(row[0] for row in data) + fudge max_h = 7100 # max(row[1] for row in data) + fudge max_count = max(row[2] for row in data) margin = 200 svg_width = max_w + 2*margin svg_height = max_h + 2*margin max_r = 90 min_r = 4 print('<?xml version="1.0"?>') print(f'<svg xmlns="http://www.w3.org/2000/svg" width="{svg_width}" height="{svg_height}" viewBox="{-margin} {-margin} {svg_width} {svg_height}">') print('<desc>Visualization of viewport sizes from https://viewports.fyi/</desc>') print(f'<rect x="{-margin}" y="{-margin}" width="{svg_width}" height="{svg_height}" fill="white"/>') print(f'<line x1="0" y1="0" x2="{max_w}" y2="0" stroke="black"/>') print(f'<line x1="0" y1="0" x2="0" y2="{max_h}" stroke="black"/>') for i in range(0, max_w, 200): print(f'<text font-size="64" font-family="sans-serif" x="{i}" y="-30" text-anchor="middle">{i}</text>') print(f'<line x1="{i}" y1="0" x2="{i}" y2="-20" stroke="black"/>') for i in range(0, max_h, 200): print(f'<text font-size="64" font-family="sans-serif" x="-30" y="{i + 20}" text-anchor="end">{i}</text>') print(f'<line x1="0" y1="{i}" x2="-20" y2="{i}" stroke="black"/>') print('<g fill="blue" stroke="darkblue">') for w, h, count in data: r = max(min_r, sqrt(count) / sqrt(max_count) * max_r) print(f'<circle cx="{w}" cy="{h}" r="{r}"/>') print('</g>') print('</svg>')