Steam одновременно является и крупнейшей видеоигровой платформой, и практически единственным источником во всей видеоигровой индустрии, с очень благосклонной политикой по отношению к публикации открытых данных. Благодаря этому платформа всегда представляла особый интерес для исследований в области данных.
Особо интересными инфоповодами мне всегда казались бесконечные обсуждения вокруг цифр онлайна (бедный Marathon), «мертвых игр» и китайской «накрутки» (например, для Black Myth Wukong). Я решил поискать сервисы и исследования, в которых проводился бы подробный анализ таких примеров, но, как оказалось, данное направление не то чтобы подробно изучено.
Конечно, существует, глубоко мною уважаемый, SteamDB и аналогичные сервисы, но проекты, с возможностью быстро и удобно сравнивать данные о видеоиграх в интерактивном формате, встречаются довольно редко. Поэтому (ну и еще нужно было найти тему для диплома) я решил провести свое исследование про Steam, в результате которого получился веб-сайт с интерактивными визуализациями данных. В этой короткой заметке опишу свой путь создания демки медиапроекта, насколько помогают современные ИИ-технологии, и что нового (надеюсь) можно узнать из получившейся инфографики.
Сбор и обработка данных
Не буду подробно останавливаться на хоть и необходимом в рамках написания диплома, но довольно душном этапе изучения академических источников (да, такие есть и про данные из Steam; некоторые из которых написаны сотрудниками Tencent, что не менее удивительно).
При сборе данных я решил пойти по нестандартному пути: перед тем как скачивать данные по десяткам тысяч игр напрямую через Steam API, я сформировал список наиболее популярных видеоигр (10 тысяч) с помощью SteamDB. Далее нужно было получить id для каждой видеоигры (на этом этапе отпала ± тысяча видеоигр из-за несостыковки информации между SteamDB и Steam). Также, некоторые известные проекты по типу FIFA 21 были удалены из Steam, из-за чего данные по ним в визуализациях не представлены. После этого я уже пошел по привычному пути парсинга метаданных по списку с id из Steam API и SteamSpy API.
Для получения некоторых данных пришлось немного «пошаманить». Так, вы наверняка видели на страницах видеоигр в Steam окно «недавних обзоров». Так вот именно «недавние обзоры» систематически не хранятся в открытых базах данных, и пришлось скрейпить эти оценки с помощью автоматизированных средств. Хоть роботы и делали всю монотонную работу за меня, процесс для 3 тысяч игр занял целые сутки реального времени (страницу каждой игры скрипт открывал в браузере и копировал с нее данные). А если добавить сюда множество недоступных для русской версии Steam игр, информация для которых собиралась на германских IP (не лучший выбор, там недоступных видеоигр тоже немало), то эту часть работы однозначно могу назвать худшим этапом. А для автоматического сбора данных по количеству одновременных игроков мне навыков не хватило, поэтому пришлось ручками копировать их из SteamDB.
Всю загруженную информацию я собрал в несколько датасетов, почистил и был готов приступить к самому интересному этапу исследования.
Создание интерактивных визуализаций
Комплексные интерактивные графики, как правило, в отличие от встроенных в какой-нибудь Excel или размещенных на специализированных сайтах (как DataWrapper) инструментов, работают с помощью кода. Я использовал стандартную библиотеку D3.js, но поскольку в сильное программирование на Java я не могу, весь код для проекта писал китайский друг DeepSeek.
На самом деле ИИ отлично справляется с созданием относительно комплексных (на 600+ строчек html кода) прототипов страниц, но, к сожалению, это не означает, что можно просто взять и сделать крутой сайт с визуализациями за пару часов (по крайней мере, пока). Основные сложности у меня возникали на этапе добавления нового функционала, так как ломались работающие до этого элементы, ИИ слишком переусложнял поставленный запрос, и даже на простейшие функции уходили десятки итераций.
Понимание html кода выручало меня во многих ситуациях, где проще было сказать ИИ: «покажи место в коде, которое отвечает за первое, второе» и самому исправить недочет (особенно на этапе форматирования), а не просить DeepSeek самостоятельно починить неработающее место.
Пройдя через бесчисленные итерации, в итоге у меня получилось сделать 6 визуализаций с интерактивными механиками, практически ничего не зная о библиотеке D3.js на которой работает код.
Что получилось
Сейчас на сайте представлено 6 графиков и около 13 интерактивных механик.
- Дуговая Диаграмма про «Изменения в оценке пользовательских отзывов»
- Линейный график про «Эффективность удержания пикового значения игроков»
- Дисковый график про «Самые успешные видеоигры в разных категориях»
- Древовидная схема про «Покрытие рынка издателями и разработчиками»
- Спиральная диаграмма про «Изменения в распределении игр между ценовыми категориями»
- Графики радара с помощью которых можно «Сравнить видеоигры по численным показателям»
Из интерактивных механик, почти в каждом графике я старался добавить инструменты сравнения видеоигр (например, поисковое окно, цветовое выделение и анимации). Также можно отфильтровать отображаемые данные по жанрам и тегам. Внешний вид графиков можно изменять с помощью перемещения элементов, разных видов визуальной сортировки и отключения ненужных фильтров. Отдельной задачей для меня было создать близкий к игровому опыт взаимодействия с визуализациями, чего, как будто, довольно тяжело добиться из-за необходимости одновременно придерживаться конвенций инфографики и увлекательно преподносить комплексные данные.
Проект опубликован с помощью GitHub Pages, с этим сервисом все очень удобно и налажено работает, отличный вариант для деплоя подобных сайтов.
Выводы
Таким образом, с помощью современных нейросетей можно в одиночку сделать вполне работоспособный прототип веб-сайта с довольно комплексными механиками, не владея на продвинутом уровне программированием на требуемых языках. Тем не менее, важно иметь четкое видение того, какой результат нужно получить, какие этапы для его достижения необходимо пройти и запастись терпением.
На сайте проекта можно поисследовать визуализации различных областей Steam, сравнить любимые видеоигры и получить новые инсайты о площадке Valve. Буду рад, если такая нетипичная для Стопгейма тематика инфографики получилась не слишком душной и из визуализаций получится узнать что-то новое!
Лучшие комментарии
Выглядит сайт красиво, и, очевидно, ты потратил на него кучу времени и сил, поэтому ругать невозможно. Но.
Похвальное упорство.
В стародавние времена открывали документацию (которая имеется) по библиотеке и изучали нужный кусок API для работы. Смотрели примеры (которые тоже имеются), копировали оттуда куски.
Но, видимо, современное программирование - это извлекать ту же самую информацию, но из трижды переваренного ИИ-сблёва, приправленного галлюцинациями.
Меня тут огорчает то, что в процессе работы ты научился не программировать, а как фильтровать галлюцинации нейросети. Учиться программировать было бы, на мой взгляд, полезней, и для мозга, и для дела.
И доверять тому, что отображается на сайте я не могу на 100%. Как и куда там приделаны данные по советам ИИ неизвестно. Либо нужна какая-то секция, как происходила проверка полученного результата (диплом от этого только выиграет, если её там ещё нет).
Нет проблем. Если представится возможность ещё раз что-то подобное сделать, то попробуй классический метод разработки. Он может оказаться, если не проще, то интересней и менее фрустрирующим.
Это мне понятно. И данные, снятые с Стима и СтимДБ, тоже вряд ли искажены. Но между этими данными и визуализацией D3.js есть твой код. И вот здесь неизбежно нужны будут трансформации наборов данных. Насколько эти трансформации корректны - полностью ответственность программиста.
Один из вариантов ошибки
Ага, походу gx не дружит с библиотекой, которая сами графики рисует. Анлаки
Из праздного интереса - что это за целая тыща несостыковок со стимдб? И откуда, говоришь, удалили нью вегас?
Вполне справедливое замечание насчет специфики современного программирования, и, действительно, можно было выстроить процесс таким образом, чтобы глубже погрузиться в изучение языка, но задачи такой я для себя не ставил.
Насчет достоверности кода написанного ИИ, важно учитывать специфику D3.js. Эта библиотека отвечает исключительно за то, как графики рисуются (все остальное работает на html, который я знаю), и автоматические формулы с алгоритмами в основе библиотеки являются индустриальным стандартом, который я не видел, чтобы когда-то ставили под сомнение. Плюсом шло кураторство моего научника, поэтому за достоверность результата я не сильно беспокоюсь (на сайте все прозрачно, почти везде можно навестить и увидеть реальные числа за визуальными элементами).
Это правда, я сам потратил немало времени, стараясь это пофиксить, но чтобы закончить проект во время, пришлось расставить приоритеты. Тем не менее, поскольку я использовал несколько источников и датасетов, тот же Schedule I, можно найти на первых 2 визуализациях.
Понял, спасибо.
Интересный визуализатор, особенно радарные диаграммы, можно сравнить например какая из игр серии WRC более популярна.
Но к сожалению все игры цепляет, например серии Quake или Age of Empires
Идея класс, но у меня почему то графики поломались и ничего не показываю(
Спасибо за отзыв! То, что не все игры подгружаются — действительно не очень, может быть улучшу в будущем
О, интересно, случаем не на мобильном устройстве все ломается?
opera gx. щас проверю на других браузерах
На яндекс браузере вроде работает
Странно что на gx не работает, сам на обычной Opera сижу. Но спасибо за найденный баг, сам бы и не подумал, что из-за браузера сломаться может.
Еще как может)))) На момей памяти есть сайти которые открывались только на определенных браузерах или открывались с урезанным функционалом
Несостыковки со SteamDB выглядят примерно так: id игры есть, а данные по Steam API приходят пустыми. С Fallout: New Vegas, мой недосмотр, он оказался в одном списке с реально удаленными проектами по типу FIFA 21 (по крайней мере, если верить SteamDB в этом вопросе), а на русской версии Steam проверять это не очень удобно.
Интересно. Первый же id - Schedule I, игра сильно хайповала в прошлом году, без неё инфографики наверняка потеряли многое. Я бы попытался разобраться почему по этим id инфа не подтягивается.