{
    "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\/informational-design\/",
    "feed_url": "https:\/\/mikeozornin.ru\/blog\/tags\/informational-design\/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": "148",
            "url": "https:\/\/mikeozornin.ru\/blog\/all\/election-chart-redesign\/",
            "title": "Улучшение визуализации про выборы",
            "content_html": "<p class=\"lead\">Переделываю график по голосованию<\/p>\n<p>Максим Кац выложил выложил вчера сводный график по голосованиям:<br \/>\n<a href=\"https:\/\/twitter.com\/max_katz\/status\/1280143683434811395\">twitter.com\/max_katz\/status\/1280143683434811395<\/a><br \/>\nУ меня сразу сработала профдеформация и желание его переделать.<\/p>\n<h2>Теория<\/h2>\n<p><aside class=\"aside-margin-right\">Плиточные карты — частный случай приема Small multiples Эдварда Тафти<\/aside><\/p>\n<p>Есть такой тип визуализации «Регулярные карты», они сохраняют узнаваемость карты и дают  при этом возможность визуализировать данные в удобном формате.<\/p>\n<p>Примеры:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/election-chart-redesign-1@2x.png\" width=\"900\" height=\"611\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Иммиграция в США, <a href=\"http:\/\/pmcruz.com\/dendrochronology\/\">pmcruz.com\/dendrochronology\/<\/a>, фантастически красивая, посмотрите<\/div>\n<\/div>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/election-chart-redesign-2@2x.png\" width=\"1009\" height=\"668\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Наступление весны в США, <a href=\"https:\/\/www.washingtonpost.com\/graphics\/2018\/national\/early-spring\/\">washingtonpost.com\/graphics\/2018\/national\/early-spring\/<\/a><\/div>\n<\/div>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/election-chart-redesign-3@2x.png\" width=\"880\" height=\"702\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Ожирение в разных штатах, <a href=\"http:\/\/flowingdata.com\/2016\/09\/26\/the-spread-of-obesity\">flowingdata.com\/2016\/09\/26\/the-spread-of-obesity<\/a><\/div>\n<\/div>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/election-chart-redesign-4@2x.png\" width=\"1012\" height=\"670\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Доминирующие партии в разных штатах, <a href=\"http:\/\/graphics.wsj.com\/elections\/2016\/field-guide-red-blue-america\/\">graphics.wsj.com\/elections\/2016\/field-guide-red-blue-america\/<\/a><\/div>\n<\/div>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/election-chart-redesign-5@2x.png\" width=\"400\" height=\"349\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Районы Лондона, <a href=\"https:\/\/www.informationisbeautifulawards.com\/showcase\/842-london-squared-map-making-the-city-easier-to-read\">informationisbeautifulawards.com\/showcase\/842-london-squared-map-making-the-city-easier-to-read<\/a>, оригинальная ссылка сломалась, держите эту<\/div>\n<\/div>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/election-chart-redesign-6@2x.png\" width=\"1010\" height=\"743\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Результаты выборов в США, нашел <a href=\"https:\/\/kirillbelyaev.com\/ru\/blog\/all\/squared-maps\/\">у Кирилла Беляева<\/a><\/div>\n<\/div>\n<p>Картинку Максима Каца нужно переделать в карту, так станет понятно, где больше фальсификаций, а где меньше, да и просто будет проще найти свой регион.<\/p>\n<h2>Редизайн<\/h2>\n<p><aside class=\"aside-margin-right\">Посмотрите сайт Kompany, много клевых визуализаций: <a href=\"https:\/\/kompany.site\">kompany.site<\/a><\/aside><\/p>\n<p>Самый сложный момент — составить узнаваемую регулярную карту, для США такого полно, для России я не встречал. Оказалось уже были попытки сделать, я воспользовался готовой картой Ивана Дианова (<a href=\"https:\/\/medium.com\/kompany\/the-step-by-step-story-of-making-a-tile-grid-map-of-russia-92190d14e41e\">medium.com\/kompany\/the-step-by-step-story-of-making-a-tile-grid-map-of-russia-92190d14e41e<\/a>)<\/p>\n<p><aside class=\"aside-margin-right\">У Kompany есть даже рабочий сайт: <a href=\"https:\/\/spending.gov.ru\/analytics\/ratings\/rating-protectionism\/\">spending.gov.ru\/analytics\/ratings\/rating-protectionism\/<\/a><\/aside><\/p>\n<p>Посмотрите процесс в посте, там был много попыток нарисовать хорошую регулярную карту.<\/p>\n<p>Upd. Женя Софронов принес ссылку на конкурс регулярных карт для России, на котором как раз победила карта Ивана Дианова. Посмотрите, там много интересного: <a href=\"https:\/\/telegra.ph\/Uchastniki-i-ih-raboty-12-03\">telegra.ph\/Uchastniki-i-ih-raboty-12-03<\/a>.<\/p>\n<p>Итог:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/russia-election-map@2x.png\" width=\"1390\" height=\"788\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Собрал в фигме, чтобы вы могли себе скопировать: <a href=\"https:\/\/www.figma.com\/file\/eflJ42NaaPY8kcyc7ZetKJ\/russia-regular-vote-map\">figma.com\/file\/eflJ42NaaPY8kcyc7ZetKJ\/russia-regular-vote-map<\/a><\/div>\n<\/div>\n<p>Теперь легче и интереснее рассматривать и проще сделать какие выводы. Сделать выводы предлагаю самостоятельно.<\/p>\n",
            "date_published": "2020-07-07T02:56:56+03:00",
            "date_modified": "2024-01-07T14:56:06+03:00",
            "image": "https:\/\/mikeozornin.ru\/blog\/pictures\/election-chart-redesign@2x.png",
            "_date_published_rfc2822": "Tue, 07 Jul 2020 02:56:56 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "148",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/election-chart-redesign@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/election-chart-redesign-1@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/election-chart-redesign-2@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/election-chart-redesign-3@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/election-chart-redesign-4@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/election-chart-redesign-5@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/election-chart-redesign-6@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/russia-election-map@2x.png"
                ]
            }
        },
        {
            "id": "111",
            "url": "https:\/\/mikeozornin.ru\/blog\/all\/dont-make-me-click-and-hover\/",
            "title": "Не скрывать, а показать сразу",
            "content_html": "<p class=\"lead\">Расскажу об одном простом принципе в информационном дизайне и дизайне вообще<\/p>\n<p>ТАСС сделало интерактивный рассказ про дирижабль «Италия»:<\/p>\n<div class=\"e2-text-picture\">\n<a href=\"http:\/\/italia.tass.ru\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/italia-tass-0@2x.png\" width=\"1280\" height=\"804.5\" alt=\"\" \/>\n<\/a><\/div>\n<p>Не собираясь оценивать их рассказ, я расскажу об одном моменте рассказа.<\/p>\n<p>На странице есть схема устройства дирижабля:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/italia-tass-1@2x.png\" width=\"1056\" height=\"505\" alt=\"\" \/>\n<\/div>\n<p>Все детали скрыты за красными точечками, нужно навести мышку, чтобы узнать что это за деталь. Чтобы посетители справились, пришлось даже сделать мини-онбординг (↑ справка). Я бы предположил, что он не очень помогает.<\/p>\n<p>Но даже те, кто по каким-то причинам знают, что делать, будут мучиться: навел — прочитал — навел — забыл, что только что было — навел — прочитал. Это неудобно, желание изучать схему почти сразу пропадает.<\/p>\n<p>Лучше сразу всё подписать:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/italia-tass-2@2x.png\" width=\"1056\" height=\"505\" alt=\"\" \/>\n<\/div>\n<p>Особенно глупо точки смотрятся на этой фотографии:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/italia-tass-3@2x.png\" width=\"1280\" height=\"457.5\" alt=\"\" \/>\n<\/div>\n<p>Чтобы не заставлять читателя страдать, есть простое правило:<\/p>\n<p class=\"loud\">Если можно не прятать, лучше не прятать.<\/p>\n<p><\/p>\n<p>Когда будете подписывать схемы и скриншоты почитайте на что обращать внимание: <a href=\"http:\/\/mikeozornin.ru\/blog\/all\/how-to-label-screenshots\/\">Как подписывать скриншоты<\/a><\/p>\n",
            "date_published": "2019-03-01T08:00:28+03:00",
            "date_modified": "2020-11-10T01:36:54+03:00",
            "image": "https:\/\/mikeozornin.ru\/blog\/pictures\/italia-tass-0@2x.png",
            "_date_published_rfc2822": "Fri, 01 Mar 2019 08:00:28 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "111",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/italia-tass-0@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/italia-tass-1@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/italia-tass-2@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/italia-tass-3@2x.png"
                ]
            }
        },
        {
            "id": "91",
            "url": "https:\/\/mikeozornin.ru\/blog\/all\/how-to-label-timeseries\/",
            "title": "Как делать подписи для таймсерий",
            "content_html": "<p class=\"lead\">Таймсерии — графики, где что-то зависит от времени обычно. В посте я расскажу, как делать на них подписи. Это улучшенная версия статьи из наших внутренних дизайнерских гайдлайнов, поэтому тут может встретиться неожиданная категоричность.<\/p>\n<h2>В чем проблема<\/h2>\n<p>Если не следить за подписями, то программа или библиотека расставит отметки автоматически. Скорей всего она поделит интервал на равные промежутки и может получиться плохо. Вот скриншот временной оси графика, обратите внимание, что показано только время:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/timeseries-post-0@2x.png\" width=\"651\" height=\"53\" alt=\"\" \/>\n<\/div>\n<p>Библиотека отрисовки почему-то решила не подписывать даты и подписала только время. На самом деле пеньки <i>3:00 21 мая, 15:00 23 мая, 3:00 26 мая, 15:00 28 мая, 3:00 31 мая, 15:00 2 июня.<\/i> Понять это из подписей почти невозможно.<\/p>\n<p>Я перерисую скриншот, чтобы можно было менять и иллюстрировать:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/timeseries-post-0-2@2x.png\" width=\"520\" height=\"52\" alt=\"\" \/>\n<\/div>\n<p>Первое, что нужно сделать — всегда писать даты:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/timeseries-post-1@2x.png\" width=\"520\" height=\"52\" alt=\"\" \/>\n<\/div>\n<p>Стало понятно, но тоже плохо. Пеньки получились неудобные, читать их неудобно. Все потому, что программа поделила ось на равные промежутки и подписала их. В данном случае число отсчетов не совпало с числом дней, поэтому программа выбрала промежутками не целые дни.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/timeseries-post-2@2x.png\" width=\"520\" height=\"60\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Пурпурные линии — границы дней<\/div>\n<\/div>\n<p>В посте я расскажу что с этим всем делать.<\/p>\n<h2>Общие правила<\/h2>\n<ol start=\"1\">\n<li>Подписи отметок соотносятся с масштабом. При показе данных за год показывать время с точностью до минут не имеет смысла.<\/li>\n<li>Всегда выбирается максимально детальный разумный масштаб. Если без проблем указывается с точностью до дней, то не надо укрупнять отметки до 5-дневных просто так.<\/li>\n<li>Отметки должны быть регулярны. Разный шаг не позволит удобно прикинуть промежуточное значение. Если регулярные метки не получаются, то основную часть отметок лучше сделать регулярными, а нерегулярные остатки сложить к одному из концов интервала.<\/li>\n<li>Смысловые отметки лучше несмысловых. Отметка <i>22:12<\/i> — странно, <i>22:30<\/i> — норм. Вряд ли имеет смысл использовать что-то, не попадающее в этот список:<br \/>\n<i>1, 5, 10, 15, 30 секунд,<\/i><br \/>\n<i>1, 5, 10, 15, 30 минут,<\/i><br \/>\n<i>1, 2, 4, 6, 12, 24 часов,<\/i><br \/>\n<i>1, 2, 5, 10, 15 дней,<\/i><br \/>\n<i>1, 2 недели (если нужны именно календарные недели),<\/i><br \/>\n<i>1, 2, 3, 6 месяцев,<\/i><br \/>\n<i>1, 2 года, 5, 10 лет.<\/i><br \/>\nДробными числами, не подходящими под указанные выше, допустимо подписывать только начало и конец.<\/li>\n<\/ol>\n<h2>Информативность<\/h2>\n<ol start=\"1\">\n<li>Дублировать одно и то же — плохо. Не надо писать у отметок так: <i>01.01.2015, 01.02.2015, 01.03.2015, 01.05.2015.<\/i> Но и <i>01.01, 01.02, 01.03, 01.05<\/i> тоже плохо (см. следующий пункт). Кстати, кто-нибудь заметил, что я пропустил апрель?<\/li>\n<li>Для дат лучше всего использовать формат <i>1 мая, 2 июня, 13 ноя<\/i>. Месяцы сокращаются до трех букв без точки (кроме мая, июня и июля), ведущий ноль у числа не пишется.<\/li>\n<\/ol>\n<blockquote>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/timeseries-post-6@2x.png\" width=\"509\" height=\"98\" alt=\"\" \/>\n<\/div>\n<\/blockquote>\n<ol start=\"3\">\n<li>Если год на отметках повторяется, то лучше подписать его у первой отметки этого года, а у следующих не подписывать. Год стоит продублировать у крайних отметок, чтобы было проще понять, какая это дата.<\/li>\n<\/ol>\n<blockquote>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/timeseries-post-5@2x.png\" width=\"507\" height=\"120\" alt=\"\" \/>\n<\/div>\n<\/blockquote>\n<ol start=\"4\">\n<li>Секунды у времени не пишутся, если не сказано обратного — <i>22:12<\/i>. Любое время, кроме полуночи лучше писать без ведущих нулей: <i>6:25, 9:13, 12:56,<\/i> но <i>00:00<\/i>. Для секунд, там где они нужны, допускается писать только секунды: <i>10:55, :56, :57, :58, :59, 11:00, :01, :02.<\/i><\/li>\n<\/ol>\n<h2>Оформление<\/h2>\n<ol start=\"1\">\n<li>Если отметок много и они переносятся в две строки, лучше снизить число отметок, а не переносить.<\/li>\n<\/ol>\n<blockquote>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/timeseries-post-7@2x.png\" width=\"507\" height=\"112\" alt=\"\" \/>\n<\/div>\n<\/blockquote>\n<ol start=\"2\">\n<li>Текст подписи выравнивает по центру, сама подпись — по пеньку.<\/li>\n<li>Между отметками должен быть минимальный отступ в 16 пк, если отступ будет меньше, то отметки слипнутся.<\/li>\n<\/ol>\n<h2>Края интервала<\/h2>\n<p>Когда левая и правая границы важны, нужно подписать эти отметки явно. Скорей всего для этого придется убрать подписи у ближайших отметок: отметки <i>6:00<\/i> (между <i>3:52<\/i> и <i>8:00<\/i>) и <i>2:00<\/i> (между <i>00:00<\/i> и <i>3:12<\/i>) как бы должны быть, но не влезли:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/timeseries-post-first-and-last-1@2x.png\" width=\"527\" height=\"57\" alt=\"\" \/>\n<\/div>\n<p>Если явно задана только левая, а правая — <i>сейчас<\/i>, то правую можно не подписывать:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/timeseries-post-first-and-last-2@2x.png\" width=\"527\" height=\"57\" alt=\"\" \/>\n<\/div>\n<p>Если края не принципиальны, то можно не подписывать оба конца:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/timeseries-post-first-and-last-3@2x.png\" width=\"527\" height=\"57\" alt=\"\" \/>\n<\/div>\n<h2>Примеры<\/h2>\n<p>Примеры того, что получится, если воспользоваться рекомендациями:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/timeseries-post-examples-200@2x.png\" width=\"500\" height=\"615\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/timeseries-post-examples-480@2x.png\" width=\"845\" height=\"615\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/timeseries-post-examples-1600@2x.png\" width=\"2000\" height=\"774\" alt=\"\" \/>\n<\/div>\n<p>Если применить все рекомендации к примеру из начала поста, то получится как-то так:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/timeseries-post-8@2x.png\" width=\"524\" height=\"284\" alt=\"\" \/>\n<\/div>\n<div class=\"post-summary\"><div class=\"post-summary__text\"><p>Выводы простые: не доверяйте программе ставить отметки как получится, скорей всего получится плохо.<\/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": "81",
            "url": "https:\/\/mikeozornin.ru\/blog\/all\/from-table-to-chart\/",
            "title": "От таблицы к визуализации",
            "content_html": "<p>Таблица по-моему — самый недооцененный формат представления информации. Я очень часто слышу «давай сделаем таблицу, а потом сделаем полноценную визуализацию». Почти всегда это полный бред.<\/p>\n<p>На самом деле таблица достаточно удачный формат:<\/p>\n<ul>\n<li><b>она плотная<\/b> — в таблицу часто можно разместить больше данных, чем в аналогичную по площади диаграмму распространенного типа;<\/li>\n<li><b>точная<\/b> — числа в таблице трактуются однозначней, чем всякие линие и кривые линии;<\/li>\n<li><b>без воды и лишних пикселей<\/b> — почти все пиксели за исключением шапки служат для показа данных, в правильной таблице очень мало оформления ради оформления.<\/li>\n<\/ul>\n<p>Наверное, таблицы многим кажутся скучными. Людям не хочется изучать данные и вглядываться в таблицу. Можно одновременно её «развеселить», сделать наглядней и повысить скорость считывания — для этого нужно таблицу раскрасить. Покажу на примерах.<\/p>\n<p>После окончания 1-й ступени школы стажеров мне стало интересно сравнить свои результаты с результатами других студентов. Из таблицы общего рейтинга сложно понять, где я просел, а где нет. Цифры очень похожи, сложно заметить что-либо.<\/p>\n<div class=\"e2-text-picture\">\n<a href=\"https:\/\/docs.google.com\/spreadsheets\/d\/1RcY-G74aIDQqyLinEeJYVum1vBdS6gzk2o_3M8tjEZU\/edit?usp=sharing\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/table-to-chart-1@2x.png\" width=\"1069\" height=\"504\" alt=\"\" \/>\n<\/a><\/div>\n<p><aside class=\"aside-margin-right\"><span class=\"related-excerpt\">Для создания цветовых шкал используйте <a href=\"http:\/\/colorbrewer2.org\">Color Brewer<\/a><\/span><\/aside><\/p>\n<p>Если подкрасить ячейки таблицы, станет проще заметить различия: из первой тройки мне хуже далась курсовая, Аркадию — управление, а Андрею — право.<\/p>\n<div class=\"e2-text-picture\">\n<a href=\"https:\/\/docs.google.com\/spreadsheets\/d\/1RcY-G74aIDQqyLinEeJYVum1vBdS6gzk2o_3M8tjEZU\/edit?usp=sharing\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/table-to-chart-2@2x.png\" width=\"1069\" height=\"504\" alt=\"\" \/>\n<\/a><div class=\"e2-text-caption\">Расскраска по процентилям: 0,95 · 0,9 · 0,75 · 0,4 · 0,1<\/div>\n<\/div>\n<p>Раскраска немного помогает, но при этом не решает главную сложность: все зеленые клеточки скопились вверху, а все незеленые внизу. Это происходит потому, что идет сравнение всех со всеми, хотя намного интересней сравнивать студентов с ближайшим окружением. Чтобы различия студентов рядом были заметны придется добавить цветов. Но добавлять цветов бесконечно не получится — таблица превратится в новогоднюю елку с гирляндой.<\/p>\n<p>Чтобы сделать сравнение соседей проще я перешел от абсолютной шкалы к относительной: не <i>как я вообще в рейтинге<\/i>, а <i>как я относительно моих ближайших соседей<\/i>. Чтобы посмотреть на это, для каждого студента я взял по 2 соседа вверх и вниз по рейтингу. В каждой такой группе я посчитал средние баллы и разницу баллов студента относительно своей группы.<\/p>\n<p>Такой способ часто называется скользящим окном:<\/p>\n<div class=\"e2-text-video\">\n<iframe src=\"https:\/\/www.youtube.com\/embed\/1NG2pcC7fAY?enablejsapi=1\" allow=\"autoplay\" frameborder=\"0\" allowfullscreen><\/iframe>\n<\/div>\n<p>Получилась такая таблица:<\/p>\n<div class=\"e2-text-picture\">\n<a href=\"https:\/\/docs.google.com\/spreadsheets\/d\/1RcY-G74aIDQqyLinEeJYVum1vBdS6gzk2o_3M8tjEZU\/edit?usp=sharing\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/table-to-chart-3@2x.png\" width=\"1025\" height=\"522\" alt=\"\" \/>\n<\/a><\/div>\n<p>Как покрасить такую таблицу — понятно: там, где студент лучше своей группы — зеленое, где хуже — желто-рыжее.<\/p>\n<div class=\"e2-text-picture\">\n<a href=\"https:\/\/docs.google.com\/spreadsheets\/d\/1RcY-G74aIDQqyLinEeJYVum1vBdS6gzk2o_3M8tjEZU\/edit?usp=sharing\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/table-to-chart-4@2x.png\" width=\"1025\" height=\"522\" alt=\"\" \/>\n<\/a><\/div>\n<p>Аркадий отлично сдал вступительное, оно дало ему большой запаc. Я понемногу обгонял Андрея и Аркадия в тестах, но слил накопленное в курсовой. Леонид начал не с самых сильных позиций, но методичная работа подняла его в рейтинге. Евгений шел неравномерно: некоторые тесты лучше всех, а некоторые ощутимо хуже соседей.<\/p>\n<p>От раскрашенной таблицы остается всего один шаг до <b>теплокарты<\/b> (heatmap) — графика, в котором области красятся в разные цвета. Вместо прямоугольных ячеек прямоугольной таблицы берутся ячейки другой формы и располагаются в каком-то естественном порядке: время, география, физическое положение.<\/p>\n<p>Вот несколько примеров:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/0e7a6t.png\" width=\"1800\" height=\"1170\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/e6b163.png\" width=\"1526\" height=\"1186\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/pdd-main-1050.png\" width=\"1050\" height=\"440\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/3lt9w6@2x.png\" width=\"728\" height=\"602\" alt=\"\" \/>\n<\/div>\n<p>Даже график ниже — тоже таблица, хотя и не очень похоже, просто ячеек очень много и они очень мелкие:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/nd64rm.png\" width=\"1820\" height=\"1324\" alt=\"\" \/>\n<\/div>\n<p>Не стесняйтесь таблиц, это нормальный формат. Вот два совета бюро как сделать таблицы лучше:<\/p>\n<ul>\n<li><a href=\"https:\/\/bureau.ru\/bb\/soviet\/20140812\/\">Как улучшить таблицу в угоду удобочитаемости и экономии места<\/a><\/li>\n<li><a href=\"https:\/\/bureau.ru\/bb\/soviet\/20150127\/\">Расскажите про вёрстку больших таблиц<\/a><\/li>\n<\/ul>\n<p>Посмотрите ещё визуализацию прогресса студентов у Михаила Капанаги: <a href=\"http:\/\/burostat.ru\">http:\/\/burostat.ru<\/a><\/p>\n",
            "date_published": "2018-02-02T12:53:57+03:00",
            "date_modified": "2018-02-05T13:17:55+03:00",
            "image": "https:\/\/mikeozornin.ru\/blog\/pictures\/table-to-chart-1@2x.png",
            "_date_published_rfc2822": "Fri, 02 Feb 2018 12:53:57 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "81",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [
                    "system\/library\/jquery\/jquery.js",
                    "system\/library\/media-seek\/media-seek.js"
                ],
                "og_images": [
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/table-to-chart-1@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/table-to-chart-2@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/remote\/youtube-1NG2pcC7fAY-cover.jpg",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/table-to-chart-3@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/table-to-chart-4@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/0e7a6t.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/e6b163.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/pdd-main-1050.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/3lt9w6@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/nd64rm.png"
                ]
            }
        },
        {
            "id": "75",
            "url": "https:\/\/mikeozornin.ru\/blog\/all\/time-series-scale\/",
            "title": "Что делать с масштабом временных рядов",
            "content_html": "<p>Хочу рассказать про один способ отображения временных рядов (time series — графиков, где ось абсцисс — время).<\/p>\n<p>Например, есть такой график:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/cubism-1@2x.png\" width=\"614\" height=\"114\" alt=\"\" \/>\n<\/div>\n<p>Представим, что нам нужно отслеживать состояние какой-то сложной системы со многими параметрами: загрузкой ЦПУ, сетью, трафиком и чем-то ещё. В этом случае графики должны помогать нам:<\/p>\n<ul>\n<li>замечать выбросы, отличающиеся от нормального поведения системы: <i>какая-то аномальная загрузка ЦП в датацентре Амстердама, большой исходящий трафик в Сингапуре;<\/i><\/li>\n<li>отмечать какие-то паттерны: <i>в датацентрах какая-то периодическая дисковая активность в середине дня;<\/i><\/li>\n<li>видеть при этом каждый из параметров: <i>здесь наблюдается плавный рост, а потом резкое падение — сработало масштабирование нагрузки, а во втором случае рост был быстрый, системы масштабирования не успели отреагировать;<\/i><\/li>\n<li>сравнивать параметры между собой: <i>серверы в Сингапуре почти всегда загружены, а в Европе простаивают, не дотягивают и трети сингапурских;<\/i><\/li>\n<\/ul>\n<p><aside class=\"aside-margin-right\"><span class=\"related-title\"><a href=\"https:\/\/bureau.ru\/bb\/soviet\/20150407\/\">Мы решили объединить эти значения в один график<\/a> — совет бюро, в котором рассказывается почему не надо накладывать графики друг на друга<\/span><\/aside><\/p>\n<p>Чтобы сравнить много графиков, проще всего сложить их в стопку (иногда накладывают их друг на друга на одной оси, но так делать не надо). Чтобы все они влезли, нам придется изменить вертикальный масштаб:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/cubism-2@2x.png\" width=\"614\" height=\"112\" alt=\"\" \/>\n<\/div>\n<p>Если графиков будет много, то получится нечитаемая каша:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/series.png\" width=\"1970\" height=\"1112\" alt=\"\" \/>\n<\/div>\n<p>Масштаб графиков по высоте стал совсем плохой: попробуйте заметить здесь те самые выбросы и отклонения и проследите взаимосвязи между параметрами. Невозможно, да.<\/p>\n<p>Сейчас я немного изменю график, чтобы показать, как можно компенсировать эти проблемы.<\/p>\n<p>Исходный график:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/cubism-1@2x.png\" width=\"614\" height=\"114\" alt=\"\" \/>\n<\/div>\n<p>Сначала поделим наш график по оси ординат на несколько групп:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/cubism-3@2x.png\" width=\"614\" height=\"114\" alt=\"\" \/>\n<\/div>\n<p><aside class=\"aside-margin-right\"><span class=\"related-title\"><a href=\"http:\/\/colorbrewer2.org\">Color Brewer<\/a> — специальный инструмент для составления цветовых шкал<\/span><\/aside><\/p>\n<p>Потом раскрасим их по возрастанию значения:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/cubism-4@2x.png\" width=\"614\" height=\"114\" alt=\"\" \/>\n<\/div>\n<p>И сложим их одну на другую:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/cubism-5@2x.png\" width=\"614\" height=\"114\" alt=\"\" \/>\n<\/div>\n<p>Весь процесс (гифка):<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/cubism-total@2x.gif\" width=\"614\" height=\"114\" alt=\"\" \/>\n<\/div>\n<p>И как раз такие графики можно снова сложить стопкой:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/series-colored.png\" width=\"1968\" height=\"1164\" alt=\"\" \/>\n<\/div>\n<p>Такой график отлично показывает наличие пиков и нулей: пики — яркие, нули — пустоты. Кроме этого он не портит вертикальный масштаб: не сжимает его и не растягивает.<br \/>\n<small><a href=\"https:\/\/ilyabirman.ru\/meanwhile\/all\/vertical-scale\/\">Оптимальный вертикальный масштаб графика, Илья Бирман<\/a><\/small><\/p>\n<p>И с нашими ожиданиями от графика стало все лучше, вот с этими:<\/p>\n<ul>\n<li>замечать выбросы, отличающиеся от нормального поведения системы,<\/li>\n<li>отмечать какие-то паттерны,<\/li>\n<li>видеть при этом каждый из параметров,<\/li>\n<li>сравнивать параметры между собой.<\/li>\n<\/ul>\n<p>Ещё раз было-стало:<\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"1970\" data-ratio=\"1.7715827338129\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/series.png\" width=\"1970\" height=\"1112\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/series-colored.png\" width=\"1968\" height=\"1164\" alt=\"\" \/>\n<\/div>\n<\/div>\n<p>Программировать с нуля такую штуку не придется: компания Square, делающая терминалы для приема оплаты с банковских карт, разработала библиотеку для такой визуализации.<\/p>\n<div class=\"e2-text-picture\">\n<a href=\"http:\/\/square.github.io\/cubism\/\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/cubism-js@2x.png\" width=\"985\" height=\"458\" alt=\"\" \/>\n<\/a><div class=\"e2-text-caption\"><a href=\"http:\/\/square.github.io\/cubism\/\">http:\/\/square.github.io\/cubism\/<\/a><\/div>\n<\/div>\n<p>Ссылки по теме:<\/p>\n<ul>\n<li><a href=\"http:\/\/www.perceptualedge.com\/articles\/visual_business_intelligence\/time_on_the_horizon.pdf\">Time on the Horizon, Stephen Few и Perceptual Edge, PDF<\/a> Оригинальная статья, по которой я писал пост<\/li>\n<li><a href=\"https:\/\/bureau.ru\/bb\/soviet\/20150407\/\">Мы решили объединить эти значения в один график<\/a> Совет бюро, в котором рассказывается почему не надо накладывать графики друг на друга<\/li>\n<li><a href=\"http:\/\/colorbrewer2.org\">Color Brewer<\/a> Специальный инструмент для составления цветовых шкал<\/li>\n<li><a href=\"https:\/\/ilyabirman.ru\/meanwhile\/all\/vertical-scale\/\">Оптимальный вертикальный масштаб графика, Илья Бирман<\/a><\/li>\n<\/ul>\n",
            "date_published": "2018-01-24T11:18:34+03:00",
            "date_modified": "2024-01-07T10:18:14+03:00",
            "image": "https:\/\/mikeozornin.ru\/blog\/pictures\/cubism-1@2x.png",
            "_date_published_rfc2822": "Wed, 24 Jan 2018 11:18:34 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "75",
            "_e2_data": {
                "is_favourite": true,
                "links_required": [
                    "system\/library\/jquery\/jquery.js",
                    "system\/library\/fotorama\/fotorama.css",
                    "system\/library\/fotorama\/fotorama.js"
                ],
                "og_images": [
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/cubism-1@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/cubism-2@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/series.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/cubism-3@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/cubism-4@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/cubism-5@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/cubism-total@2x.gif",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/series-colored.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/cubism-js@2x.png"
                ]
            }
        },
        {
            "id": "24",
            "url": "https:\/\/mikeozornin.ru\/blog\/all\/rasskazal-na-rabote-pro-predstavlenie-informacii\/",
            "title": "Рассказал на работе про представление информации",
            "content_html": "<p>Оригинал в ЖЖ: <a href=\"http:\/\/withoutbrains.livejournal.com\/91246.html\">http:\/\/withoutbrains.livejournal.com\/91246.html<\/a><\/p>\n<div class=\"e2-text-video\">\n<iframe src=\"https:\/\/www.youtube.com\/embed\/uinTUOltYAQ?enablejsapi=1\" allow=\"autoplay\" frameborder=\"0\" allowfullscreen><\/iframe>\n<div class=\"e2-text-caption\">Я и визуализация Лаборатории данных<\/div>\n<\/div>\n<p class=\"lead\">Рассказал на работе про представление информации<\/p>\n<p class=\"lead\">Устроил на работе полуторачасовой рассказ про представление информацию, визуализацию данных, всякие графики. Даже вот видео есть.<\/p>\n<p class=\"lead\">Иллюстрации (они же слайды): <a href=\"https:\/\/yadi.sk\/d\/nxuEjqSCkhxRk\">https:\/\/yadi.sk\/d\/nxuEjqSCkhxRk<\/a><\/p>\n<p>Оглавление видео<br \/>\nСам рассказ до 1:28:00<\/p>\n<p>05:09 визуальные манипуляции<\/p>\n<p>13:30 информативность<\/p>\n<p>14:30 визуальный мусор<\/p>\n<p>20:30 случайные искажения<\/p>\n<p>28:05 неудачные примеры<\/p>\n<p>36:20 как надо делать графики: оси, масштаб, цвета<\/p>\n<p>45:20 информационные слои<\/p>\n<p>51:45 микро- и макро-<\/p>\n<p>56:25 рассказываю про форматы<\/p>\n<p>  56:32 текст<br \/>\n  57:15 таблица<br \/>\n  1:01:50 пирожковые диаграммы<br \/>\n  1:03:40 искрографики<br \/>\n  1:06:03 фоновые диаграммы<br \/>\n  1:08:26 карты<br \/>\n  1:13:40 уклонограммы<br \/>\n  1:15:20 удавы<br \/>\n  1:20:50 графические расписания<br \/>\n  1:24:30 quality control chart<\/p>\n<p>1:26:20 что ещё почитать<\/p>\n<p>Потом 3 минуты рассказываю про домашнее задание для желающих.<\/p>\n<p>С 1:31:00 ответы на вопросы.<\/p>\n<p>Пишите, если что-то неясно.<\/p>\n<p>Напишите на почту <a href=\"mailto:mike.ozornin@gmail.com\">mike.ozornin@gmail.com<\/a>, если хотите позвать меня с рассказом себе в компанию.<\/p>\n",
            "date_published": "2015-11-26T03:00:02+03:00",
            "date_modified": "2018-12-16T01:35:15+03:00",
            "image": "https:\/\/mikeozornin.ru\/blog\/pictures\/remote\/youtube-uinTUOltYAQ-cover.jpg",
            "_date_published_rfc2822": "Thu, 26 Nov 2015 03:00:02 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "24",
            "_e2_data": {
                "is_favourite": true,
                "links_required": [
                    "system\/library\/jquery\/jquery.js",
                    "system\/library\/media-seek\/media-seek.js"
                ],
                "og_images": [
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/remote\/youtube-uinTUOltYAQ-cover.jpg"
                ]
            }
        },
        {
            "id": "7",
            "url": "https:\/\/mikeozornin.ru\/blog\/all\/statistika-po-zadacham\/",
            "title": "Статистика по задачам",
            "content_html": "<p>Оригинал в ЖЖ: <a href=\"http:\/\/withoutbrains.livejournal.com\/78773.html\">http:\/\/withoutbrains.livejournal.com\/78773.html<\/a><\/p>\n<p>Некоторое время назад я нарисовал на работе картинку по числу создаваемых в трекере задач (и багов, но и не только). Попытался подчеркнуть некоторые факты и тенденции.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/13415_original.png\" width=\"844\" height=\"493\" alt=\"\" \/>\n<\/div>\n<p>Что плохо? Что удалось? Что можно было бы сделать не так? Пишите и про концептуальные вещи, и про мелочи (не такой отступ, другой шрифт, нарушена теория близости и прочее).<\/p>\n",
            "date_published": "2013-05-28T01:26:00+03:00",
            "date_modified": "2016-08-14T20:40:01+03:00",
            "image": "https:\/\/mikeozornin.ru\/blog\/pictures\/13415_original.png",
            "_date_published_rfc2822": "Tue, 28 May 2013 01:26:00 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "7",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/13415_original.png"
                ]
            }
        }
    ],
    "_e2_version": 3798,
    "_e2_ua_string": "E2 (v3798; Aegea)"
}