Skip to content
maksim zaytsev
Проекты

2024 · React · TypeScript · D3.js · Node.js

Мировая география

Интерактивные карты для изучения географических и экономических данных по странам и регионам.

Что делает

Отображает данные по странам и регионам — население, ВВП, торговые потоки, что найдётся в источнике — в виде интерактивных картограмм и карт с пузырьками. Пользователь выбирает показатель и год, и карта перекрашивается с плавным переходом, а не рывком. При наведении на регион открывается небольшая панель с исходными цифрами и коротким временным рядом, так что карта — это вход в данные, а не вся история целиком.

Как устроен

Фронтенд на React и TypeScript, D3.js отвечает за проекцию, шкалы и построение путей — React управляет DOM, D3 только считает геометрию и цвет. Небольшой сервис на Node.js на этапе сборки приводит данные из нескольких открытых источников к одной схеме, чтобы клиенту не приходилось на лету разбираться с несовпадающими кодами стран. Границы регионов упрощены до облегчённого topojson, чтобы размер данных оставался разумным при мелком масштабе.

  • Обновление данных — ручной запуск скрипта, а не постоянный пайплайн