Журнал Сергея Кашина

Канал в Телеграме: https://t.me/sergeykashin
Инстаграм: https://www.instagram.com/skashin/
Фейсбук: http://facebook.com/real.sergey.kashin
Твиттер: http://twitter.com/sergeykashin
Сайт: http://cashin.ru

Симулятор Монте-Карло к задаче про дополнительные стрелы

Разминка выходного дня: дизайн + программирование + теория вероятностей.

Сын решает задачу по теории вероятностей:
«Есть 14 стрел. Вероятность попадания одной стрелы — 0,1. За каждое попадание стрелок получает ещё 3 стрелы. Нужно определить математическое ожидание количества выстрелов.»

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

Решение численным методом — симулятор Монте-Карло с настройкой параметров задачи:
https://observablehq.com/@realsergeykashin/monte-carlo-arrows-v1-0

График показывает результаты каждой серии выстрелов. Красные штрихи — отдельные выстрелы. Чем чаще стрелок попадает, тем больше дополнительных стрел получает и так же их выпускает:

Интересно наблюдать, как меняется результат при изменении входных параметров задачи:

Редактируется
— вместительность графика. При определенных настройках получается очень много стрел, осторожно!
— начальное количество стрел;
— вероятность попадания стрелы;
— сколько новых стрел выдают за каждое попадание.

Так что вот вам еще один симулятор.

Способ визуализации интервалов в R

Исходный код интервальных операторов на гитхабе автора, Питера Солимоса:
https://github.com/psolymos/intrval

Исходный дизайн представления интервалов:
https://twitter.com/psolymos/status/803628398954381312

Мой вариант визуального представления:
https://twitter.com/sergeykashin/status/805501566123966464

Лайк и ретвит Тафти — все ок.

Улучшения

Поставил моноширинный шрифт в интервалах.
Отсортировал по типам — общий принцип становится нагляднее.

А теперь еще поменял порядок расположения символов в неравенствах: всегда по возрастанию слева направо. Расположение символа (х) в неравенстве соответствует его расположению относительно границ интервалов. Использую операторы < и <= вместо > и >=.

Например,
хуже: x <= a | x >= b
лучше: x <= a | b <= x

Бросить сцепление

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

Бросить сцепление — слишком резко подать крутящий момент. Быстро движущийся объект соединяется с неподвижным.

Примеры эффекта

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

Потеря контакта с дорогой и занос:

Есть сцепление двигателя с колесом. Есть сцепление колеса с асфальтом. Но не хватило сцепления с водителем:

Теперь ближе к человеческим примерам

Бросать сцепление при выступлении

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

Бросать сцепление при подготовке статьи

Писать слишком сложно, не пояснять новые для читателя идеи, не давать ссылок на источники и дополнительные материалы.

Бросать сцепление в интерфейсной редактуре

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

Бросать сцепление при появлении новых сотрудников

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

Бросать сцепление в информировании

Читать длинные дайджесты с десятками ссылок на всё подряд. Шквал ссылок на статьи — стресс, перегрев сцепления, тупняк. Читаешь про какой-то космос, возвращаешься в реальность, а там всё иначе.

Бросать сцепление в критике

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

Почему люди бросают сцепление?

Учителям бывает тяжело сбавлять обороты при обучении новеньких учеников. Опытным сотрудникам бывает сложно работать с неопытными. Сложно входить в положение других людей. Эмпатия дается людям тяжело. Часто не видим и не знаем состояния людей, с которыми контактируем.

Мы не любим подстраиваться и сбавлять скорость. Хочется ехать побыстрее. Мы не хотим разгоняться, мы хотим сразу ехать быстро, всё и сразу.

Продолжение следует.

Первая часть:
http://cashin.ru/blog/all/traction/

Сцепление в работе и жизни

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

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

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

Сцепление в автомобилях и ручные коробки передач используют всё реже. Кто-то получал водительские права для автомобилей только с «автоматом» и о педали сцепления вообще не думает.

Как работает автомобильное сцепление:

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

Не бросать сцепление

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

Если подать крутящий момент слишком резко — двигатель может заглохнуть: слишком большая разница скоростей вращения двигателя и колес. Типичная сложность для водителей-новичков: они «бросают сцепление».

Почему существует проблема сцепления

— у объектов разные скорости;
— объекты обладают массой, инертностью.

Захотелось сохранить фразу «бросить сцепление» как метафору. Мне эта фраза понравилась, потому что она короткая и в ней есть слово «бросить». Бросают что-то тяжелое, что не хочется тащить. Решать большую задачу за один присест тяжело.

Cцепление на разных примерах

Два бруска

Один лежит на другом. Двигаем нижний брусок — оба бруска двигаются.

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

Скатерть и посуда

Помните этот старый трюк? Скатерть резко выдергивают, посуда остаётся на месте. Если дергают недостаточно резко — посуда едет вместе со скатертью.

Сцепление в понимании между людьми

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

Сцепление — это мыслительный прием, который помогает повернуть мышление и действия в нужную сторону.

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

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

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

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

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

Обсуждение в Твитере:
https://twitter.com/sergeykashin/status/1036544638151208960

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

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

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

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

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

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

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

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

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

Вот Варламов сфоткал девушку во время протестов в Париже. Крутая фотка. Разошлась по интернету:
https://twitter.com/varlamov
https://twitter.com/AndrewSteinwold/status/1069983145448128512
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/

Ctrl + ↓ Ранее