Использование React для создания интерактивных интерфейсов к захватывающим наборам данных.

Использование React для интерфейсов с данными.

Учебник по данным

Создание более динамичного визуализации данных с использованием веб-разработки

На стороне моей основной работы в качестве исполнительного директора небольшой компании по машинному обучению, мое хобби – создание красивых визуализаций данных.

Обычно я делаю это с помощью Matplotlib, но на этот раз я хотел создать более интерактивный опыт.

Поскольку я люблю веб-разработку и дизайн, я решил создать приложение React для набора данных о популяционных оценках и прогнозах от Всемирного банка.

Это увлекательный набор данных, где вы можете просматривать пирамиды населения для всех стран и регионов с 1960 по 2022 год, включая прогнозы до 2050 года. Он распространяется на условиях лицензии Creative Commons Attribution 4.0.

Это также набор данных, отлично подходящий для интерактивного интерфейса, где пользователи могут быстро изменять годы и регионы.

В этой истории я поделюсь идеями из своей работы и тем, чему научился.

Если вы хотите протестировать решение, вы можете найти его здесь: https://datawonder.io/population-pyramids

Давайте начнем.

Часть 1: Подготовка данных

Я хотел создать простое и быстрое веб-приложение, которое предоставляет данные на фронтенд без выполнения какой-либо длительной предварительной обработки.

Вместо этого моя идея заключалась в том, чтобы предварительно обработать все данные и загрузить их в память при запуске приложения.

У данных Всемирного банка всегда есть набор показателей, и те, которые мне нужны, имеют следующий формат:

Население возраста <возрастная группа>, <пол>

Существует 17 возрастных групп, начиная с 0–4 и 80+. Каждый показатель имеет отдельный столбец для каждого года, как в таблице данных pandas ниже.

Поскольку я точно знал, какие части данных мне нужны, и не хотел выполнять фильтрацию или другие операции…