{
    "version": "https:\/\/jsonfeed.org\/version\/1.1",
    "title": "Блог Михаила Озорнина: заметки с тегом визуализация данных",
    "_rss_description": "Главная · Блог · Работы",
    "_rss_language": "ru",
    "_itunes_email": "",
    "_itunes_categories_xml": "",
    "_itunes_image": "",
    "_itunes_explicit": "",
    "home_page_url": "https:\/\/img.mikeozornin.ru\/blog\/tags\/data-vizualization\/",
    "feed_url": "https:\/\/img.mikeozornin.ru\/blog\/tags\/data-vizualization\/json\/",
    "icon": "https:\/\/img.mikeozornin.ru\/blog\/pictures\/userpic\/userpic@2x.jpg?1614204384",
    "authors": [
        {
            "name": "Михаил Озорнин",
            "url": "https:\/\/img.mikeozornin.ru\/blog\/",
            "avatar": "https:\/\/img.mikeozornin.ru\/blog\/pictures\/userpic\/userpic@2x.jpg?1614204384"
        }
    ],
    "items": [
        {
            "id": "231",
            "url": "https:\/\/img.mikeozornin.ru\/blog\/all\/claude-sonnet-5-5-charts\/",
            "title": "Как читать графики ии-бенчей",
            "content_html": "<p>Тут вышел sonnet 5.5: <a href=\"https:\/\/www.anthropic.com\/claude-sonnet-5-5\">anthropic.com\/claude-sonnet-5-5<\/a><\/p>\n<p>Не собираюсь обсуждать качество модели, расскажу как манипулируют рассказом.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/img.mikeozornin.ru\/blog\/pictures\/claude-sonnet-5-5-charts-1@2x.png\" width=\"880\" height=\"673\" alt=\"\" \/>\n<\/div>\n<p>Из графика очевидны две вещи:<\/p>\n<ul>\n<li>Новый соннет 5.5 лучше во всем старого соннета 5.<\/li>\n<li>Новый соннет 5.5 почти такой же, как новый более дорогой (по токенам) опус 5.5.<\/li>\n<\/ul>\n<p>Так ли на самом деле? Предлагаю глянуть официальный график из того же анонса. Я всего лишь подпишу значения на графике их же тултипами.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/img.mikeozornin.ru\/blog\/pictures\/claude-sonnet-5-5-charts-2@2x.png\" width=\"766\" height=\"546\" alt=\"\" \/>\n<\/div>\n<p>Выходит, соннет 5.5 чуть хуже и на 36,5% дороже опуса 5.5. Может другой график лучше?<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/img.mikeozornin.ru\/blog\/pictures\/claude-sonnet-5-5-charts-3@2x.png\" width=\"766\" height=\"546\" alt=\"\" \/>\n<\/div>\n<p>А тут соннет 5.5 не просто чуть-чуть хуже, он еще и в 52 (sic!) раза дороже. Отчасти, это проблема бенча Frontier Code v1.1, он такой по своей идее. Но не в 52 же раза!<\/p>\n<p>В итоге соннет 5.5 по сравнению с опусом 5.5 (более дорогой моделью) почти всегда:<\/p>\n<ul>\n<li>дороже при том же уме,<\/li>\n<li>глупее при той же стоимости,<\/li>\n<li>глупее и дороже одновременно, иногда значительно.<\/li>\n<\/ul>\n<p>Очевидно ли всё это из таблички анонса? Нет<br \/>\nСлучайно ли получилось так, что не понятно? Не знаю<\/p>\n",
            "summary": "Тут вышел sonnet 5.5: anthropic.com\/claude-sonnet-5-5",
            "date_published": "2026-09-28T22:27:52+03:00",
            "date_modified": "2026-09-28T22:27:49+03:00",
            "tags": [
                "антропик",
                "визуализация данных",
                "ИИ",
                "манипуляция"
            ],
            "image": "https:\/\/img.mikeozornin.ru\/blog\/pictures\/claude-sonnet-5-5-charts-1@2x.png",
            "_date_published_rfc2822": "Mon, 28 Sep 2026 22:27:52 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "231",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "https:\/\/img.mikeozornin.ru\/blog\/pictures\/claude-sonnet-5-5-charts-1@2x.png",
                    "https:\/\/img.mikeozornin.ru\/blog\/pictures\/claude-sonnet-5-5-charts-2@2x.png",
                    "https:\/\/img.mikeozornin.ru\/blog\/pictures\/claude-sonnet-5-5-charts-3@2x.png"
                ]
            }
        },
        {
            "id": "81",
            "url": "https:\/\/img.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:\/\/img.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:\/\/img.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:\/\/img.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:\/\/img.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:\/\/img.mikeozornin.ru\/blog\/pictures\/0e7a6t.png\" width=\"1800\" height=\"1170\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/img.mikeozornin.ru\/blog\/pictures\/e6b163.png\" width=\"1526\" height=\"1186\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/img.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:\/\/img.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:\/\/img.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",
            "summary": "Таблица по-моему — самый недооцененный формат представления информации. Я очень часто слышу «давай сделаем таблицу, а потом сделаем полноценную визуализацию»",
            "date_published": "2018-02-02T12:53:57+03:00",
            "date_modified": "2018-02-05T13:17:55+03:00",
            "tags": [
                "визуализация данных",
                "инфодизайн",
                "таблица"
            ],
            "image": "https:\/\/img.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": [],
                "og_images": [
                    "https:\/\/img.mikeozornin.ru\/blog\/pictures\/table-to-chart-1@2x.png",
                    "https:\/\/img.mikeozornin.ru\/blog\/pictures\/table-to-chart-2@2x.png",
                    "https:\/\/img.mikeozornin.ru\/blog\/pictures\/remote\/youtube-1NG2pcC7fAY-cover.jpg",
                    "https:\/\/img.mikeozornin.ru\/blog\/pictures\/table-to-chart-3@2x.png",
                    "https:\/\/img.mikeozornin.ru\/blog\/pictures\/table-to-chart-4@2x.png",
                    "https:\/\/img.mikeozornin.ru\/blog\/pictures\/0e7a6t.png",
                    "https:\/\/img.mikeozornin.ru\/blog\/pictures\/e6b163.png",
                    "https:\/\/img.mikeozornin.ru\/blog\/pictures\/pdd-main-1050.png",
                    "https:\/\/img.mikeozornin.ru\/blog\/pictures\/3lt9w6@2x.png",
                    "https:\/\/img.mikeozornin.ru\/blog\/pictures\/nd64rm.png"
                ]
            }
        }
    ],
    "_e2_version": 4199,
    "_e2_ua_string": "Aegea 11.5 (v4199)"
}