{ "version": "https:\/\/jsonfeed.org\/version\/1", "title": "Блог Михаила Озорнина: заметки с тегом таймсерии", "_rss_description": "Главная · Блог · Работы ·", "_rss_language": "ru", "_itunes_email": "", "_itunes_categories_xml": "", "_itunes_image": "", "_itunes_explicit": "", "home_page_url": "https:\/\/mikeozornin.ru\/blog\/tags\/taymserii\/", "feed_url": "https:\/\/mikeozornin.ru\/blog\/tags\/taymserii\/json\/", "icon": "https:\/\/mikeozornin.ru\/blog\/user\/userpic@2x.jpg?1614204384", "author": { "name": "Михаил Озорнин", "url": "https:\/\/mikeozornin.ru\/blog\/", "avatar": "https:\/\/mikeozornin.ru\/blog\/user\/userpic@2x.jpg?1614204384" }, "items": [ { "id": "91", "url": "https:\/\/mikeozornin.ru\/blog\/all\/how-to-label-timeseries\/", "title": "Как делать подписи для таймсерий", "content_html": "

Таймсерии — графики, где что-то зависит от времени обычно. В посте я расскажу, как делать на них подписи. Это улучшенная версия статьи из наших внутренних дизайнерских гайдлайнов, поэтому тут может встретиться неожиданная категоричность.<\/p>\n

В чем проблема<\/h2>\n

Если не следить за подписями, то программа или библиотека расставит отметки автоматически. Скорей всего она поделит интервал на равные промежутки и может получиться плохо. Вот скриншот временной оси графика, обратите внимание, что показано только время:<\/p>\n

\n\"\"\n<\/div>\n

Библиотека отрисовки почему-то решила не подписывать даты и подписала только время. На самом деле пеньки 3:00 21 мая, 15:00 23 мая, 3:00 26 мая, 15:00 28 мая, 3:00 31 мая, 15:00 2 июня.<\/i> Понять это из подписей почти невозможно.<\/p>\n

Я перерисую скриншот, чтобы можно было менять и иллюстрировать:<\/p>\n

\n\"\"\n<\/div>\n

Первое, что нужно сделать — всегда писать даты:<\/p>\n

\n\"\"\n<\/div>\n

Стало понятно, но тоже плохо. Пеньки получились неудобные, читать их неудобно. Все потому, что программа поделила ось на равные промежутки и подписала их. В данном случае число отсчетов не совпало с числом дней, поэтому программа выбрала промежутками не целые дни.<\/p>\n

\n\"\"\n
Пурпурные линии — границы дней<\/div>\n<\/div>\n

В посте я расскажу что с этим всем делать.<\/p>\n

Общие правила<\/h2>\n
    \n
  1. Подписи отметок соотносятся с масштабом. При показе данных за год показывать время с точностью до минут не имеет смысла.<\/li>\n
  2. Всегда выбирается максимально детальный разумный масштаб. Если без проблем указывается с точностью до дней, то не надо укрупнять отметки до 5-дневных просто так.<\/li>\n
  3. Отметки должны быть регулярны. Разный шаг не позволит удобно прикинуть промежуточное значение. Если регулярные метки не получаются, то основную часть отметок лучше сделать регулярными, а нерегулярные остатки сложить к одному из концов интервала.<\/li>\n
  4. Смысловые отметки лучше несмысловых. Отметка 22:12<\/i> — странно, 22:30<\/i> — норм. Вряд ли имеет смысл использовать что-то, не попадающее в этот список:
    \n1, 5, 10, 15, 30 секунд,<\/i>
    \n1, 5, 10, 15, 30 минут,<\/i>
    \n1, 2, 4, 6, 12, 24 часов,<\/i>
    \n1, 2, 5, 10, 15 дней,<\/i>
    \n1, 2 недели (если нужны именно календарные недели),<\/i>
    \n1, 2, 3, 6 месяцев,<\/i>
    \n1, 2 года, 5, 10 лет.<\/i>
    \nДробными числами, не подходящими под указанные выше, допустимо подписывать только начало и конец.<\/li>\n<\/ol>\n

    Информативность<\/h2>\n
      \n
    1. Дублировать одно и то же — плохо. Не надо писать у отметок так: 01.01.2015, 01.02.2015, 01.03.2015, 01.05.2015.<\/i> Но и 01.01, 01.02, 01.03, 01.05<\/i> тоже плохо (см. следующий пункт). Кстати, кто-нибудь заметил, что я пропустил апрель?<\/li>\n
    2. Для дат лучше всего использовать формат 1 мая, 2 июня, 13 ноя<\/i>. Месяцы сокращаются до трех букв без точки (кроме мая, июня и июля), ведущий ноль у числа не пишется.<\/li>\n<\/ol>\n
      \n
      \n\"\"\n<\/div>\n<\/blockquote>\n
        \n
      1. Если год на отметках повторяется, то лучше подписать его у первой отметки этого года, а у следующих не подписывать. Год стоит продублировать у крайних отметок, чтобы было проще понять, какая это дата.<\/li>\n<\/ol>\n
        \n
        \n\"\"\n<\/div>\n<\/blockquote>\n
          \n
        1. Секунды у времени не пишутся, если не сказано обратного — 22:12<\/i>. Любое время, кроме полуночи лучше писать без ведущих нулей: 6:25, 9:13, 12:56,<\/i> но 00:00<\/i>. Для секунд, там где они нужны, допускается писать только секунды: 10:55, :56, :57, :58, :59, 11:00, :01, :02.<\/i><\/li>\n<\/ol>\n

          Оформление<\/h2>\n
            \n
          1. Если отметок много и они переносятся в две строки, лучше снизить число отметок, а не переносить.<\/li>\n<\/ol>\n
            \n
            \n\"\"\n<\/div>\n<\/blockquote>\n
              \n
            1. Текст подписи выравнивает по центру, сама подпись — по пеньку.<\/li>\n
            2. Между отметками должен быть минимальный отступ в 16 пк, если отступ будет меньше, то отметки слипнутся.<\/li>\n<\/ol>\n

              Края интервала<\/h2>\n

              Когда левая и правая границы важны, нужно подписать эти отметки явно. Скорей всего для этого придется убрать подписи у ближайших отметок: отметки 6:00<\/i> (между 3:52<\/i> и 8:00<\/i>) и 2:00<\/i> (между 00:00<\/i> и 3:12<\/i>) как бы должны быть, но не влезли:<\/p>\n

              \n\"\"\n<\/div>\n

              Если явно задана только левая, а правая — сейчас<\/i>, то правую можно не подписывать:<\/p>\n

              \n\"\"\n<\/div>\n

              Если края не принципиальны, то можно не подписывать оба конца:<\/p>\n

              \n\"\"\n<\/div>\n

              Примеры<\/h2>\n

              Примеры того, что получится, если воспользоваться рекомендациями:<\/p>\n

              \n\"\"\n<\/div>\n
              \n\"\"\n<\/div>\n
              \n\"\"\n<\/div>\n

              Если применить все рекомендации к примеру из начала поста, то получится как-то так:<\/p>\n

              \n\"\"\n<\/div>\n

              Выводы простые: не доверяйте программе ставить отметки как получится, скорей всего получится плохо.<\/p>\n<\/div><\/div>", "date_published": "2018-06-04T02:21:35+03:00", "date_modified": "2018-12-16T00:47:03+03:00", "image": "https:\/\/mikeozornin.ru\/blog\/pictures\/timeseries-post-3@2x.png", "_date_published_rfc2822": "Mon, 04 Jun 2018 02:21:35 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "91", "_e2_data": { "is_favourite": true, "links_required": [], "og_images": [ "https:\/\/mikeozornin.ru\/blog\/pictures\/timeseries-post-3@2x.png", "https:\/\/mikeozornin.ru\/blog\/pictures\/timeseries-post-4@2x.png", "https:\/\/mikeozornin.ru\/blog\/pictures\/timeseries-post-0@2x.png", "https:\/\/mikeozornin.ru\/blog\/pictures\/timeseries-post-0-2@2x.png", "https:\/\/mikeozornin.ru\/blog\/pictures\/timeseries-post-1@2x.png", "https:\/\/mikeozornin.ru\/blog\/pictures\/timeseries-post-2@2x.png", "https:\/\/mikeozornin.ru\/blog\/pictures\/timeseries-post-6@2x.png", "https:\/\/mikeozornin.ru\/blog\/pictures\/timeseries-post-5@2x.png", "https:\/\/mikeozornin.ru\/blog\/pictures\/timeseries-post-7@2x.png", "https:\/\/mikeozornin.ru\/blog\/pictures\/timeseries-post-first-and-last-1@2x.png", "https:\/\/mikeozornin.ru\/blog\/pictures\/timeseries-post-first-and-last-2@2x.png", "https:\/\/mikeozornin.ru\/blog\/pictures\/timeseries-post-first-and-last-3@2x.png", "https:\/\/mikeozornin.ru\/blog\/pictures\/timeseries-post-examples-200@2x.png", "https:\/\/mikeozornin.ru\/blog\/pictures\/timeseries-post-examples-480@2x.png", "https:\/\/mikeozornin.ru\/blog\/pictures\/timeseries-post-examples-1600@2x.png", "https:\/\/mikeozornin.ru\/blog\/pictures\/timeseries-post-8@2x.png" ] } }, { "id": "75", "url": "https:\/\/mikeozornin.ru\/blog\/all\/time-series-scale\/", "title": "Что делать с масштабом временных рядов", "content_html": "

              Хочу рассказать про один способ отображения временных рядов (time series — графиков, где ось абсцисс — время).<\/p>\n

              Например, есть такой график:<\/p>\n

              \n\"\"\n<\/div>\n

              Представим, что нам нужно отслеживать состояние какой-то сложной системы со многими параметрами: загрузкой ЦПУ, сетью, трафиком и чем-то ещё. В этом случае графики должны помогать нам:<\/p>\n