{
    "version": "https:\/\/jsonfeed.org\/version\/1",
    "title": "Таня Мисютина, заметки с тегом: визуальные атомы",
    "home_page_url": "https:\/\/blog.infotanka.ru\/tags\/vizualnye-atomy\/",
    "feed_url": "https:\/\/blog.infotanka.ru\/tags\/vizualnye-atomy\/json\/",
    "icon": "https:\/\/blog.infotanka.ru\/user\/userpic@2x.jpg",
    "author": {
        "name": "Таня Мисютина: mail@infotanka.ru",
        "url": "https:\/\/blog.infotanka.ru\/",
        "avatar": "https:\/\/blog.infotanka.ru\/user\/userpic@2x.jpg"
    },
    "items": [
        {
            "id": "271",
            "url": "https:\/\/blog.infotanka.ru\/all\/datalab-algorithm-visual-atoms-3\/",
            "title": "Алгоритм Δλ: визуальные атомы, часть 3",
            "content_html": "<p>Заключительная заметка о визуальных атомах (<a href=\"http:\/\/blog.infotanka.ru\/all\/datalab-algorithm-visual-atoms-1\/\">первая<\/a> и <a href=\"http:\/\/blog.infotanka.ru\/all\/datalab-algorithm-visual-atoms-2\/\">вторая<\/a> части). Сегодня поговорим о мини-графиках и картографических атомах.<\/p>\n<p><b>Мини-графики<\/b><br \/>\nИногда смысловой частицей данных, которую мы изучаем и сравниваем, является не единичное значние, а набор или серия значений. На прошедшем в апреле учебном курсе один из студентов визуализировал показания датчиков, контролирующих производственные процессы. Десятки датчиков измеряли различные величины иногда с частотой раз в секунду. В такой ситуации формально квантом информации является отдельное измерение, но осмысленной частицей данных будет «поток», то есть последовательность значений с каждого датчика. Потоки визуализируются мини-графиками, из которых складывается общая картина и которые можно сравнивать между собой. Вот грубая иллюстрация на примере схемы <a href=\"http:\/\/www.regular.ru\/\">Регуляра<\/a> — реальное расположение приборов и визуализация:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog.infotanka.ru\/pictures\/regular.png\" width=\"700\" height=\"689\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Вид мини-графика зависит от измеряемой величины, можно отметить минимумы, максимумы и допустимый диапазон<\/div>\n<\/div>\n<p>На визуализации <a href=\"http:\/\/mbostock.github.io\/protovis\/ex\/minnesota-full.html\">занятости жителей Миннесоты<\/a> хорошо видна сезонность в одних отраслях, рост и спад в других:<\/p>\n<div class=\"e2-text-picture\">\n<a href=\"http:\/\/mbostock.github.io\/protovis\/ex\/minnesota-full.html\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/blog.infotanka.ru\/pictures\/employment@2x.png\" width=\"700\" height=\"345\" alt=\"\" \/>\n<\/a><div class=\"e2-text-caption\">Видно появление и исчезновение таинственной отрасли Animal Aquaculture и космической программы — Space Research and Technology, в полной версии на сайте<\/div>\n<\/div>\n<p>Для удобства чтения все графики имеют одинаковую высоту в максимальной точке, соответсвенно разный масштаб. Конкретные значения показаны при наведении.<\/p>\n<p>Частота употребления слов в официальных обращениях американских политиков:<\/p>\n<div class=\"e2-text-picture\">\n<a href=\"http:\/\/www.nytimes.com\/interactive\/2012\/01\/24\/us\/politics\/0124-words.html?_r=0\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/blog.infotanka.ru\/pictures\/words@2x.png\" width=\"350\" height=\"839\" alt=\"\" \/>\n<\/a><div class=\"e2-text-caption\">Резкие пики сопровождаются пояснениями редакции<\/div>\n<\/div>\n<p>Климат разных городов на визуализации температурных рекордов, сравниваем толщину (разброс температур) и окраску (конкретные значения относительно нуля):<\/p>\n<div class=\"e2-text-picture\">\n<a href=\"http:\/\/weather-records.datalaboratory.ru\/\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/blog.infotanka.ru\/pictures\/weather@2x.png\" width=\"700\" height=\"541\" alt=\"\" \/>\n<\/a><\/div>\n<p>Активность у своих и чужих ворот, слабые и сильные стороны команд на визуализации голевых моментов:<\/p>\n<div class=\"e2-text-picture\">\n<a href=\"http:\/\/big-chances.datalaboratory.ru\/#\/2014-2015\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/blog.infotanka.ru\/pictures\/football-big@2x.png\" width=\"700\" height=\"328\" alt=\"\" \/>\n<\/a><\/div>\n<p>Мини-графики хороши для больших наборов значений со стройной иерархией внутри. Осмелившись показать все значения, не усредняя и не обедняя выборку, вы получите информационно насыщенную, интересную для изучения визуализацию.<\/p>\n<p><b>Географические атомы: точка, объект, область, маршрут<\/b><\/p>\n<p>Визуальные атомы на карте могут быть точечными (точки, круги, объекты), площадными (области) и протяжёнными (линии).<\/p>\n<p>Точки на карте — это места, события и объекты с конкретными координатами. В зависимости от масштаба карты точка может быть квартирой в доме на конкретной улице или целым городом.<\/p>\n<p>Например, квартиры, сдающиеся через «Эйрбнб»:<\/p>\n<div class=\"e2-text-picture\">\n<a href=\"http:\/\/insideairbnb.com\/new-york-city\/index.html?neighbourhood=&filterEntireHomes=false&filterHighlyAvailable=false&filterRecentReviews=false&filterMultiListings=false\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/blog.infotanka.ru\/pictures\/airbnb@2x.png\" width=\"700\" height=\"352\" alt=\"\" \/>\n<\/a><\/div>\n<p>Уже знакомые нам землетрясения:<\/p>\n<div class=\"e2-text-picture\">\n<a href=\"https:\/\/www.flickr.com\/photos\/idvsolutions\/7439877658\/in\/photostream\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/blog.infotanka.ru\/pictures\/earthquakes@2x.png\" width=\"700\" height=\"422\" alt=\"\" \/>\n<\/a><\/div>\n<p>И полезные\/вредные приёмы пищи, слившиеся в облака:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog.infotanka.ru\/pictures\/eatery-1.png\" width=\"700\" height=\"298\" alt=\"\" \/>\n<\/div>\n<p>Сложенные стопками смертельные случаи заболевания холерой на знаменитой карте Джона Сноу:<\/p>\n<div class=\"e2-text-picture\">\n<a href=\"https:\/\/commons.wikimedia.org\/wiki\/File:Snow-cholera-map-1.jpg\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/blog.infotanka.ru\/pictures\/Snow-cholera-map-1@2x.png\" width=\"700\" height=\"656\" alt=\"\" \/>\n<\/a><\/div>\n<p>Дома Москвы, родом из разных эпох:<\/p>\n<div class=\"e2-text-picture\">\n<a href=\"http:\/\/msk.mercator.ru\/\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/blog.infotanka.ru\/pictures\/msk-merkator@2x.png\" width=\"700\" height=\"379\" alt=\"\" \/>\n<\/a><\/div>\n<p>Достопримечательности на карте-путеводителе:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog.infotanka.ru\/pictures\/chengdu@2x.png\" width=\"700\" height=\"660\" alt=\"\" \/>\n<\/div>\n<p>Точечные объекты на карте передают информацию своим положением, цветом, размером, а также засчёт подписей и картинок. Если данных для каждого объекта слишком много, располагать их на карте будет не лучшим решением. Карта диктует жёсткую топологию, и экранное пространство используется неэффективно. В таком случае я советую показать данные в виде мини-графиков, а карту использовать как дополнительный справочный элемент:<\/p>\n<div class=\"e2-text-picture\">\n<a href=\"http:\/\/weather-records.datalaboratory.ru\/\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/blog.infotanka.ru\/pictures\/records-map@2x.png\" width=\"700\" height=\"396\" alt=\"\" \/>\n<\/a><div class=\"e2-text-caption\">При наведении на мини-график город на карте подсвечивается красным.<\/div>\n<\/div>\n<p>Площадные объекты — это области на карте: городские кварталы, районы, округа, страны и другие государственные территориальные единицы, а также геологические и географические регионы. Площадные объекты передают сводную информацию по территории, чаще всего с помощью цветной заливки.<\/p>\n<p>Однотонная показывает один параметр, например, высоту застройки или стоимость земли на Манхэттене:<\/p>\n<div class=\"e2-text-picture\">\n<a href=\"http:\/\/www.coolinfographics.com\/blog\/2013\/2\/26\/manhattan-building-heights-as-land-value.html\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/blog.infotanka.ru\/pictures\/manhattan-value@2x.png\" width=\"400\" height=\"797\" alt=\"\" \/>\n<\/a><\/div>\n<p>Двухцветная — близость к полюсам шкалы:<\/p>\n<div class=\"e2-text-picture\">\n<a href=\"http:\/\/www.theguardian.com\/politics\/ng-interactive\/2016\/jun\/23\/eu-referendum-live-results-and-analysis?CMP=twt_b-gdndata\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/blog.infotanka.ru\/pictures\/brexit@2x.png\" width=\"700\" height=\"495\" alt=\"\" \/>\n<\/a><\/div>\n<p>Заливка полупрозрачными слоями делает акцент на пересечении накладывающихся друг на друга областей:<\/p>\n<div class=\"e2-text-picture\">\n<a href=\"http:\/\/bostonography.com\/2013\/neighborhoods-as-seen-by-the-people\/\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/blog.infotanka.ru\/pictures\/boston-neighborhoods@2x.png\" width=\"700\" height=\"800\" alt=\"\" \/>\n<\/a><div class=\"e2-text-caption\">Границы районов Бостона, как их видят жители<\/div>\n<\/div>\n<p>На карте затопления Венеции площадная заливка улиц и площадей сочетается с точечной окраской пострадавших от наводнений зданий:<\/p>\n<div class=\"e2-text-picture\">\n<a href=\"http:\/\/ngm.nationalgeographic.com\/2009\/08\/venice\/newman-text\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/blog.infotanka.ru\/pictures\/venice@2x.png\" width=\"700\" height=\"359\" alt=\"\" \/>\n<\/a><\/div>\n<p>Карта может быть настоящим произведением искусства, с большим количеством цветов и оттенков:<\/p>\n<div class=\"e2-text-picture\">\n<a href=\"http:\/\/maptitude1.tumblr.com\/post\/67664142366\/this-beautiful-map-made-in-1960-shows-the-geology\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/blog.infotanka.ru\/pictures\/geology@2x.png\" width=\"700\" height=\"505\" alt=\"\" \/>\n<\/a><div class=\"e2-text-caption\">Геологическая карта Пенсильвании<\/div>\n<\/div>\n<p>На «карте здоровья» части света покрыты паттерном человеческих тканей и клеток, поражаемых самой распространённой там болезнью:<\/p>\n<div class=\"e2-text-picture\">\n<a href=\"http:\/\/odranoel.eu\/the-map-of-health\/the-map-of-health-2\/\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/blog.infotanka.ru\/pictures\/Odra-noel.png\" width=\"700\" height=\"440\" alt=\"\" \/>\n<\/a><div class=\"e2-text-caption\">Северная Америка покрыта жировой тканью, Европа — мозговыми нейронами (слабоумие), Африка — кровяными тельцами (малярия и СПИД), на страдающей от бесплодия Гренландии изображены сперматозоиды<\/div>\n<\/div>\n<p>Вместо заливки иногда используются изолинии, как на этой карте запахов Эдинбурга:<\/p>\n<div class=\"e2-text-picture\">\n<a href=\"http:\/\/sensorymaps.com\/portfolio\/smell-map-edinburgh\/\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/blog.infotanka.ru\/pictures\/edinburgh-smell@2x.png\" width=\"700\" height=\"481\" alt=\"\" \/>\n<\/a><\/div>\n<p>Протяжённые объекты на карте — это путевые сети, маршруты, границы, а также реки и горные цепи. Связанные с ними данные визуализируются линиями и змейками разной толщины, цвета и яркости.<\/p>\n<p>Классическая карта Шарля Минара показывает объёмы экспорта угля Англией:<\/p>\n<div class=\"e2-text-picture\">\n<a href=\"https:\/\/cartographia.wordpress.com\/2008\/06\/09\/minards-map-of-british-coal-exports\/\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/blog.infotanka.ru\/pictures\/english-coal-exports@2x.png\" width=\"700\" height=\"426\" alt=\"\" \/>\n<\/a><div class=\"e2-text-caption\">Поток делится на крупные рукава, потом на более мелкие — в соответствии с морскими путями доставки угля<\/div>\n<\/div>\n<p>Суточное движение швейцарских поездов:<\/p>\n<div class=\"e2-text-picture\">\n<a href=\"http:\/\/flows.transport.opendata.ch\/\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/blog.infotanka.ru\/pictures\/swiss-train@2x.png\" width=\"700\" height=\"456\" alt=\"\" \/>\n<\/a><div class=\"e2-text-caption\">Цветом линии показана скорость поездов, толщиной — их загруженность<\/div>\n<\/div>\n<p>Ветра в Токио в режиме реального времени:<\/p>\n<div class=\"e2-text-picture\">\n<a href=\"https:\/\/air.nullschool.net\/\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/blog.infotanka.ru\/pictures\/wind-tokyo@2x.png\" width=\"700\" height=\"355\" alt=\"\" \/>\n<\/a><div class=\"e2-text-caption\">Чем длиннее линии, тем сильнее дует<\/div>\n<\/div>\n<p>Воздушные пути на разной высоте над городами мира:<\/p>\n<div class=\"e2-text-picture\">\n<a href=\"https:\/\/contrailz.com\/11_8_by6m_828g\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/blog.infotanka.ru\/pictures\/contraliz@2x.png\" width=\"700\" height=\"425\" alt=\"\" \/>\n<\/a><div class=\"e2-text-caption\">Высота полёта закодирована цветом<\/div>\n<\/div>\n<p>Поток беженцев из разных стран:<\/p>\n<div class=\"e2-text-picture\">\n<a href=\"http:\/\/www.therefugeeproject.org\/#\/2012\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/blog.infotanka.ru\/pictures\/refugee-project@2x.png\" width=\"700\" height=\"362\" alt=\"\" \/>\n<\/a><div class=\"e2-text-caption\">Чем больше поток, тем ярче луч<\/div>\n<\/div>\n<p>Вся пресная вода земного шара, как на ладони:<\/p>\n<div class=\"e2-text-picture\">\n<a href=\"http:\/\/nationalgeographic.org\/hires\/world-rivers\/\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/blog.infotanka.ru\/pictures\/world_of_rivers@2x.png\" width=\"700\" height=\"451\" alt=\"\" \/>\n<\/a><div class=\"e2-text-caption\">Сразу видно, где густо, а где пусто<\/div>\n<\/div>\n<p>При визуалиции геоданных важно учитывать характер данных и выбирать соответсвующие визуальные атомы. Привязывать точечные данные к областям, а сводные параметры по целым регионам или протяжённым объектам отображать точками, на мой взгляд, грубая ошибка.<\/p>\n<p style=\"font-size:13px; margin-top:20px;\">Следующая теоретическая заметка выйдет 8 августа.<\/p>\n",
            "date_published": "2016-07-04T12:24:34+03:00",
            "date_modified": "2020-03-03T19:46:42+03:00",
            "image": "https:\/\/blog.infotanka.ru\/pictures\/regular.png",
            "_date_published_rfc2822": "Mon, 04 Jul 2016 12:24:34 +0300",
            "_rss_guid_is_permalink": "true",
            "_rss_guid": "https:\/\/blog.infotanka.ru\/all\/datalab-algorithm-visual-atoms-3\/",
            "_e2_data": {
                "is_favourite": true,
                "links_required": [],
                "og_images": [
                    "https:\/\/blog.infotanka.ru\/pictures\/regular.png",
                    "https:\/\/blog.infotanka.ru\/pictures\/employment@2x.png",
                    "https:\/\/blog.infotanka.ru\/pictures\/words@2x.png",
                    "https:\/\/blog.infotanka.ru\/pictures\/weather@2x.png",
                    "https:\/\/blog.infotanka.ru\/pictures\/football-big@2x.png",
                    "https:\/\/blog.infotanka.ru\/pictures\/airbnb@2x.png",
                    "https:\/\/blog.infotanka.ru\/pictures\/earthquakes@2x.png",
                    "https:\/\/blog.infotanka.ru\/pictures\/eatery-1.png",
                    "https:\/\/blog.infotanka.ru\/pictures\/Snow-cholera-map-1@2x.png",
                    "https:\/\/blog.infotanka.ru\/pictures\/msk-merkator@2x.png",
                    "https:\/\/blog.infotanka.ru\/pictures\/chengdu@2x.png",
                    "https:\/\/blog.infotanka.ru\/pictures\/records-map@2x.png",
                    "https:\/\/blog.infotanka.ru\/pictures\/manhattan-value@2x.png",
                    "https:\/\/blog.infotanka.ru\/pictures\/brexit@2x.png",
                    "https:\/\/blog.infotanka.ru\/pictures\/boston-neighborhoods@2x.png",
                    "https:\/\/blog.infotanka.ru\/pictures\/venice@2x.png",
                    "https:\/\/blog.infotanka.ru\/pictures\/geology@2x.png",
                    "https:\/\/blog.infotanka.ru\/pictures\/Odra-noel.png",
                    "https:\/\/blog.infotanka.ru\/pictures\/edinburgh-smell@2x.png",
                    "https:\/\/blog.infotanka.ru\/pictures\/english-coal-exports@2x.png",
                    "https:\/\/blog.infotanka.ru\/pictures\/swiss-train@2x.png",
                    "https:\/\/blog.infotanka.ru\/pictures\/wind-tokyo@2x.png",
                    "https:\/\/blog.infotanka.ru\/pictures\/contraliz@2x.png",
                    "https:\/\/blog.infotanka.ru\/pictures\/refugee-project@2x.png",
                    "https:\/\/blog.infotanka.ru\/pictures\/world_of_rivers@2x.png"
                ]
            }
        },
        {
            "id": "268",
            "url": "https:\/\/blog.infotanka.ru\/all\/datalab-algorithm-visual-atoms-2\/",
            "title": "Алгоритм Δλ: визуальные атомы, часть 2",
            "content_html": "<p>Продолжение <a href=\"http:\/\/blog.infotanka.ru\/all\/datalab-algorithm-visual-atoms-1\/\">заметки о визуальных атомах<\/a>. Сегодня поговорим о прямоугольниках, отрезках и линиях.<\/p>\n<p><b>Прямоугольник<\/b><br \/>\nПрямоугольники обладают четырьмя собственными свойствами (ширина, высота, их производная — площадь, цвет) и легко складываются друг с другом.<\/p>\n<p>Прямоугольники единичной ширны складываются в столбиковую диаграмму:<\/p>\n<div class=\"e2-text-picture\">\n<a href=\"http:\/\/budget.datalaboratory.ru\/\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/blog.infotanka.ru\/pictures\/budget-111@2x.png\" width=\"700\" height=\"542\" alt=\"\" \/>\n<\/a><\/div>\n<p>Элементарная частица в личных финансах — трата, визуальный атом — прямоугольник единичной ширины, его высота соответствует размеру траты, цвет — категории. На диаграмме траты суммируются, высота столбика показывает размер недельных трат.<\/p>\n<div class=\"e2-text-picture\">\n<a href=\"http:\/\/artgorbunov.ru\/bb\/soviet\/20130718\/\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/blog.infotanka.ru\/pictures\/eshop.png\" width=\"610\" height=\"425\" alt=\"\" \/>\n<\/a><\/div>\n<p>Элементарная частица продаж интернет-магазина — продажа, визуальный атом — прямоугольник единичной ширины, его высота соответствует сумме продажи. Высота столбика на диаграмме показывает суточную выручку. Цветом показаны будни и выходные дни.<\/p>\n<p>Прямоугольники подходят для отображения групп элементов (чаще неразличимых пикселей, редко — точек), в этом случае ширина и высота прямоугольника задействуются для визуализации параметров группы. Важно выбирать параметры для ширины и высоты так, чтобы их произведение — площадь, также имело физический смысл.<\/p>\n<p>Например, если количество детей в возрастной группе задаёт высоту прямоугольника, а доступность садиков для этой группы — его ширину, то площадь прямоугольника соответсвует количеству детей этого возраста, попавшему в сад.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog.infotanka.ru\/pictures\/dnevnik@2x.png\" width=\"300\" height=\"500\" alt=\"\" \/>\n<\/div>\n<p>Видим, что проблема для группы 1,5-2 года стоит острее, чем для группы 2-2,5 года — хоть доступность садов в ней и выше, но нуждающихся в садике детей намного больше.<\/p>\n<p>По такому же принципу прямоугольники образуют квадратные и тримэп-диаграммы:<\/p>\n<div class=\"e2-text-picture\">\n<a href=\"http:\/\/infotanka.ru\/squares.html\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/blog.infotanka.ru\/pictures\/squares-description.png\" width=\"630\" height=\"400\" alt=\"\" \/>\n<\/a><\/div>\n<div class=\"e2-text-picture\">\n<a href=\"http:\/\/www.zeit.de\/feature\/pendeln-stau-arbeit-verkehr-wohnort-arbeitsweg-ballungsraeume\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/blog.infotanka.ru\/pictures\/transport-treemap@2x.png\" width=\"700\" height=\"403\" alt=\"\" \/>\n<\/a><\/div>\n<p><b>Отрезок<\/b><br \/>\nОтрезок визуализирует частицу данных, состоящую из двух связанных элементов.<\/p>\n<p>Это может быть связь двух объектов, например, брачный союз людей разных профессий:<\/p>\n<div class=\"e2-text-picture\">\n<a href=\"http:\/\/www.bloomberg.com\/graphics\/2016-who-marries-whom\/\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/blog.infotanka.ru\/pictures\/who-marries-who@2x.png\" width=\"900\" height=\"387\" alt=\"\" \/>\n<\/a><\/div>\n<p>Связь «до и после» двух значений одного и того же параметра, например, количество высокооплачиваемых должностей в различных индустриях:<\/p>\n<div class=\"e2-text-picture\">\n<a href=\"http:\/\/www.nytimes.com\/interactive\/2015\/02\/23\/business\/economy\/the-changing-nature-of-middle-class-jobs.html\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/blog.infotanka.ru\/pictures\/change-job@2x.png\" width=\"700\" height=\"382\" alt=\"\" \/>\n<\/a><div class=\"e2-text-caption\">.<br \/>\nСвязанные попарно значения, например, результаты ответов на вопросы теста, личный и средний по соотечественникам:<\/div>\n<\/div>\n<div class=\"e2-text-picture\">\n<a href=\"http:\/\/www.theguardian.com\/world\/ng-interactive\/2015\/dec\/02\/how-well-do-you-really-know-your-country-take-our-quiz\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/blog.infotanka.ru\/pictures\/guardian-quiz@2x.png\" width=\"700\" height=\"612\" alt=\"\" \/>\n<\/a><\/div>\n<p>Или пара связанных пространственных координат, например, начальное и конечное положение мяча при ударе по воротам:<\/p>\n<div class=\"e2-text-picture\">\n<a href=\"http:\/\/big-chances.datalaboratory.ru\/#\/2014-2015\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/blog.infotanka.ru\/pictures\/footbal-datalab@2x.png\" width=\"700\" height=\"745\" alt=\"\" \/>\n<\/a><\/div>\n<p><b>Линия<\/b><br \/>\nЛиния показывает путь или историю объекта во времени. Для линии важны не только точка начала, точка конца и связь (как в отрезке), но и форма пути между ними. Линии сливаются в потоки и делятся на русла.<\/p>\n<div class=\"e2-text-picture\">\n<a href=\"http:\/\/huntflow.datalaboratory.ru\/main\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/blog.infotanka.ru\/pictures\/huntflow@2x.png\" width=\"700\" height=\"332\" alt=\"\" \/>\n<\/a><div class=\"e2-text-caption\">Частица данных — кандидат, проходящий этапы воронки собеседований<\/div>\n<\/div>\n<div class=\"e2-text-picture\">\n<a href=\"http:\/\/www.nytimes.com\/interactive\/2012\/10\/15\/us\/politics\/swing-history.html\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/blog.infotanka.ru\/pictures\/states-history@2x.png\" width=\"700\" height=\"510\" alt=\"\" \/>\n<\/a><div class=\"e2-text-caption\">Частица данных — штат, изменяющий свои настроения во времени<\/div>\n<\/div>\n<div class=\"e2-text-picture\">\n<a href=\"https:\/\/mbtaviz.github.io\/\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/blog.infotanka.ru\/pictures\/massachusetts@2x.png\" width=\"700\" height=\"453\" alt=\"\" \/>\n<\/a><div class=\"e2-text-caption\">Частица данных — поезд метро, движущийся между станциями<\/div>\n<\/div>\n<div class=\"e2-text-picture\">\n<a href=\"http:\/\/13pt.com\/projects\/nyt110425\/\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/blog.infotanka.ru\/pictures\/guantanamo.png\" width=\"550\" height=\"494\" alt=\"\" \/>\n<\/a><div class=\"e2-text-caption\">Частица данных — заключённый, проводящий срок в тюрьме Гуантанамо<\/div>\n<\/div>\n<p>Частным случаем линии является географический маршрут.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog.infotanka.ru\/pictures\/minardmap@2x.png\" width=\"700\" height=\"324\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Частицы данных — французы армии Наполеона, наступающие на Москву и отступающие обратно<\/div>\n<\/div>\n<p>О мини-графике и географических атомах (точке, области, объекте и маршруте) я расскажу в третьей, заключительной заметке.<\/p>\n<p style=\"font-size:13px; margin-top:20px;\">Следующая теоретическая заметка выйдет 4 июля.<\/p>\n",
            "date_published": "2016-06-20T11:54:48+03:00",
            "date_modified": "2020-03-03T19:46:51+03:00",
            "image": "https:\/\/blog.infotanka.ru\/pictures\/budget-111@2x.png",
            "_date_published_rfc2822": "Mon, 20 Jun 2016 11:54:48 +0300",
            "_rss_guid_is_permalink": "true",
            "_rss_guid": "https:\/\/blog.infotanka.ru\/all\/datalab-algorithm-visual-atoms-2\/",
            "_e2_data": {
                "is_favourite": true,
                "links_required": [],
                "og_images": [
                    "https:\/\/blog.infotanka.ru\/pictures\/budget-111@2x.png",
                    "https:\/\/blog.infotanka.ru\/pictures\/eshop.png",
                    "https:\/\/blog.infotanka.ru\/pictures\/dnevnik@2x.png",
                    "https:\/\/blog.infotanka.ru\/pictures\/squares-description.png",
                    "https:\/\/blog.infotanka.ru\/pictures\/transport-treemap@2x.png",
                    "https:\/\/blog.infotanka.ru\/pictures\/who-marries-who@2x.png",
                    "https:\/\/blog.infotanka.ru\/pictures\/change-job@2x.png",
                    "https:\/\/blog.infotanka.ru\/pictures\/guardian-quiz@2x.png",
                    "https:\/\/blog.infotanka.ru\/pictures\/footbal-datalab@2x.png",
                    "https:\/\/blog.infotanka.ru\/pictures\/huntflow@2x.png",
                    "https:\/\/blog.infotanka.ru\/pictures\/states-history@2x.png",
                    "https:\/\/blog.infotanka.ru\/pictures\/massachusetts@2x.png",
                    "https:\/\/blog.infotanka.ru\/pictures\/guantanamo.png",
                    "https:\/\/blog.infotanka.ru\/pictures\/minardmap@2x.png"
                ]
            }
        },
        {
            "id": "267",
            "url": "https:\/\/blog.infotanka.ru\/all\/datalab-algorithm-visual-atoms-1\/",
            "title": "Алгоритм Δλ: визуальные атомы, часть 1",
            "content_html": "<p>Сегодня я расскажу о наглядном визуальном кодировании частиц, из которого естественным образом вырастает содержательная и наглядная визуализация.<\/p>\n<p>После ответа на вопрос о том, что является элементарной частицей данных, задумайтесь, как её лучше всего показать. Элементарная частица данных — это визуальный атом, и её воплощение должно быть атомарным. Основные визуальные атомы: пиксель, точка, круг, черта, квадрат, ячейка, объект, прямоугольник, отрезок, линия и мини-график. Выбор атома следует из свойств частицы данных и её поведения в реальности данных.<\/p>\n<p><b>Пиксель<\/b><br \/>\nПиксель — минимальная экранная единица, пиксели обозначают «безликие», неотличимые друг от друга частицы, которые сливаются в единое целое, например, бюджет страны, стоимость товаров и услуг, дефицит личного бюджета, бюджет фильма или результаты опроса. Пиксели суммируются в столбцы, прямоугольные области и потоки, площадь которых пропорциональна сумме частиц данных.<\/p>\n<div class=\"e2-text-picture\">\n<a href=\"https:\/\/www.whitehouse.gov\/share\/medicaid-map\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/blog.infotanka.ru\/pictures\/us-budget@2x.png\" width=\"700\" height=\"525\" alt=\"\" \/>\n<\/a><\/div>\n<div class=\"e2-text-picture\">\n<a href=\"http:\/\/xkcd.com\/980\/huge\/#x=-6432&y=-4480&z=2\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/blog.infotanka.ru\/pictures\/money@2x.png\" width=\"700\" height=\"467\" alt=\"\" \/>\n<\/a><\/div>\n<div class=\"e2-text-picture\">\n<a href=\"http:\/\/www.nytimes.com\/interactive\/2014\/02\/09\/opinion\/minimum-wage.html\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/blog.infotanka.ru\/pictures\/min-wage@2x.png\" width=\"700\" height=\"421\" alt=\"\" \/>\n<\/a><\/div>\n<div class=\"e2-text-picture\">\n<a href=\"http:\/\/www.nytimes.com\/interactive\/2008\/02\/23\/movies\/20080223_REVENUE_GRAPHIC.html?_r=0\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/blog.infotanka.ru\/pictures\/ebb@2x.png\" width=\"700\" height=\"421\" alt=\"\" \/>\n<\/a><\/div>\n<div class=\"e2-text-picture\">\n<a href=\"http:\/\/infograms.ru\/\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/blog.infotanka.ru\/pictures\/events@2x.png\" width=\"701\" height=\"547\" alt=\"\" \/>\n<\/a><\/div>\n<p>Эффективность предприятия в прошлой заметке также складывается из пикселей — тонн продукции:<\/p>\n<div class=\"e2-text-picture\">\n<a href=\"http:\/\/oee.datalaboratory.ru\/\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/blog.infotanka.ru\/pictures\/OEE-8@2x.png\" width=\"700\" height=\"512\" alt=\"\" \/>\n<\/a><\/div>\n<p><b>Точка<\/b><br \/>\nВ отличие от пикселя, точка кодирует отдельные, явно различимые объекты: спортсменов, рядовых американцев, сотрудников, температурные рекорды, землетрясения, медалистов, приёмы пищи и т. п. Цвет точек отражает качественную или количественную характеристику.<\/p>\n<p>В простом случае точки занимают свои позиции и отображаются на графике по отдельности:<\/p>\n<div class=\"e2-text-picture\">\n<a href=\"http:\/\/www.nytimes.com\/interactive\/2012\/08\/05\/sports\/olympics\/the-100-meter-dash-one-race-every-medalist-ever.html?hp\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/blog.infotanka.ru\/pictures\/medals-qa@2x.png\" width=\"700\" height=\"405\" alt=\"\" \/>\n<\/a><div class=\"e2-text-caption\">Медалисты всех олимпиад в беге на 100 м<\/div>\n<\/div>\n<div class=\"e2-text-picture\">\n<a href=\"http:\/\/www.nytimes.com\/interactive\/2013\/08\/02\/sports\/baseball\/bang-for-your-buck.html\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/blog.infotanka.ru\/pictures\/yankees@2x.png\" width=\"700\" height=\"492\" alt=\"\" \/>\n<\/a><div class=\"e2-text-caption\">Годовая зарплата и результативность ведущих американских бейсболистов (по командам)<\/div>\n<\/div>\n<div class=\"e2-text-picture\">\n<a href=\"http:\/\/flowingdata.com\/2015\/12\/15\/a-day-in-the-life-of-americans\/\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/blog.infotanka.ru\/pictures\/people@2x.png\" width=\"700\" height=\"480\" alt=\"\" \/>\n<\/a><div class=\"e2-text-caption\">Активность американцев в разное время суток<\/div>\n<\/div>\n<p>Иногда точки соединяет кривая:<\/p>\n<div class=\"e2-text-picture\">\n<a href=\"http:\/\/www.nytimes.com\/interactive\/2015\/11\/17\/health\/wiredwell-food-diary-super-tracker.html?_r=0\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/blog.infotanka.ru\/pictures\/loose-it@2x.png\" width=\"700\" height=\"455\" alt=\"\" \/>\n<\/a><\/div>\n<p><a href=\"http:\/\/www.bloomberg.com\/news\/articles\/2013-02-07\/the-rise-of-long-term-joblessness#r=nav-img\"><img src=\"\/pictures\/bloomberg.png\" width=700><\/a><\/p>\n<p>Если точки необходимо просуммировать, способ визуального суммирования зависит от характера данных.<\/p>\n<p>Для складывания элементов в стопки в одном измерении подходят чёрточки:<\/p>\n<div class=\"e2-text-picture\">\n<a href=\"http:\/\/charts.animateddata.co.uk\/f1\/\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/blog.infotanka.ru\/pictures\/f1-qa@2x.png\" width=\"700\" height=\"382\" alt=\"\" \/>\n<\/a><\/div>\n<p>Для составления столбиковых диаграмм используют квадратики:<\/p>\n<div class=\"e2-text-picture\">\n<a href=\"http:\/\/moscowmarathon.org\/en\/moscowmarathon\/2015\/results\/visualization\/\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/blog.infotanka.ru\/pictures\/data-mass-2@2x.png\" width=\"700\" height=\"176\" alt=\"\" \/>\n<\/a><\/div>\n<div class=\"e2-text-picture\">\n<a href=\"http:\/\/www.artlebedev.ru\/studio\/stat\/demography\/\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/blog.infotanka.ru\/pictures\/artlebedev@2x.png\" width=\"700\" height=\"342\" alt=\"\" \/>\n<\/a><\/div>\n<p>Иногда точки просто накладывают друг на друга с прозрачностью, в таком случае яркие точки показывают наиболее распространённые значения:<\/p>\n<div class=\"e2-text-picture\">\n<a href=\"http:\/\/weather-records.datalaboratory.ru\/\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/blog.infotanka.ru\/pictures\/records@2x.png\" width=\"700\" height=\"175\" alt=\"\" \/>\n<\/a><div class=\"e2-text-caption\">Температурные рекорды в РФ<\/div>\n<\/div>\n<div class=\"e2-text-picture\">\n<a href=\"https:\/\/www.flickr.com\/photos\/idvsolutions\/7439877658\/in\/photostream\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/blog.infotanka.ru\/pictures\/earthquakes@2x.png\" width=\"700\" height=\"422\" alt=\"\" \/>\n<\/a><div class=\"e2-text-caption\">Землетрясения с 1898 года<\/div>\n<\/div>\n<p>Большое количество точек сливают в круги, потоки и облака, в них точки перестают быть различимыми:<\/p>\n<div class=\"e2-text-picture\">\n<a href=\"http:\/\/www.nytimes.com\/interactive\/2008\/08\/04\/sports\/olympics\/20080804_MEDALCOUNT_MAP.html\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/blog.infotanka.ru\/pictures\/medals-country@2x.png\" width=\"700\" height=\"556\" alt=\"\" \/>\n<\/a><\/div>\n<div class=\"e2-text-picture\">\n<a href=\"http:\/\/moscowmarathon.org\/en\/moscowmarathon\/2015\/results\/visualization\/\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/blog.infotanka.ru\/pictures\/mm@2x.png\" width=\"700\" height=\"612\" alt=\"\" \/>\n<\/a><\/div>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog.infotanka.ru\/pictures\/eatery-1.png\" width=\"700\" height=\"298\" alt=\"\" \/>\n<\/div>\n<p>Визуальное сложение мы обсудим подробнее в следующих заметках.<\/p>\n<p><b>Круг<\/b><br \/>\nКруг помимо цвета и расположения имеет радиус, который кодирует дополнительное измерение данных. Классический пример элементарных частиц-кругов — страны <a href=\"http:\/\/www.gapminder.org\/tools\/bubbles#_state_time_value=1992\">на Гэпмайндере<\/a>, где изменяющийся со временем радиус круга показывает рост популяции:<\/p>\n<div class=\"e2-text-picture\">\n<a href=\"http:\/\/www.gapminder.org\/tools\/bubbles#_state_time_value=1992\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/blog.infotanka.ru\/pictures\/gapminder@2x.png\" width=\"700\" height=\"426\" alt=\"\" \/>\n<\/a><\/div>\n<p>Здесь частицей данных является страна, в отличие от рассмотренного выше примера с олимпийскими медалями, где элементарной частицей является медаль, и уже медали суммируются в круги-страны.<\/p>\n<p>Другие примеры:<\/p>\n<div class=\"e2-text-picture\">\n<a href=\"http:\/\/www.nytimes.com\/interactive\/2013\/05\/25\/sunday-review\/corporate-taxes.html\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/blog.infotanka.ru\/pictures\/tax-rates@2x.png\" width=\"700\" height=\"434\" alt=\"\" \/>\n<\/a><div class=\"e2-text-caption\">Круги — крупные американские компании, радиус показывает их «вес» (рыночную стоимость), цвет — размер налоговой ставки<\/div>\n<\/div>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog.infotanka.ru\/pictures\/picasso.png\" width=\"700\" height=\"980\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Круги — картины Пабло Пикассо, радиус показывает стоимость проданных на аукционах картин, цвет — тип (масло\/акварель-гуашь)<\/div>\n<\/div>\n<p><b>Ячейка<\/b><br \/>\nЯчейка — это элемент регулярной сетки, как правило, квадратной формы. Линейные размеры ячейки не имеют значения. Частицы данных распределяются по сетке, а их свойства суммируются или усредняются и отображаются цветом ячейки.<\/p>\n<p>Суммирование может быть примитивным (чем больше, тем ярче):<\/p>\n<div class=\"e2-text-picture\">\n<a href=\"http:\/\/www.nytimes.com\/interactive\/2013\/05\/27\/science\/drunk-driving-2011.html?_r=1&\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/blog.infotanka.ru\/pictures\/alco@2x.png\" width=\"700\" height=\"356\" alt=\"\" \/>\n<\/a><\/div>\n<div class=\"e2-text-picture\">\n<a href=\"http:\/\/graphics.wsj.com\/infectious-diseases-and-vaccines\/\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/blog.infotanka.ru\/pictures\/vaccines-2@2x.png\" width=\"700\" height=\"589\" alt=\"\" \/>\n<\/a><\/div>\n<p>Или оценочным, например, с использованием светофорного градиента «хорошо-плохо»:<\/p>\n<div class=\"e2-text-picture\">\n<a href=\"http:\/\/pdd.datalaboratory.ru\/\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/blog.infotanka.ru\/pictures\/pdd@2x.png\" width=\"700\" height=\"330\" alt=\"\" \/>\n<\/a><\/div>\n<div class=\"e2-text-picture\">\n<a href=\"http:\/\/www.nytimes.com\/interactive\/2012\/06\/11\/sports\/basketball\/nba-shot-analysis.html\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/blog.infotanka.ru\/pictures\/basket@2x.png\" width=\"700\" height=\"321\" alt=\"\" \/>\n<\/a><\/div>\n<p>В этом примере на одной сетке просуммированы сон и ходьба городских жителей:<\/p>\n<div class=\"e2-text-picture\">\n<a href=\"https:\/\/jawbone.com\/blog\/jawbone-up-data-by-city\/#moscow\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/blog.infotanka.ru\/pictures\/jawbone-theory@2x.png\" width=\"700\" height=\"510\" alt=\"\" \/>\n<\/a><\/div>\n<p><b>Объект<\/b><br \/>\nРоль точки на графике может играть реальный объект. В этом случае к свойствам, показанным на графике, добавляется наглядная информация с изображения объекта.<\/p>\n<p>Классический пример Эдварда Тафти — график соотношения массы мозга и массы тела с животными вместо точек. Легенда не требуется:<\/p>\n<div class=\"e2-text-picture\">\n<a href=\"https:\/\/www.edwardtufte.com\/tufte\/books_be\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/blog.infotanka.ru\/pictures\/tufte-animals.png\" width=\"741\" height=\"481\" alt=\"\" \/>\n<\/a><\/div>\n<p>Точки-воины и мирные жители в визуализации потерь Второй мировой войны:<\/p>\n<div class=\"e2-text-picture\">\n<a href=\"http:\/\/www.fallen.io\/ww2\/\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/blog.infotanka.ru\/pictures\/fallen@2x.png\" width=\"700\" height=\"500\" alt=\"\" \/>\n<\/a><\/div>\n<p>Лабораторная визуализация характеристик танков из игры WoT, размеры танков на графике соответствуют реальным размерам:<\/p>\n<div class=\"e2-text-picture\">\n<a href=\"http:\/\/tanks.datalaboratory.ru\/\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/blog.infotanka.ru\/pictures\/WoT-graph@2x.png\" width=\"700\" height=\"521\" alt=\"\" \/>\n<\/a><\/div>\n<p>Диаграммы и графики о флагах мира, собранные из флагов:<\/p>\n<div class=\"e2-text-picture\">\n<a href=\"http:\/\/flagstories.co\/\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/blog.infotanka.ru\/pictures\/flags.png\" width=\"700\" height=\"664\" alt=\"\" \/>\n<\/a><\/div>\n<p>График изменения шерсти амурского тигра из шерстинок показывает не только длину, но и густоту шерсти, и появление подшёрстка:<\/p>\n<div class=\"e2-text-picture\">\n<a href=\"http:\/\/artgorbunov.ru\/portfolio\/tiger\/\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/blog.infotanka.ru\/pictures\/tiger-fur@2x.png\" width=\"700\" height=\"40\" alt=\"\" \/>\n<\/a><\/div>\n<p>В следующих заметках я расскажу об оставшихся визуальных атомах: прямоугольнике, отрезке, линии и мини-графике.<\/p>\n<p style=\"font-size:13px; margin-top:20px;\">Следующая теоретическая заметка выйдет 20 июня.<\/p>\n",
            "date_published": "2016-05-31T18:13:34+03:00",
            "date_modified": "2020-03-03T19:47:00+03:00",
            "image": "https:\/\/blog.infotanka.ru\/pictures\/us-budget@2x.png",
            "_date_published_rfc2822": "Tue, 31 May 2016 18:13:34 +0300",
            "_rss_guid_is_permalink": "true",
            "_rss_guid": "https:\/\/blog.infotanka.ru\/all\/datalab-algorithm-visual-atoms-1\/",
            "_e2_data": {
                "is_favourite": true,
                "links_required": [],
                "og_images": [
                    "https:\/\/blog.infotanka.ru\/pictures\/us-budget@2x.png",
                    "https:\/\/blog.infotanka.ru\/pictures\/money@2x.png",
                    "https:\/\/blog.infotanka.ru\/pictures\/min-wage@2x.png",
                    "https:\/\/blog.infotanka.ru\/pictures\/ebb@2x.png",
                    "https:\/\/blog.infotanka.ru\/pictures\/events@2x.png",
                    "https:\/\/blog.infotanka.ru\/pictures\/OEE-8@2x.png",
                    "https:\/\/blog.infotanka.ru\/pictures\/medals-qa@2x.png",
                    "https:\/\/blog.infotanka.ru\/pictures\/yankees@2x.png",
                    "https:\/\/blog.infotanka.ru\/pictures\/people@2x.png",
                    "https:\/\/blog.infotanka.ru\/pictures\/loose-it@2x.png",
                    "https:\/\/blog.infotanka.ru\/pictures\/f1-qa@2x.png",
                    "https:\/\/blog.infotanka.ru\/pictures\/data-mass-2@2x.png",
                    "https:\/\/blog.infotanka.ru\/pictures\/artlebedev@2x.png",
                    "https:\/\/blog.infotanka.ru\/pictures\/records@2x.png",
                    "https:\/\/blog.infotanka.ru\/pictures\/earthquakes@2x.png",
                    "https:\/\/blog.infotanka.ru\/pictures\/medals-country@2x.png",
                    "https:\/\/blog.infotanka.ru\/pictures\/mm@2x.png",
                    "https:\/\/blog.infotanka.ru\/pictures\/eatery-1.png",
                    "https:\/\/blog.infotanka.ru\/pictures\/gapminder@2x.png",
                    "https:\/\/blog.infotanka.ru\/pictures\/tax-rates@2x.png",
                    "https:\/\/blog.infotanka.ru\/pictures\/picasso.png",
                    "https:\/\/blog.infotanka.ru\/pictures\/alco@2x.png",
                    "https:\/\/blog.infotanka.ru\/pictures\/vaccines-2@2x.png",
                    "https:\/\/blog.infotanka.ru\/pictures\/pdd@2x.png",
                    "https:\/\/blog.infotanka.ru\/pictures\/basket@2x.png",
                    "https:\/\/blog.infotanka.ru\/pictures\/jawbone-theory@2x.png",
                    "https:\/\/blog.infotanka.ru\/pictures\/tufte-animals.png",
                    "https:\/\/blog.infotanka.ru\/pictures\/fallen@2x.png",
                    "https:\/\/blog.infotanka.ru\/pictures\/WoT-graph@2x.png",
                    "https:\/\/blog.infotanka.ru\/pictures\/flags.png",
                    "https:\/\/blog.infotanka.ru\/pictures\/tiger-fur@2x.png"
                ]
            }
        }
    ],
    "_e2_version": 3239,
    "_e2_ua_string": "E2 (v3239; Aegea)"
}