Уся колекція одним графом

Форма колекції

Перш ніж малювати граф, його поміряли. 848 записів, 1 152 неорієнтовані ребра, у середньому 2,72 зв’язки на запис, 53 окремі групи. Найбільша група тримає 701 запис (82,7 %), наступні — 18, 12 і 9. Без жодного зв’язку стоять 15 записів, рівно один мають 246, найбільше, 18, має AlexNet. Форма, яку задача описала ще на 641 записі, трималася, а записів без зв’язків стало вдвічі менше.

Без бібліотеки

three.js разом із 3d-force-graph важили б близько 200 КБ gzip. Це більше, ніж уся межа на JavaScript сайту, 180 КБ. Тож рендерер написано під сторінку, на WebGL 2. П’ять тіл — куля, куб, конус угору, конус донизу й октаедр — це тривимірні форми кола, квадрата, двох трикутників і ромба з осі, по одному на тему. Зв’язки — лінії, а туман у бік фону дає глибину. Вузол під вказівником шукає промінь від ока, перевірений на процесорі проти сфери навколо кожного вузла. Сфера має мінімальний кутовий розмір, щоб далекий вузол усе ще потрапляв під палець.

Розкладка — схема d3-force у трьох вимірах: 300 тактів охолодження від спіралі золотого кута, тож кожен візит бачить той самий граф. Відштовхування довелося обмежити відстанню. Без межі кожен вузол штовхав усі 847 інших, і ребра осідали втричі довшими, ніж мали б. Разом це 7 230 байтів gzip проти оцінки в задачі 10–15 КБ. Сторінка несе власні дані (ідентифікатор, назву, тему, рік і зв’язки, близько 25 КБ gzip), а не тягне дані осі, які коштували б 147 КБ заради самих лише зв’язків.

Спершу текст

Граф — не єдиний вхід. Сторінка починається з цифр, панелі відкритого запису, де сусіди стоять кнопками, і списку груп: кожна з найзв’язнішим записом і кнопкою «Показати в графі». До будь-якого вузла, до якого дістає вказівник, можна дійти й табуляцією, і все це працює без WebGL. Полотно приховане від програм читання екрана. Клавіші (стрілки, плюс і мінус, Esc, Home) прив’язані лише до сцени, і список «?» їх називає. Зі зменшеним рухом першою картинкою одразу стає усталена розкладка, без прольотів камери.

Перший прогін CI упав на одному тесті. Розкладка робила три такти за кадр, а раннер малює WebGL програмно, тож сто повільних кадрів не вкладалися в очікування тесту. Так само вони не вклалися б на слабкому телефоні. Тепер розкладка рахує по 6 мс кожного кадру й усталюється за той самий час будь-де.

Лінії осі, пояснені читачеві

Штрихування, пунктирний відрізок, порожниста позначка, суцільна й пунктирна дуги, кільця — вісь говорила лініями, яких ніде не пояснювала. «6 в 1» обрав поєднання, запропоноване в задачі. Порожниста позначка з’являється в ключі біля осі, коли на екрані є записи без точнішої дати. Кожна лінія з малюнком є на сторінці «Про атлас». Малюнки там намальовано тими самими компонентами, що й вісь, тож пояснення не розійдеться з тим, що воно пояснює.

По дорозі знайшлося, що тематична дуга, «пов’язане» й «протиставлення», весь цей час малювалася суцільною. Анімація появи лишала за собою свій штрих після того, як програвалася. Тепер така дуга проявляється, а не прокреслюється.

Потім «6 в 1» помітив, що екскурсія про лінії не каже нічого, і вона отримала крок «Лінії на осі», який сам підсвічує одну дугу. Текст цього кроку для сенсорних екранів я спершу написав неправильно: що поза екскурсією дуг на телефоні не видно. «6 в 1» перевірив на телефоні: видно, від торкнутої позначки, коли повертаєшся на вісь, бо дотик ставить на позначку фокус. Я вивів це твердження з обробників подій, а не перевірив на пристрої. Текст виправлено.