Спрашивает Дмитрий Ачкасов:

Способ отличный, понятный и наглядный. Чтобы изучать график было удобнее, добавьте интерактивные подсказки при наведении. Мне показалось, что использование повторяющихся цветов во временной легенде сбивает с толку, поэтому я использовала равномерный градиент:

Живой график и код на bl.ocks

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

Ещё один способ «свернуть» временное измерение — «червячки» Морица Штефанера. Размер кружков изменяется со временем и создаёт иллюзию движения:

А какие способы показать временное измерение, не используя отдельной шкалы, знаете вы?

Спрашивает Александр Семёнов:

Я считаю лучшим инструментом для создания диаграмм и графиков библиотеку D3.js. Её освоение занимает время, зато после можно создавать самые разнообразные визуализации.

Во время зимовки на Бали мы сделали три проекта на D3. О расходограмме я уже писала в блоге. Второй проект — визуализация результатов исследования кишечных бактерий, которую мы реализовали совместно с группой учёных из НИИ ФХМ. Третий проект — диаграмма рынка облигаций для акул банковского дела.

Создание работающей интерактивной визуализации в каждом случае занимало 2-3 дня. Первый результат служил плацдармом для дальнейших экспериментов, для испытания новых идей и гипотез. За пару недель мы получали полезный работоспособный инструмент, который продолжали совершенствовать. D3 — это не просто отличная визуализационная библиотека, это удобная среда для исследования данных и поиска оптимальных форматов отображения.

Что касается презентаций, вспомните знаменитое выступление Ганса Рослинга с ожившими диаграммами «The best stats you’ve ever seen». Скучные статические слайды скоро канут в лету, будущее презентаций и годовых отчётов — за интерактивными графиками.

Освоить D3 с наскока вряд ли удастся. Я сделала несколько подходов к снаряду, прежде чем запрограммировала первую визуализацию. Если вы чувствуете, что этот инструмент будет полезен в вашей работе, и хотите побыстрее им овладеть, приходите на наш курс «Визуализация данных», который состоится на этих выходных. На курсе мы знакомим с теоретическими основами D3 и посвящаем более 10 часов практике под руководством опытного инструктора. Это отличный способ познакомиться с библиотекой, оценить её возможности и заложить фундамент для дальнейшего самостоятельного изучения.

Добавлено позже. А вот ещё замечательная вводная статья о D3.js Димы Тихвинского, веб-технолога лаборатории и преподавателя курса.

Присылайте вопросы о визуализации данных, организации времени, рабочем процессе, спорте и путешествиях на почту: mail@infotanka.ru. Ответы публикуются по понедельникам.

Спрашивает злой марсианин Лёша Газиев:

Вы смешали разные по смыслу и масштабу параметры на одном графике. Я советую отделить мух от котлет. На сайте, в мобильном приложении, в рассылке и соцсетях есть
а) аудитория: посетители, пользователи, подписчики, читатели,
б) её прирост,
в) действия: просмотры, скачивания, переходы, лайки и ретвиты.

Сгруппируйте параметры по смыслу и покажите статистику для каждого канала в отдельности. На временной оси отметьте новые релизы и клипы, анонсы концертов, посты в блог и подпишите самые популярные или эффективные:

При наведении подсвечивайте событие недели и столбец во всех графиках:

Присылайте вопросы о визуализации данных, организации времени, рабочем процессе, спорте и путешествиях на почту: mail@infotanka.ru. Ответы публикуются по понедельникам.

Спрашивает Денис Балуев:

Денис, идея отличная! Интерфейсу не достаёт наглядности и логики «изложения», но это легко исправить. Начните с заголовка, который объясняет назначение экрана. Название продукта управляет списком ингредиентов, включите его в заголовок. Подчёркнутые цифры — компактное решение, но не слишком наглядное. В вашем случае можно смело развернуть их в ползунки, которые покажут соотношение задействованных на производстве деталей и остатков:

Блок «Итого» закрепите у нижней границы экрана, чтобы он всегда был на виду и под рукой.

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

Присылайте вопросы о визуализации данных, организации времени, рабочем процессе, спорте и путешествиях на почту: mail@infotanka.ru. Ответы публикуются по понедельникам.

Спрашивает Андрей:

Покажите работу сервиса с помощью настоящих данных: сколько жалоб вы обработали, сколько времени их рассматривал ФАС, сколько тянулись судебные разбирательства. Реальная картина гораздо красноречивее схемы с сухими формулировками.

Добавлено в ответ на комментарий Андрея. Для сравнения можно показать сколько времени занимает обработка жалобы, если она была сформирована неправильно:

Присылайте вопросы о визуализации данных, организации времени, рабочем процессе, спорте и путешествиях на почту: mail@infotanka.ru. Ответы публикуются по понедельникам.