{
    "version": "https:\/\/jsonfeed.org\/version\/1.1",
    "title": "Блоги: заметки с тегом теория",
    "_rss_description": "Автоматически собираемая лента заметок, написанных в блогах на Эгее",
    "_rss_language": "ru",
    "_itunes_email": "",
    "_itunes_categories_xml": "",
    "_itunes_image": false,
    "_itunes_explicit": "no",
    "home_page_url": "https:\/\/blogengine.ru\/blogs\/tags\/teoriya\/",
    "feed_url": "https:\/\/blogengine.ru\/blogs\/tags\/teoriya\/json\/",
    "icon": false,
    "authors": [
        {
            "name": "Илья Бирман",
            "url": "https:\/\/blogengine.ru\/blogs\/",
            "avatar": false
        }
    ],
    "items": [
        {
            "id": "119475",
            "url": "https:\/\/revealthedata.com\/blog\/all\/grafik-plan-fakt-vo-vremeni\/",
            "title": "График План-Факт во времени",
            "content_html": "<p>У меня есть задача — сделать стандартный формат для графиков типа «План-Факт». Основная загвоздка произошла для графиков, когда нужно показать как значения плана и факта менялись во времени. Я придумал показывать факт линией, а план заливкой (ареа чартом), но это вызвало разночтение у моих коллег. Я разработал детальные разные варианты и собрал для каждого из них плюсы и минусы.<\/p>\n<h2>Понимание задачи<\/h2>\n<p>В компании часто выставляются плановые значения метрик. Их нужно сравнивать с фактическими или прогнозными значениями.<\/p>\n<p>У нас чаще всего следят за значением на определённый момент времени, а не накопительно. То есть важнее всего значение на последнюю дату, а не за сумму всех дат. Однако важно понимать выполнялись ли планы за предыдущие периоды, так как план по-сути являлся прогнозом, который мы сделали раньше и важно понимать насколько точно мы его делаем. Поэтому нужно смотреть и планы, и факт в динамике и отчетливо видеть их динамику. Если будет подсветка в какие даты не выполняется план — хорошо, но не критично. Чаще всего план — это положительное число, факт может быть как положительным, так и отрицательным.<\/p>\n<p>График будет использоваться в разных дашбордах, поэтому чем универсальнее получится решение, тем лучше. Либо нужно сделать набор правил под разные задачи. Нужно разработать набор графиков: большой график во времени план\/факт, график отклонения план\/факт, спарклайны план\/факт во времени, сравнение план\/факт по разным разрезам, фактоид план\/факт. Нужно, чтобы эти графики были «срифмованы» между собой и с остальными графиками темплейта. Обычные графики фактов, если нет установленного плана — это линии.<\/p>\n<p>Данные для графиков хранятся в формате «дата | значение факта | значение плана». Чем проще и надежнее будет реализация в Табло, тем лучше.<\/p>\n<h2>Возможные решения<\/h2>\n<p>Не найдя best practice по этому вопросу и не получив каких-то научных обоснований от коллег по цеху, решил подойти к задаче методом перебора решений.<\/p>\n<p>Часть графиков придумал сам, часть посоветовали коллеги и читатели блога. Варианты:<br \/>\n— Линия факт — Ареа план<br \/>\n— Линия факт — Бары план<br \/>\n— Линия факт — Засечки план<br \/>\n— Бары факт — Засечки план<br \/>\n— Ареа факт — Линия план<br \/>\n— Линия факт — Линия план<br \/>\n— Линия факт — Линия план + заливка между линиями<br \/>\n— Линия факт — Ареа план + заливка между линиями<\/p>\n<p><i>Дисклеймер<\/i><br \/>\nВ основном делал упор именно на разработку таймсерий. На остальные графики уделял меньше внимания, фактоиды совсем не делал. Цветовое кодирование тоже пока условное и не финальное. Ещё не докручивал подписи для самих графиков — так как важна последняя дата, то на неё ещё можно будет сделать акцент на самих графиках. Эти вещи докручу отдельно.<\/p>\n<h2>Линия факт — Ареа план<\/h2>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/revealthedata.com\/blog\/pictures\/Line-fact--Area-plan.png\" width=\"1918\" height=\"1012\" alt=\"\" \/>\n<\/div>\n<p>Больше всего в это варианте мне нравится, что линия остается фактом, как и обычные графики, где нет плана.<\/p>\n<p>Плюсы:<br \/>\n— Срифмован с остальными графиками, для которых нет плана. Они просто линии, а тут мы добавляем «фон в виде» плана.<br \/>\n— Физично отображает выражение «факт идёт выше плана». План как гора на фоне, которую мы хотим достичь, факт выше «горы» или «ниже».<br \/>\n— Легко считывается динамика плана и факта по отдельности.<br \/>\n— Легко можно продолжить рисовать прогноз линией другого цвета.<br \/>\n— Легко реализуется и масштабируется в Табло.<br \/>\n— Можно заменять план на другие форматы «фона» — прошлый год, среднее по рынку и т. п.<\/p>\n<p>Минусы:<br \/>\n— Много акцента на план, так как занимает большую площадь заливки.<br \/>\n— Нет подсветки проблемных и хороших дат.<br \/>\n— Не «срифмовано» с буллет-чартом, где бар (заливка) тянется к линии.<\/p>\n<h2>Линия факт — Бары план<\/h2>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/revealthedata.com\/blog\/pictures\/Line-fact--Bar-plan.png\" width=\"1920\" height=\"1011\" alt=\"\" \/>\n<\/div>\n<p>Очень похож на предыдущие график, по-сути просто делаем дискретным ареа. Поэтому все те же самые плюсы-минусы, но есть и дополнительные:<\/p>\n<p>Плюсы:<br \/>\n— Можно подсвечивать конкретные даты по выполнению плана.<\/p>\n<p>Минусы:<br \/>\n— «Рябит» малёк, когда много дат.<br \/>\n— Техническая заморочка с шириной баров при изменении скейла (Табло оно иногда такое Таблё).<\/p>\n<h2>Линия факт — Засечки план<\/h2>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/revealthedata.com\/blog\/pictures\/Line-fact--Ticks-plan.png\" width=\"1920\" height=\"1011\" alt=\"\" \/>\n<\/div>\n<p>Плюсы:<br \/>\n— Классно «зарифмован» основной график и график отклонений.<br \/>\n— Может работать с отрицательным планом.<\/p>\n<p>Минусы:<br \/>\n— «Рябит», когда много дат.<br \/>\n— Настройка ширины тиков только ручная и будет плыть для разной ширины экрана.<br \/>\n— Хуже считывается сама линия плана.<\/p>\n<h2>Бары факт — Засечки план<\/h2>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/revealthedata.com\/blog\/pictures\/Bar-fact--Ticks-plan.png\" width=\"1920\" height=\"1014\" alt=\"\" \/>\n<\/div>\n<p>Пожалуй, самый привычный формат. По сути, буллет-чарт, поставленный на бок, будет привычен многим пользователям.<\/p>\n<p>Плюсы:<br \/>\n— Классно «зарифмован» с буллет-чартами и выглядит «физично» (похоже на заполнение прогресс-бара).<br \/>\n— Довольно классический и понятный формат.<br \/>\n— Можно делать акцент на «плохих» и «хороших» барах.<\/p>\n<p>Минусы:<br \/>\n— «Рябит» малёк, когда много дат или спарклайны.<br \/>\n— Настройка ширины тиков только ручная и будет плыть для разной ширины экрана.<\/p>\n<h2>Ареа факт — Линия план<\/h2>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/revealthedata.com\/blog\/pictures\/Area-fact--Line-plan.png\" width=\"1920\" height=\"1009\" alt=\"\" \/>\n<\/div>\n<p>Это тот вариант, который мне мало нравится. Самая большая претензия к этому варианту, что по сравнению с теми графиками, где есть только факт (линия), почему-то меняется отображение факта на ареа-чарт.<\/p>\n<p>Плюсы:<br \/>\n— «Зарифмован» с буллет-чартами, так как тоже заполняется как прогресс-бар.<br \/>\n— Довольно классический и понятный формат.<\/p>\n<p>Минусы:<br \/>\n— Меня прям передергивает, что в обычных графиках (без плана), факт — линия, а тут бац — и стал ареа. Тогда надо менять и в остальных графиках на ареа, а это уже совсем не правильно.<br \/>\n— Ареа можно воспринять как что-то накопительное (площадь под интегралом).<\/p>\n<h2>Линия факт — Линия план<\/h2>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/revealthedata.com\/blog\/pictures\/Line-fact--Line-plan-(Clean).png\" width=\"1920\" height=\"1010\" alt=\"\" \/>\n<\/div>\n<p>На мой вкус самый беззубый вариант из всех. Вроде просто, но контраст между планом и фактом маленький и никаких особо преимуществ нет.<\/p>\n<p>Плюсы:<br \/>\n— Просто.<br \/>\n— Хорошо считывать отдельно динамику плана и факта.<\/p>\n<p>Минусы:<br \/>\n— Сложно отслеживать положение линий относительно друг-друга.<\/p>\n<p>Такой вариант, кстати, предлагает стандарт <a href=\"https:\/\/www.ibcs.com\/\">IBCS<\/a>, но с отметками в виде заполненных и не заполненных точек. Что-то как-то не айс. Для спарклайнов точно не подойдет.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/revealthedata.com\/blog\/pictures\/photo_2020-09-08_19-33-40.jpg\" width=\"506\" height=\"379\" alt=\"\" \/>\n<\/div>\n<h2>Линия факт — Линия план + заливка между линиями<\/h2>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/revealthedata.com\/blog\/pictures\/Line-fact--Line-plan-(Area).png\" width=\"1920\" height=\"1004\" alt=\"\" \/>\n<\/div>\n<p>Этот вариант предложил один из читателей канала и показал вот такую <a href=\"https:\/\/flowingdata.com\/2018\/11\/09\/how-i-made-that-animated-difference-charts-in-r\/\">ссылку<\/a> на Натана Яу. Вообще вариант прикольный, но мне лично, очень сложно тут считывать само значение плана.<\/p>\n<p>Плюсы:<br \/>\n— Аккуратный, мало чернил. Классно смотрится спраклайном.<br \/>\n— Акцент на «хорошие» и «плохие» даты.<\/p>\n<p>Минусы:<br \/>\n— Сложно отследить линию плана из-за «перекручивания».<br \/>\n— Чтобы сделать «линию» плана, которая очерчивает область заливки, используется неприятный лайфхак в Табло.<\/p>\n<h2>Линия факт — Ареа план + заливка между линиями<\/h2>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/revealthedata.com\/blog\/pictures\/Area-fact--Area-plan.png\" width=\"1920\" height=\"1009\" alt=\"\" \/>\n<\/div>\n<p>Аналог предыдущего графика, но с заполнением ниже нижней границы. Кажется, что это помогает считывать отдельно линию плана.<\/p>\n<p>Плюсы:<br \/>\n— Довольно хорошо считывается.<br \/>\n— Акцент на «хорошие» и «плохие» даты.<br \/>\n— «Зарифмован» с графиком отклонений.<br \/>\n— «Зарифмован» с обычными графиками фактов.<br \/>\n— «Зарифмован» с буллет-чартами.<\/p>\n<p>Минусы:<br \/>\n— Нормально считывается динамика линии плана, но не идеально.<\/p>\n<h2>Анализ<\/h2>\n<p>Я сделал все эти скрины и пошёл советоваться к эксперту по графикам — Саше Богачеву. Он согласился со мной, что важно будет сохранить факт линией, чтобы это сочеталось с остальными графиками, где нет планов. Самым «классическим» ему показался вариант факт — барами, план — засечками, но! чтобы при этом не было графиков факта линиями на соседних графиках.<\/p>\n<p>Составил табличку сравнений вариантов и проставил плюсики.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/revealthedata.com\/blog\/pictures\/Comparison.png\" width=\"1512\" height=\"505\" alt=\"\" \/>\n<\/div>\n<p>Итого, решил взять последний вариант «Линия факт — Ареа план + заливка между линиями». Кажется, что это самый сбалансированный вариант из всех. Хотя не могу сказать, что он идеальный. У каждого из вариантов есть куча плюсов и минусов и этот показался мне наиболее робастным: он сохраняет факт линией, а подсветка сразу даёт понимание, что есть план, а что факт. При этом, легко увидеть, в какие периоды было отставание от плана, и такой вариант удобно реализовать в Табло.<\/p>\n<p><i>П. С. Спасибо большое Саше Богачеву за обсуждения. И ещё многие написали в личку с идеями, тоже большое спасибо: Роман Зубарев, Егор Ларин и Павел.<\/i><\/p>\n",
            "date_published": "2020-10-16T12:51:16+05:00",
            "date_modified": "2023-05-20T19:43:25+05:00",
            "tags": [
                "теория"
            ],
            "author": {
                "name": "Роман Бунин",
                "url": "https:\/\/revealthedata.com\/blog\/",
                "avatar": "https:\/\/revealthedata.com\/blog\/pictures\/userpic\/userpic@2x.jpg?1612211172"
            },
            "_date_published_rfc2822": "Fri, 16 Oct 2020 12:51:16 +0500",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "119475",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": false,
                "links_required": null,
                "og_images": []
            }
        }
    ],
    "_e2_version": 4079,
    "_e2_ua_string": "Aegea 11.0 (v4079e)"
}