Кейс: страница-приложение для регионального научного журнала.
Тема: негативное влияние многоэтажных новостроек на архитектурный облик города и социальную среду в Рязани.

Шаг 1. Сбор данных

В нашей истории нам, понятное дело, потребуется собрать различные данные. Первое: статистика по жилому фонду Рязани. Необходимая информация есть на сайте dom.mingkh.ru. В нашей истории нас будут интересовать такие показатели, как год постройки дома, количество этажей и серия дома (если здание было построено по типовому проекту). К сожалению, готового табличного файла с нужными данными нет, поэтому придётся поработать ручками и написать парсер – скрипт для автоматического сбора информации с веб-страницы. Рабочий код можно найти тут. Запустив скрипт, мы получим csv-файл.

Второе: данные о рынке аренды в Рязани. Готовой статистики опять же нет, поэтому вновь пишем парсер (код – здесь). На этот раз предстоит собрать информацию с «Домофонда» – сайта по продаже и аренде недвижимости. Почему именно оттуда? На сайте удобно представлена статистика о доме, в котором сдаётся квартира: год постройки, количество этажей – то, что нам нужно.

Шаг 2. Очистка/обработка данных

В любых данных могут быть различные «косяки»: пропущенные значения, ошибки (например, в столбце «год постройки» было число «20020» вместо очевидного «2020»), нерелевантные значения (например, «каменный дом» в столбце «Серия типового дома»). Чтобы быстро находить подобное, можно воспользоваться библиотекой Pandas (что и как делать – смотрите тут).

Шаг 3. Визуализация данных

Важный этап – красиво и понятно представить обработанные данные. Линейные, пузырьковые, круговые диаграммы, гистограммы и т.д. – для визуализации есть множество решений; главное, правильно выбрать формат. Рассмотрим на примерах.

📈График №1. Здесь мы хотим показать, как на протяжении определённого периода изменялось количество новых построенных домов в городе. Для этой цели выберем график «линия времени»: по оси X – года, по оси Y – количество новых зданий, возведённых в этот год.

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

📈График №2. Важная задача нашей будущей истории – наглядно показать, как сильно растёт средняя этажность зданий в городе. Здесь можно вновь использовать «линию времени», но неплохо дополнить её фотографиями самих домов – так мы покажем не только как менялось количество этажей, но и как трансформировалась архитектура.

📈График №3. В нашей истории фигурируют данные соцопроса на тему: «В каком доме вы хотели бы жить». Такая информация хорошо смотрится в виде круговой диаграммы – сразу видно, какое мнение доминирует.

📈График №4 показывает количество объявлений об аренде в домах определённого года постройки (например, в домах 1971 года суммарно сдаётся 26 квартир). Несмотря на то, что здесь присутствует временная линия, график лучше представить в виде гистограммы – столбчатой диаграммы, так как наша цель показать не изменения, а именно само количество объявлений об аренде.

📈График №5 схож с предыдущим. Он показывает среднюю цену за аренду кв. метра в доме определённого года постройки.

Код для построения графиков – тут.

Шаг 4. Создание истории

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

К примеру, созданные нами графики – это не просто картинка. Пользователь, наводя мышку на график, может «пощупать» его: приближать, изучать отдельные элементы, исключать отдельные значения и смотреть на результат (в случае с круговой диаграммой).

Перейдём теперь к началу страницы. Здесь у нас «летающие» многоэтажки, с которыми можно взаимодействовать – хватаешь мышкой и начинаешь раскидывать их в разные стороны. Это весело и забавно – и читатель наверняка не останется равнодушным.

Следующий интерактивный элемент – таймлапс от Google. Спутниковые карты с 1984 по 2018 год отлично показывают, как изменялся внешний облик города.

Листаем вниз. Здесь начинается анимация, которой управляет сам пользователь – элементы двигаются, когда страница скролится.

Фото «До/после» – ещё одна часть интерактивного контента. Двигая за ползунок, читатель видит, как менялась архитектурная местность в Рязани.

Интерактивные элементы могут служить не только как весёлое развлечение, но и как своеобразная метафора. Например, чтобы увидеть четвёртую главу нашей истории, которая называется «Лицо города», нужно сначала «отодвинуть» картинки-многоэтажки.

Что может быть более геймифицированным элементом, чем сама игра? Именно она и завершает нашу историю. Это – стилизованный Space Invaders, в котором пользователю предстоит уничтожить все многоэтажки, играя за историческое здание. Смешно, абсурдно и, главное, надолго останется в памяти читателя.