{ "version": "https:\/\/jsonfeed.org\/version\/1", "title": "Таня Мисютина, заметки с тегом: d3.js", "home_page_url": "https:\/\/blog.infotanka.ru\/tags\/d3-js\/", "feed_url": "https:\/\/blog.infotanka.ru\/tags\/d3-js\/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": "220", "url": "https:\/\/blog.infotanka.ru\/all\/vopros-otvet-ob-anomaliyah\/", "title": "Вопрос-ответ: о визуализации аномалий", "content_html": "

Спрашивают сотрудники Института проблем безопасности и анализа информации<\/a>:<\/p>\n

Мы анализируем финансовые потоки на территории РФ, в основном нас интересует отображение аномалий. Ключевые параметры операции: тип, получатель, место (регион) и время.<\/p>\n

Как наглядно представить такую информацию, чтобы видеть общую картину и с лёгкостью уточнять детали?<\/p>\n<\/div>

\n\"\"\n<\/div>\n

Таблица затягивает в водоворт количественной информации. Но как заметил автор вопроса, самое интересное в данных — это не конкретные значения, а аномалии. Попробуем для начала дать определение аномалии для прозвольного среза.<\/p>\n

<\/p>\n

В Тюменской области и Ненецком автономном округе суммарный оборот наличных колеблется в разумных рамках от среднего, в Челябинской и Костромской областях наблюдаются заметные скачки — аномалии. Возьмём за меру «аномальности» относительное отклонение значения из определённого среза от среднегодового по данному срезу, при этом аномалией будем считать только превышение среднего. В реальном анализе могут использоваться более сложные подходы и формулы, но для демонстрации нам достаточно и этой примитивной метрики.<\/p>\n

Закодируем каждое значение цветом по шкале аномальности:<\/p>\n

<\/p>\n

Усреднив аномальные отклонения в регионе за год, создадим карту аномалий:<\/p>\n

\n\"\"\n
Яркое пятно Челябинской области и относительно бледные Тюменская область и Ненецкий АО<\/div>\n<\/div>\n

Таким образом, мы получили статичную картину, которая даёт представление о ситуации в целом. Чтобы превратить её в гибкий и удобный инструмент аналитика, объединим график и карту, добавив интерактивность:<\/p>\n

<\/a><\/p>\n

Живой прототип: https:\/\/cashflow.datalaboratory.ru\/<\/a><\/b><\/span><\/p>\n

При наведении курсора на столбцы диаграммы, общая карта аномалий меняется на карту месяца. Переключая фильтры, можно сравнивать ситуации по внесению (!) и выдаче, юридическим и физическим (!) лицам, резидентам и нерезидентам (!!!). Управляя фильтрами, мы можем выяснить, что летние пики в Челябинской области обусловленны выдачей наличных физическим лицам, резидентам РФ.<\/p>\n

Первый шаг на пути решения сложной задачи — отбросить лишнее и показать самое важное, в нашем случае, аномалии. Лаконичная идея и грамотное использование интерактивности превращает привычные форматы в мощный аналитический инструмент.<\/p>\n

Спасибо Серёже Долинину и Диме Бибикову за помощь в работе над визуализацией.<\/p>\n

Присылайте вопросы о визуализации данных, организации времени, рабочем процессе, спорте и путешествиях на почту: mail@infotanka.ru<\/a>. Ответы публикуются по понедельникам.<\/p>\n", "date_published": "2014-07-28T23:47:12+03:00", "date_modified": "2020-03-03T22:07:01+03:00", "image": "https:\/\/blog.infotanka.ru\/pictures\/sip.png", "_date_published_rfc2822": "Mon, 28 Jul 2014 23:47:12 +0300", "_rss_guid_is_permalink": "true", "_rss_guid": "https:\/\/blog.infotanka.ru\/all\/vopros-otvet-ob-anomaliyah\/", "_e2_data": { "is_favourite": false, "links_required": [], "og_images": [ "https:\/\/blog.infotanka.ru\/pictures\/sip.png", "https:\/\/blog.infotanka.ru\/pictures\/map@2x.png" ] } }, { "id": "210", "url": "https:\/\/blog.infotanka.ru\/all\/vopros-otvet-ob-otkaze-ot-shkaly-vremeni-na-diagramme\/", "title": "Вопрос-ответ: об отказе от шкалы времени на диаграмме", "content_html": "

Спрашивает Дмитрий Ачкасов:<\/p>\n

Я попытался найти способ отобразить взаимоотношение трёх валют (рубль, евро, доллар США) за несколько лет. Как вы думаете, имеет ли смысл отказываться от шкалы времени в таком случае?<\/p>\n<\/div>

\n\"\"\n<\/div>\n

Способ отличный, понятный и наглядный. Чтобы изучать график было удобнее, добавьте интерактивные подсказки при наведении. Мне показалось, что использование повторяющихся цветов во временной легенде сбивает с толку, поэтому я использовала равномерный градиент:<\/p>\n

<\/a><\/p>\n

Живой график и код<\/a> на bl.ocks<\/p>\n

Прямо на графике можно подписать тренды и события, которые привели к резким изменениям цен, как в этом замечательном примере, иллюстрирующем рост безработицы в Штатах:<\/p>\n

<\/a><\/p>\n

Ещё один способ «свернуть» временное измерение — «червячки» Морица Штефанера. Размер кружков изменяется со временем и создаёт иллюзию движения:<\/p>\n

\n\"\"\n<\/div>\n

А какие способы показать временное измерение, не используя отдельной шкалы, знаете вы?<\/p>\n", "date_published": "2014-04-29T23:25:59+03:00", "date_modified": "2020-03-03T22:09:42+03:00", "image": "https:\/\/blog.infotanka.ru\/pictures\/pic-2.png", "_date_published_rfc2822": "Tue, 29 Apr 2014 23:25:59 +0300", "_rss_guid_is_permalink": "true", "_rss_guid": "https:\/\/blog.infotanka.ru\/all\/vopros-otvet-ob-otkaze-ot-shkaly-vremeni-na-diagramme\/", "_e2_data": { "is_favourite": false, "links_required": [], "og_images": [ "https:\/\/blog.infotanka.ru\/pictures\/pic-2.png", "https:\/\/blog.infotanka.ru\/pictures\/life-fertility-710.png" ] } }, { "id": "204", "url": "https:\/\/blog.infotanka.ru\/all\/vopros-otvet-kakie-servisy-ispolzovat-dlya-sozdaniya-simpatichny\/", "title": "Вопрос-ответ: Какие сервисы использовать для создания симпатичных графиков?", "content_html": "

Спрашивает Александр Семёнов:<\/p>\n

Какие сервисы посоветуешь использовать для создания симпатичных графиков, в первую очередь для презентаций и документов? (Excel поднадоел основательно.) Под «графиком» я подразумеваю графики, диаграммы и прочие варианты визуального отображения данных.<\/p>\n<\/div>

Я считаю лучшим инструментом для создания диаграмм и графиков библиотеку D3.js<\/a>. Её освоение занимает время, зато после можно создавать самые разнообразные визуализации.<\/p>\n

Во время зимовки на Бали мы сделали три проекта на D3. О расходограмме<\/a> я уже писала в блоге. Второй проект — визуализация результатов исследования кишечных бактерий, которую мы реализовали совместно с группой учёных из НИИ ФХМ<\/a>. Третий проект — диаграмма рынка облигаций для акул банковского дела.<\/p>\n

<\/p>\n

Создание работающей интерактивной визуализации в каждом случае занимало 2-3 дня. Первый результат служил плацдармом для дальнейших экспериментов, для испытания новых идей и гипотез. За пару недель мы получали полезный работоспособный инструмент, который продолжали совершенствовать. D3 — это не просто отличная визуализационная библиотека, это удобная среда для исследования данных и поиска оптимальных форматов отображения.<\/p>\n

Что касается презентаций, вспомните знаменитое выступление Ганса Рослинга с ожившими диаграммами «The best stats you’ve ever seen». Скучные статические слайды скоро канут в лету, будущее презентаций и годовых отчётов — за интерактивными графиками.<\/p>\n