Разбор визуализации о количестве калорий в фастфуде
В этот раз рассмотрим визуализацию Нейтана Яу о количестве калорий в фастфуде.
Вообще сама идея визуализации мне очень понравилась. Я сам люблю зайти в фастфуд заведения и перекусить. На картинке сразу видно, где самое «жирное» место и самый большой выбор блюд.
Что не понравилось:
— Квадратики которые наслаиваются друг на друга.
— От верхних ресторанов далеко тянуться глазами до значений на оси.
— Нет возможности понять удельную калорийность продукта. Калории указаны на порцию, а не 100 грамм.
— Нет интерактивности и знакомых ресторанов. =)
Исправим всё выше перечисленное.
Для начала найдём данные. Нужны рестораны, список блюд, их категория, калорийность и размер порции. Самым правильным было бы скачать официальные меню. Но они есть не у всех ресторанов и информация не всегда структурирована одним образом. Я нашёл несколько сайтов про питание, и выбрал один из них, показавшийся наиболее достойным.
Скопировал данные в гугл таблиц:
Немного магии и форматирования и получил чистые данные:
Подключил данные к Табло:
Исправил те замечания, которые у меня были к исходной визуализации. Вместо квадратиков использую засечки и сделал переключатель [на порцию/на 100 грамм]. Ещё Кирилл Беляев помог мне подобрать цвета и подсказал с версткой.
Живой прототип — http://revealthedata.com/examples/fastfood/
В этом прототипе я использовал два приема работы с Табло. Первый позволил мне сделать переключатель оси калорийности, а второй — продублировать эту ось наверх.
Для создания переключателя я создал параметр, в котором хранится массив возможных осей:
Затем создал рассчитываемое поле и записал туда свитч-функцию. Далее использовал это поле как ось для графика:
Осталось только отобразить параметр и выбрать его внешний вид:
Для того, чтобы продублировать ось икс наверх, я ещё раз добавил поле в колонки. Затем использовал двойные оси и скрыл верхний заголовок. Таким образом, мы показываем точки друг над другом, но этого не видно, так как выбран один и тот же параметр. Это кстати позволяет делать ещё много разных интересных «хаков», но о них в следующий раз.
17, 18 и 19 июня пройдет наш курс по визуализации данных. На нём расскажу о том как использовать Табло для визуализаций и какие применяем при этом приемы и хитрости. Таня расскажет про алгортим визуализации, а Дима про d3.js. Будет интересно, обещаю!
UPD: Добавил поиск по блюдам.
Было бы полезно иметь возможность фильтровать данные на графике. Например, хочется сравнить картофель фри в разных ресторанах фастфуда. Или сравнить конкретные блюда. В таком представлении трудно найти что-то конкретное, видна только общая картина. Хотя, возможно, это не цель данной конкретной визуализации.
Миша, отличная идея! Добавил поиск. Картофель фри — http://joxi.ru/D2PY0NjSpagMQA