Вопрос-ответ: мир танков
Спрашивает Кирилл Чокпаров:
Я ради интереса создал небольшой сайтик по визуализации параметров танков в моей любимой игре World Of Tanks Blitz. Сейчас я визуализировал данные так, как мне понятно и наглядно. Однако может быть есть еще какие-то способы, чтобы еще лучше сделать представления. Может быть они будут еще более наглядные.
Мне было бы очень интересно обсудить идеи, как сделать визуальные представления лучше.
Мне представляется, что главные характеристики танков — это мобильность, «атака» и «защита». Будет здорово сравнить их на одном графике. Мобильность в данном случае определяется скоростью. С атакой и защитой сложнее, здесь показателей сразу несколько: бронебойность и урон разными орудиями и снарядами, броня разных элементов танка.
Попробуем проявить эти характеристики на двумерном графике:
Скорость отложена по горизонтали, а максимальный урон за 10 сек., который я выбрала в качестве параметра атаки, по вертикали. Точки на графике — танки на поле боя, можно сравнить их внешний вид, размер и ключевые характеристики. Ещё одна прямая аналогия: чем дальше от начала координат танк расположен по горизонтали, тем он быстрее (дальше уедет) в жизни. Страны, типы и уровни танков настраиваются в фильтрах над графиком, на осях можно выбрать любые другие параметры.
Крепость разных участков брони показана цветом — так сразу виден и уровень защиты танка в целом, и слабые места. На сайте такое представление тоже есть, но в отдельном отчёте «Зоны пробития». Кстати, красным цветом логичнее обозначать опасные, плохо защищённые участки, а зелёным — укреплённые и надёжные (у Кирилла наоборот).
Наводя на разные танки, увидим и сравним не попавшие на график параметры:
На такой визуализации видно, например, что советский Т-44 очень близок по параметрам к немецкой «Пантере»: чуть быстрее, слабее и меньше размером, зато лучше укреплён, особенно башня. Прошу прощения у знатоков военной техники и любителей игры World Of Tanks Blitz, если на визуализацию и в выводы закрались фактические ошибки.
Недостаток исходной визуализации в разрозненности информации и в том, что для отображения разных по смыслу параметров, используются одни и те же столбиковые диаграммы. Удобнее сравнивать танки и выбирать тактику, когда картина боя наглядно представлена на одном графике и все параметры находятся «под рукой».
Присылайте вопросы о визуализации данных на почту: tm@datalaboratory.ru, ответы публикуются по понедельникам. При участии Сергея Долинина.
Таня, классная визуализация!
Посмотрев картинку до сопроводительного текста, решил, что броня сильнее у тех танков, которые красные (как у Кирилла). Наверное, глядя на танк со стороны, я рассматривал цвета как информацию о том, куда нужно стрелять, чтобы танк пробить. «Логичнее» в данном случае — слово относительное.
Спасибо, Артём!
Пожалуй, в данном случае цветовое кодирование и впрямь не столь однозначное (на фейсбуке это тоже заметили). Я полагалась на ассоциацию красного с опасностью и легенду.
Таня, здорово у вас получилось.
А результат (не картинки, а формы, где можно значения выбирать и т. п.) куда-нибудь выложен?
Сколько времени у вас ушло на рисование? «Зона пробития» на танках на графиках рисуется динамически? D3.js? Или каждый танк прорисован отдельно?
Прототип я в данном случае не делала, только картинки.