🔒Открыть пост
и посмотреть медиа
и посмотреть медиа
Как уместить динамическую карту мира в 10 КБ
Карта Calibre показывает пользовательские сессии по странам, а цвет передаёт оценку опыта на основе производительности сайта. При сборке создаётся статический SVG; приложение загружает его и задаёт цвета странам через CSS-переменные.
Скрипт на Node.js упрощает границы в GeoJSON библиотекой Turf, переносит их на карту через d3-geo и относит ячейки к странам. Один шестиугольник описан в SVG один раз, а 2164 экземпляра ссылаются на него. Файл весит 144 КБ, после Gzip при передаче остаётся 10 КБ.
Приём подходит для лёгкой обзорной карты без масштабирования и панорамирования. Упрощение съедает детали: Тасмания не помещается в ячейку шириной около 4 пикселей, а США разрываются по краям. В разборе Calibre показаны конвейер сборки и настройка светлой и тёмной тем.