Hacker Newsnew | past | comments | ask | show | jobs | submitlogin

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.

    +--------------------+
    |   . .              |
    |  *. .*.            |
    |   .**.   ..        |
    |         ..*.       |
    |          .    .    |
    |                 .  |
    +--------------------+


Here you go:

https://i.imgur.com/9cJ13ue.png (alternative link: 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.

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>')




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: