Rose debug info
---------------

Позднее Ctrl + ↑

Диаграмма распределения выбросов в атмосферу

Чуть не забыл рассказать, как переделал диаграмму распределения выбросов в атмосферу.

Исходная статья:
http://science.sciencemag.org/content/360/6396/eaas9793

Исходная диаграмма, автор Глен Питерс (Glen Peters):

Обсуждение в Твитере:

Авторы хотели подчеркнуть, какие виды выбросов сложно устранить.
Но у исходной диаграммы несколько проблем.

— Слева данные показаны в процентах, а справа — в абсолютных величинах (гигатонны). Это сбивает с толку, например, когда сравниваешь слева красное “Load-following electricity” 12 (процентов) с красным справа 4.0 (тут уже гигатонны). Читатель не понимает, как одно красное соотносится с другим, что во что входит. А ничего никуда не входит: это одно и то же, выраженное разными способами:

— Сам факт разделения данных на две диаграммы путает читателя: возникает ощущение, что это два разных набора данных. На самом деле один.
— Способ отображения с помощью круговой диаграммы неэффективен. Плохо расходуется пространство. Круговая не стыкуется с линейной справа. Не помогает сопоставлять числа. Нельзя нормально подписать мелкие значения.
— Далее к деталям. Странно удлинили подсвеченные сектора. Это плохой способ подсвечивания: человек воспринимает соотношение площадей, а удлинение секторов увеличивает их площадь.
— Не хватает заголовка.
— Шумит вертикальная ось, пользы не приносит.

Как переделать:

  1. Устранить разнобой единиц измерения.
  2. Не делить один набор данных на две диаграммы без необходимости.
  3. Перейти от кругового представления к линейному.
  4. Найти более подходящий способ подсветить выбросы, которые сложно устранить.
  5. Показать и проценты, и абсолютные числа.
  6. Добавить заголовок.
  7. Аккуратно сверстать. Не забыть указать источник.

Получилось так:

Перенес в заголовок общий абсолютный объем выбросов.
Подписал все составляющие в одном стиле, несмотря на сильные различия в масштабах чисел — всё помещается и читается.
Основные значения по категориям подписал в процентах, абсолютные в гигатоннах — «сложные» — дополнительно дописал к категориям.
«Сложные» обвел линией.

Про фотографию и реальность

Хорошая уличная фотография — это и круто, и странно. Это каким-то парадоксальным образом одновременно и чистая правда, и ложь.

Вот Варламов сфоткал девушку во время протестов в Париже. Крутая фотка. Разошлась по интернету:
https://twitter.com/varlamov

This photo from the protests in #Paris so perfectly encapsulates our current world I thought it was staged. #ParisRiots

Меня передернуло от слов “encapsulates our current world”.

Что происходит с восприятием фото на самом деле, я представляю себе так:
Существует сложная, многомерная реальность. Множество людей, событий во времени. Всё сложно связано и постоянно меняется.

Фотограф делает снимок. Это одна точка сложного пространства.

Люди смотрят на фото, и у них в голове разворачивается реальность, которая могла бы стоять за этим фото. Эта реальность может совсем не совпадать с «настоящей». Потому что это всего-лишь фотография.

И вот мы смотрим на девушку, снимающую протесты, и думаем: Ох, времена-то какие, кто-то вот так, а кто-то вот сяк! Куда катится наш мир! Фотографу премию! И т. п.

Фотография отличная.
Но иногда девушка с телефоном — это всего-лишь девушка с телефоном. Через минуту встанет и пойдет по своим делам.

На эту тему сразу вспоминаю фотографа Александра Петросяна:
https://www.instagram.com/petrosphotos/
http://aleksandrpetrosyan.com
Ловить неуловимые моменты.

Памятка про емкость аккумуляторов для дальних поездок, походов и прогулок

У вас бывало так, что взяли с собой аккумулятор для подзарядки телефона, а он заряжал меньше, чем вы ожидали? Я беру с собой в поездки внешний аккумулятор (пауэрбанк) для подзарядки прожорливых смартфонов. На аккумуляторе пишут емкость, например, 20 Ач. Но ампер-часы — это еще не энергия. Какое количество энергии содержит акк?

Енергия — мощность, умноженная на время, в течение которого эта мощность действует. В формуле емкости — амперы, умноженные на часы. В амперах измеряется сила тока. Чтобы получить мощность, нужно умножить на напряжение. Например, пауэрбанк на 20 Ач напряжением 3.7 В. Количество энергии: 20 х 3.7 = 74 ватт-часа. Что это означает? Если вы подключите лампу мощностью 74 ватта, она будет гореть 1 час.

В жизни «лампа» будет гореть меньше, потому что напряжение не остается постоянным, а снижается. Падает напряжение и на контактах, когда подключаешь зарядить телефон, и на проводах, и на потерях во время самого процесса заряда. Вся цепочка — внешний акк, разъёмы, провод, заряжаемый телефон — нагреваются. Если по-простому, всё это вместе — потери энергии, которая была запасена во внешнем аккумуляторе.

В телефон попадает меньше энергии, чем ожидаешь. Это не так заметно, когда заряжаешь через блок питания от розетки, потому что в таком случае источник условно бесконечный. Но при подзарядке телефона от пауэрбанка часть энергии теряется.

Например, у вас в телефоне батарея на 1800 мАч. Покупаете внешний акк емкостью 3600 мАч и думаете «ага, смогу полностью перезарядить телефон два раза». Нифига! :-) Возникает целый набор разнообразных потерь энергии. В лучшем случае сможете зарядить один раз. Чудес не бывает: акк должен быть качественным и большим, провода — исправными, контакты — чистыми. Учитывайте, подбирая пауэрбанк для дальних поездок :-)

Редизайн страницы про миграцию птиц

Исходная статья:
https://www.nationalgeographic.com/magazine/2018/03/bird-migration-interactive-maps/?beta=true

Редизайнил блок с картой на странице про миграцию птиц:

В новом варианте:
— сгруппировал заголовки по смыслу,
— добавил количество птиц,
— сделал более аккуратную легенду,
— текст поставил в правую колонку,
— переделал листалку периодов.
Компактнее, информативнее.

Было-стало:

Визуализация миграции птиц

Великолепная статья Нэшнл Географик с картографической визуализацией миграции птиц в Северной и Южной Америках:

https://www.nationalgeographic.com/magazine/2018/03/bird-migration-interactive-maps/?beta=true

Сложно даже представить, какие данные и как надо было собрать и обработать, чтобы сделать статью с подобным уровнем детализации.

Плюсы: в статье интегрированы текст, звук пения птиц, координаты на картах, перемещения птиц, изменения окружающей среды во времени. Совмещены маршруты птиц, места проживания людей, насыщенность растительности. Красивые фотографии птиц, интересные факты. Например, птицы рискуют, прокладывая прямые маршруты над опасными местами.

Вызывает вопросы верстка. Хочется поставить тексты и мини-выноски про птиц с фотками параллельно картам. Сейчас тексты и фотографии отдалены от карт по вертикали. Мешает заигрывание с визуальными эффектами при скроллинге: хочется сказать «да дайте уже, наконец, спокойно посмотреть».

Там же: сбивает с толку, что в листалке периодов первый период — вовсе не период, а анимация всех периодов. Для бета-версии норм, но вообще вот это надо сделать получше:

Любопытный ролик: подготовка ко взлету Миг-15

Несколько наблюдений на тему пользовательского взаимодействия.

Три параллельных системы:
— Самолет и его органы управления;
— Чек-лист: что нужно проверить перед взлетом;
— Пилот: знания, опыт, текущее физико-психическое состояние.

Самолет мог бы сам подсказывать, что проверить перед взлетом. Но процесс проверки приборов вынесен в отдельный материальный объект — чек-лист.

В процессе проверки чек-лист подключает пилота к процессу анализа. Человек проверяет пункты. Включается мозг. Человек помещается в контекст пилотирования.

Самолет: сложная электроника,
Чек-лист: лист бумаги.

Самолет: отдельные приборы, процесс управления не представлен в приборах, только отдельные функции.
Чек-лист: цельный процесс без приборов.

Самолет: сложно модифицируемая система, замкнутая.
Чек-лист: легко обновить, поменять, переделать.

Чек-лист сглаживает слабые места интерфейса. Какие-то органы управления нужно проверять по списку, потому что вживую на них сложно обратить внимание — не все приборы расположены на виду, и не все расположены идеально с точки зрения удобства доступа пилота.

Рассчитывают и показывают вероятности исхода матчей

https://projects.fivethirtyeight.com/2018-world-cup-predictions/matches/

Методология:
https://fivethirtyeight.com/features/how-our-2018-world-cup-predictions-work/

<Дополнение>

Оказалось, что данные в основе этой визуализации — полная шляпа.
Получился антипример.
Напишу отдельно про эту историю.

Как изучать трехмерные данные МРТ-сканирования

Планшет с определением положения в пространстве (по описанию я не уверен, что они используют акселерометр) помогает изучать трехмерные данные МРТ-сканирования:

Хорошо, что экранов два:
на одном — текущее сечение,
на другом — общий вид с отображением плоскости сечения.

Интересная визуализация футбольных голов на чемпионатах в «Экономисте»

https://www.economist.com/graphic-detail/2018/06/18/every-world-cup-goal-ever-scored

Опубликована в рубрике Daily Chart. Хорошо сделано для повседневной графики. Но если закрыть глаза на оперативность подготовки, можно немного покритиковать интерфейс.

При наведении курсора подсказка всплывает не у кружочка гола, а где-то непонятно в стороне:

Нужно ближе к выбранному элементу.
Всплывающая рамка часто перекрывает один из голов в игре, соединенных линией.

Если на отфильтрованной диаграмме кликнуть на гол, фиксируется вся игра. Чтобы снять фиксацию, нужно попасть курсором в один из немногих мелких кружочков. Можно было сделать отмену фиксации кликом на всей площади:

Симуляция и визуализация человеческого тела

Суперкомпьютерный центр в Барселоне выпустил короткий фильм о программной симуляции и визуализации человеческого тела:
http://www.bsc.es/viz/virtualhumans/

Видео:

О фильме:
https://www.bsc.es/news/bsc-news/release-virtual-humans-film

Говорят о том, как симуляция не абстрактного, а конкретного человека поможет подбирать для него лекарства, тестировать варианты хирургического вмешательства, тестировать повышение нагрузки на суставы и мышцы.

Фантастика и рядом не стояла.

Выбор школы в Чикаго

Про выбор школы для детей в Чикаго. Визуализация и интерфейс — без чудес, но интересно представлена история в целом. В самом начале нужно наугад кликнуть в кучу точек. Сайт пишет, какой выбран ребенок, и дальше строит историю именно про него.

https://gabriellelamarrlemee.github.io/thesis-simulation/

Если ребенок «белый», то у него могут быть сложности со сверстниками в школе: только 17 % детей в Чикаго — белые, 35 % темнокожие, и 43 % — латиноамериканцы.

Визуализация головного мозга для исследований

Инструмент для визуализации головного мозга для исследований:
http://andrewgelman.com/2018/05/18/awesome-data-visualization-tool-brain-research/

Обалденно. Трехмерная схема нервных волокон с подсветкой групп и настройкой прозрачности, и еще куча крутых штук:
https://yeatmanlab.github.io/AFQBrowser-demo/

Вакансия веб-технолога в Сбертехе

Приглашаем фронтенд-разработчика работать над внутренними системами Сбербанка. Создавать верстку под разные устройства и браузеры. Работать в команде с дизайнерами и разработчиками. Собирать решения на основе готовых интерфейсных компонентов, создавать новые компоненты, улучшать готовые. Пригодится знание Sass, Less, HTML5, ReactJS.

В Сбербанке есть внутренняя служба, которая обеспечивает бесперебойную работу всей компании. Технолог совместно с другими участниками команды будет развивать информационный сервис для внутренней службы. Проект интересный, задачи сложные и разнообразные. Офис в Москве.

Пишите о себе и задавайте вопросы:
SIKashin.SBT@sberbank.ru
Пришлю тестовое задание. Оценить результат поможет технолог Александр Мядзель.

Передайте знакомым фронтендерам.

Тач-интерфейс и временные ряды

Несколько подходов для организации пользовательского взаимодействия с графиками на тач-интерфейсе опубликовали на сайте Университета Баухауза в Веймаре.

Страница:
https://www.uni-weimar.de/de/medien/professuren/medieninformatik/vr/research/infovis/touch-the-time/

Видео:
https://www.uni-weimar.de/projekte/vr-scratch/videos/TTT.mp4

Подходы не новые, но хуже они от этого не становятся.

Синхронизация разных панелей. при уточнении времени на одной из панелей выбранное время подсвечивается и на остальных:

Скоординированный выбор временного диапазона. Выбираем диапазон на одной панели, отображается на всех:

А вот кое-что поинтереснее.
Выделение диапазона для просмотра на отдельной панели:

В видеоролике перетаскивают кусок графика с одной панели на другую, круто:

Пересечение строк данных и диапазона:

Еще несколько технически интересных штук, но сомнительных с точки зрения визуализации.

Растягивание панели. Бывает полезно при сборке панели, но для пользователей сомнительно — искажает привычный масштаб:

Ну ладно, это же про принципы тач-взаимодействия, а не про конкретные графики.
Растяжение части диапазона четырьмя пальцами:

Не очень универсальная штука, есть же нормальный зум. Но выглядит интересно.
Гляньте там видео:
https://www.uni-weimar.de/projekte/vr-scratch/videos/TTT.mp4

Беседа о разборке Теслы Модели 3

В компании Манро (Munro) разобрали Теслу Модель 3 и написали отчет о качестве сборки. Разобрали всё до деталей. Изучили каждую деталь. Сколько стоит деталь. Качество детали. Качество сборки. Общее качество механики и электроники.

Собрали информацию в огромную схему:

По каждому пункту схемы:
— материал,
— поставщик,
— вес детали,
— цена,
— качество.

Сэнди Манро (Sandy Munro) говорит, что с точки зрения механики качество автомобиля ниже среднего. Зазоры пляшут.

Но самое интересное дальше. Электроника в Тесле по плотности и качеству на уровне военной техники. Превосходная. Чуваки в шоке от плотности элементов и качества.

Кроме того, автомобиль прекрасно едет и управляется. Как же так вышло, что электроника прекрасная, но двери из-за зазоров не закрываются?

Обсуждают роботизацию. Робот — это однорукий слепой идиот! Blind one-handed Idiot, BOB :-)

Интересные моменты.

1:08:00
— Что вы делаете с разобранными деталями?
— Думали продавать, но в итоге решили, что проще просто выбрасывать! Собирать обратно не хотелось: критически важна надежность сборки.

Сложно задизайнить деталь для производства одноруким слепым идиотом. К цене добавляются: + цена робота, + цена настройки, + обслуживание. Так цена может дорасти до 10Х. Это цена роботизации. Нужно многое продумать, прежде чем ставить роботов. Дженерал Моторс прошла через это: у них было дофига роботов, которые затем оказались на складе в упаковке. Почему? Просто потому что автомобиль не был задизайнен для роботов!

Нельзя взять «обычный» дизайн и сказать «вот, мистер робот, соберите это» — это не сработает. Нужно, чтобы дизайн был подготовлен для роботизированной сборки.

1:09:00
Хотя с механикой есть проблемы, электроника — ВАУ! А механика подтянется. У конкурентов будут проблемы с достижением такого уровня электроники. Потому что вы не можете просто отправить своих ребят и сказать, давайте, закатайте рукава и сделайте. Это не так просто!

1:11:00
Вопрос по телефону про автоматизацию.
Ответ: если вы хотите автоматизировать, нужно дизайнить на другом уровне.

Вокруг робота нужно обеспечить пространство.

Роботы годятся для 3Д:
dirty, dangerous, drudgery (грязно, опасно, нудно).

1:15:00
— Как вы бы сравнили качество Теслы М3 с другими автомобилями?
— Я бы сравнил с машинами Киа 90-х годов. Дешевая машина, торопились на рынок, кривые щели в кузовах. Но затем Киа хорошо рванули вперед.

1:17:00
— Как добиться качества на автоматизации?
— Когда вы планируете производство, вы смотрите, какие погрешности есть на этапах. Контролируете каждый этап.

1:27:00
Про синхронность автоматизированного производства. Тесла хочет, чтобы работали полностью синхронные конвейеры. Но мы видели на фабрике по производству ручек, как в случае неполадки пол заваливается сотнями тысяч шариковых ручек, и их убирают лопатами, это впечатляет.

На производстве баночек конвейер называют не синхронным: проверяющая машина, если видит отпечаток пальца на баночке или крышке, выбивает банку из ленты мгновенно. Никто не хочет потерять миллион банок.

Вторая вакансия редактора в Дизайн-центре Сбертеха

Что у нас может делать редактор? Вот, скажем, информационные системы. Без текста нет интерфейса. Например, в системе электронного документооборота Сбербанка одно из главных направлений для улучшения — упрощение терминологии. Системой пользуются сотни тысяч сотрудников. Представьте, какое количество функций, пользовательских ролей и разных деталей накопилось за годы работы. Приведение в порядок такого хозяйства — это история про эффективное представление информации и способов работы с ней.

Пользователям легче работать со сложной системой, если в дизайнерской команде хорошо разобрались в сущностях и понятно их обозначили. Правильно подписали и назвали всё, от больших процессов до заголовков и мелких интерфейсных надписей.

Например, в документообороте:
регистрационная карточка → документ
проект документа → тоже документ :-)
резолюция → поручение
кому → получатель
визирующее лицо → согласующий
расписать → поручить

Если редактура плохая:
Клиенты не подключают новые услуги. Часто звонят с вопросами. Пользователи не понимают, как найти информацию. Одно и то же обозначается по-разному. Пользователи тратят силы на то, чтобы разобраться в интерфейсах. Новичкам тяжело учиться. Не могут работать без поддержки наставника.

Если редактура хорошая:
Пользователи работают без подсказок наставников, потому что информация сразу подается в понятной форме. Людям легко разобраться в инструментах и запомнить их. Люди не путаются в согласовании документов, потому что задачи на согласование подписываются понятно.

Дизайнеры скажут: ба, да это же про дизайн! Конечно. Области пересекаются. Но и не только про дизайн. Чтобы «просто поменять надпись», редактору придется преодолеть препятствия: у руководителя свои идеи, дизайнер предлагает сократить, юрист требует изменить термины. А когда все договорились — текст вдруг кто-то не согласует.

Приходите, если вам интересно получить опыт работы с текстом, интерфейсами и людьми в сложных проектах.

Напишите о себе:
sikashin.sbt@sberbank.ru
Пришлю тестовое задание.

Передайте знакомым редакторам и дизайнерам.

Ранее Ctrl + ↓
Коронавирус