{
    "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\/data-vizualization\/",
    "feed_url": "https:\/\/mikeozornin.ru\/blog\/tags\/data-vizualization\/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": "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"
                ]
            }
        }
    ],
    "_e2_version": 3798,
    "_e2_ua_string": "E2 (v3798; Aegea)"
}