{
    "version": "https:\/\/jsonfeed.org\/version\/1",
    "title": "Блог Михаила Озорнина: заметки с тегом cubism.js",
    "_rss_description": "Главная · Блог · Работы ·",
    "_rss_language": "ru",
    "_itunes_email": "",
    "_itunes_categories_xml": "",
    "_itunes_image": "",
    "_itunes_explicit": "",
    "home_page_url": "https:\/\/mikeozornin.ru\/blog\/tags\/cubism-js\/",
    "feed_url": "https:\/\/mikeozornin.ru\/blog\/tags\/cubism-js\/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": "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"
                ]
            }
        }
    ],
    "_e2_version": 3798,
    "_e2_ua_string": "E2 (v3798; Aegea)"
}