Принт футболки «Йод делает меня умнее» (dribbbbbbbble edition)
Когда мне было 9 лет, я практически попался в сети курсов развития абстрактного и образного мышления. На этих курсах сначала надо было попасть цилиндром в квадратную дырку, а потом составлять из не связанных друг с другом слов истории. Эти занятия мне не нравились, скорее всего потому, что мне плохо объяснили, что же надо делать. Не нравится мне составление бесполезных историй и сегодня (это заметно по тому, как часто я пишу в блог ;) Тем не менее, последняя неделя моей жизни была историей составленной из, как кажется на первый взгляд, не связанных друг с другом слов:
хлеб • йодид • развитие • дети • KIO3 • клейковина
Если вдруг кто-то проследил между этими словами связь, то он или знаком с программой Юнисефа по борьбе с йододефицитом, или просто показалось. Если что-то третье, то это настораживает.
Часть прошедшей недели я посвятил тому, что разбирался и готовил к верстке книгу. Я не буду в тысячный раз писать о том, какая беда йододефицит, а также о том, почему есть рыбу или водросли — не решение проблемы. Просто скажу, что если использовать йодированную, а не обычную соль при приготовлении хлеба, то это не только невероятно поможет в борьбе с йододефицитом, но и хорошо скажется на свойствах самого хлеба. Плесень не появляется дольше, грибки бродят быстрее и так далее. В Киеве скоро произойдет большая конференция хлебопекарей, для которых и готовится книга о пользе соли йодированной KIO3 (это самый крутой йодат, который только можно использовать для йодирования соли).
Книга уже написана, это научный труд, поэтому выглядит она как, ну, научный труд. Просто сверстать ее было скучно, поэтому я для начала перерисовал все графики, сделав их интересными, понятными и более компактными, а потом еще и переверстал таблицы. Таким образом я сделал так, что скучная работа стала интересной и увлекательной. Благодаря тому, что графики и таблицы стали компактнее, у меня появилось место для того, чтобы развернуться с оформлением. К сожалению в книге не нашлось применения спарклайнам, а так бы я потратил еще больше времени ;)
(Инфо)графики
Для того, чтобы превратить обычные графики в информационные, мне потребовалось запросить исходные данные, что косвенно показывает насколько неинформативны и неудобны графики, которые подверглись переделке. Поскольку исходные изображения взяты из рабочего файла, куда они попали из сгенерированного Вордом pdf’а, они не выглядят так, будто над ними трое суток трудилось пять технических дизайнеров. Для того, чтобы увидеть как было, достаточно кликнуть на график или навести мышку на маркеры справа (на тач-устройствах надо пальцем ткнуть в график).
Влияние кулинарной обработки на содержание йода в морепродуктах
Все выходные меня мучал первый график. Как показывают комментарии, не меня одного. Дело в том, что это скорее таблица, чем график. Даже в табличной форме разница между значениями очень хорошо видна. По кругам тоже можно судить о разнице, но только благодаря использованию линейных размеров (в отличией от площадей кругов ниже). Итак, получаются просто круги над таблицей. Кроме легких семантических загадок, этот вариант еще и выпадает из верстки книги, разваливаясь на две составляющие, обе из которых сложно назвать полноценными: круги с подписями и таблица с указанием процентов. Совмещение обеих частей не приведет ни к чему хорошему, превратив данные в кашу. В поисках других способов визуализации я перебрал разные варианты и даже пробовал вернуться к исходному, который был в книге, но он громоздок и не так хорош, как может показаться на первый взгляд. Проблема еще осложнялась тем, что у нас показаны два значения, которые не составляют целое, что делало невозможным использование составных полос (stacked bars).
Для статьи в ZN.UA мне понадобилось проиллюстрировать количество отводимой воды по городам и сравнить суммарные показатели. Составные полосы оказались как нельзя более кстати. На полноразмерной версии лучше видна полоса сверху, на которой отмечены значения сумм отведенных горячих и холодных кубометров, что позволяет судить о средних показателях — они находятся в месте максимального скопления вертикальных черточек.
Например, цена товара состоит из себестомости, налогов, наценок и т.п. — значит все цены можно показать одной полосой, разделив на составляющие для большей наглядности. Фактически, каждая такая полоска представляет собой круговую диаграмму, только распрямленную и не всегда составляющую сто процентов. Тем не менее, есть, что позаимствовать и у такого подхода. Для того, чтобы обозначить большее значение и показать сколько от него остается, я решил использовать метафору капли, которая используется в последней инфографике. Для того, чтобы показать остаток, на капле выделяется соответствующая часть.
Улучшенная иллюстрация влияния кулинарной обработки на содержание йода в морепродуктах
Таким образом, получилась более наглядная, чем раньше, иллюстрированная таблица, позволяющая легко сравнивать значения. Линия, проведенная между строками таблицы, отделяет части капли, сводя на нет любые желания сравнивать объемы и провоцируя сравнивать высоту и соотношение с каплей. Форма капли «держит» большее значение, показывая, что оно простирается и над, и под линией.
Использование йодсодержащих добавок для обогащения хлебобулочных изделий йодом
Круги приятнее, чем полосы показывают разницу между эффективностью использования различных добавок, особенно учитывая количество одинаковых показателей (5%). Фактически, смысл графика сводится к демонстрации того, что все добавки, кроме трех, одинаковы. Две из трех лучше, но примерно одинаковы, а третья разительно больше. Кроме того, круги позволили сделать график более читаемым и сэкономить место.
Влияние йодированных солей на расплываемость теста
Для того, чтобы прийти к финальному виду этого графика, пришлось вдумчиво читать около трех страниц предшествующего текста. Ниже представлены этапы изменения самой визуализации графика.
Сначала полосы графика распространялись в обе стороны, что создавало впечатление расплываемости (показатель, который полосы иллюстрируют). Из-за этого возникла проблема потери наглядности: не было очевидно, что расплываемость одной пробы гораздо больше другой. Добавление линий на фоне сделало график больше похожим на этажерку, но не увеличило читаемость. Поэтому полосы были выровнены по левому краю, а в качестве основы для линий выбрано основное референтное значение. Смысл графика в том, чтобы сравнить показатели KIO3 и остальные. Благодаря тому, что каждая линия отмечает конец каждого ряда, появилась возможность подписать ряды. В результате перебора пяти вариантов (здесь показаны три) были определены цвета, которые легче воспринимать. Полосы стали выпуклыми посередине, чтобы подкреплять «расплываемость», также это увеличило читаемость графика, как ни странно ;) Приятная деталь: длина полос графика равна показателям, которые они символизируют. Например, длина первой полосы в книге будет равна 46 мм.
Влияние йодсодержащих добавок на газообразующую способность муки
Ширина полос в этом графике равна ширине концов полос в предыдущем. Поскольку оба графика идут рядом, они будут удачно дополнять друг друга. Вся сложная «легенда» графика не только уместилась в левой колонке, но и стала понятнее.
Влияние йодированных солей на свойства клейковины
Деформация клейковины показана деформацией краев круга. Количество вершин «звездочек» кореллирует с разницей в данных.
Гидратация — это присоединение молекул воды к другим молекулам и ионам, так что к полосам, отображающим гидратационную способность, липнут капельки воды ;)
Влияние соли йодированной KIO3 на рост дрожжевых клеток
Рост дрожжевых клеток в течение интервала показан при помощи экстраполяции данных, что создает впечатление процесса. Можно предположить, каким был показатель в определенный момент. Для тех моментов времени, в которые известны значения, эти значения обозначены.
Влияние йодированной соли на рост Bacillius subtilis в хлебе
Вместо скучных полос была использована вариация на тему круговых диаграмм. В отличие от последних, на графике сумма значений не равна ста процентам, поэтому для каждого значения как бы построена своя круговая диаграмма.
Сохранность йода в хлебе с йодсодержащими добавками
Некоторые термины и названия пришлось переписать так, чтобы они выглядели понятно и по-человечески, а не как в реферате студента третьего курса, скачавшего их из интернета. Надеюсь, что после вычитки их не поменяют ;)
Таблицы
Для таблиц я сразу создал правила оформления в Индизайне, так что, казалось, оставалось только вставить данные. Как бы не так. Большинство таблиц были сделаны так, что данные в них было не только неудобно читать, но и сложно сравнивать. В большинстве случаев это решалось поворотом таблицы на 90°.
Сравниваемые данные стали в столбики, так что их легко сравнивать. Кроме того, исчезла многоуровневая нечитаемая шапка, превратившись в приятную левую колонку.
Некоторые таблицы оказались вовсе не таблицами, а простыми списками в две колонки.
Сложные таблицы со сносками и съехавшими полями стали удобными и понятными. Тут пришлось не только перечитывать все, что с ними связано, но и разбираться, какие поля куда съехали.
Верстаю книгу
Следующие шаги: правильно расставить тире, дефисы, символы интервалов, многоточия, кавычки, сноски, нумерацию источников и многое другое. Также необходимо изменить пошлый астериск в качестве обозначения сноки на что-нибудь менее «вордовское». Для текста, таблиц и примечаний на графиках, если такие понадобятся, буду использовать символ «×». Пришлось отказаться от цифровых верхних индексов, чтобы их не спутали в какой-нибудь очередной формуле всего с обозначением степени или массового числа у химических элементов. Сносок, впрочем, не больше одной на страницу, так что цифровые индексы были бы избыточны — повсюду маячили бы единички.
В результате проведенных превращений графиков в информативные читаемые графики, а неудачных таблиц просто в хорошие таблицы, преобразилось и ощущение, которое оставляет текст. Его стало интересно читать. Те же, кому читать не захочется, смогут порассматривать графики и таблицы. Уже только по ним понятно, что за сила таится в йодированной соли.
Попутно хочу удивиться тому, как нигилистически относятся к своим трудам те, кто их создают. Если уж написал научный и нужный текст, то неужели не хочется, чтобы он красиво выглядел и был удобоварим? Ладно, читаемые графики в научном мире строить не умеют, но съехавшие поля таблицы как не поправить? Как подсказали в комментариях, еще и обозначение йодида и йодата в графиках и таблицах неверное. Пришлось исправить.
***
Не о графиках, но о йодированной соли. Чтобы не засорять комментарии, сразу сообщу, что есть водоросли или рыбу недостаточно, чтобы не было йододефицита. Вернее, морскую капусту надо есть ведрами, а рыбу постоянно, только тогда это сможет помочь. В то же время достаточно заменить простую соль в своем рационе на йодированную, чтобы йододефицита не было. Йодосодержащие медпрепараты тоже помогают не хуже, но стоят куда дороже.
Спасибо Юре и Антону за то, что привели в порядок CSS и JavaScript вакханалию, создав и исправив функционал переключения исходного и обновленного графиков на тот, который был мне необходим ;)
И все? Нет, конечно!
Я доверстал книгу! И написал об этом пост! Встречайте:
«Йодид? Йодат! — 2 • Инфографика в действии и верстка книг»
Tweet
Огромное спасибо, сейчас вот разошлю некоторым людям, чтобы стало понятно что такое дизайн.
Ген, сорри за буквоедство, но йод все-таки I, а не J и, соответственно, йодат калия – KIO3
Хотя, хз, я смотрю и KJ пишут, и KI. Сорри )
Eughene, обозначение йода действительно I, а обозначение йодата действительно KIO3, так что спасибо большое. В книге встречается и так, и так, но мы будем писать правильно!
Графики весьма и весьма. Только с кругами непонятно – если отображение из полосы производилось в диаметр, то это совершенно косно и неинтуитивно. Если же в площадь – то, скажем, разницы в три раза на примере морской рыбы не видно наглядно – сам понимаешь, почему. Даже площадь квадратов угол к углу более понятно, что уж говорить о stacked bar.
Сергей, площадь круга в линейной зависимости от его диаметра, так что разницы между переводом в диаметр и переводом в площадь нет ;) Та проблема, которую ты описал, существует глобально. Как и проблема с круговыми диаграммами — они лишены той наглядности, которая есть у полосок, положенных друг на друга, зато позволяют сэкономить место и показать разницу между значениями более удручающей! Это нам на руку в данном случае. Для въедливых и тех, кому важны данные, есть цифры ;)
Очень болит голова, поэтому я, возможно, ответил несвязно.
> площадь круга в линейной зависимости от его диаметра
Вообще-то в квадратичной. S = pi · R² = pi · (d / 2)². Если диаметр увеличить в два раза, то площадь увеличится в четыре. По площади, круг амитона должен укладываться пять раз в круге йодказеина.
> Влияние йодсодержащих добавок на газообразующую способность муки
Здесь у вас совершенно зря «обрезан ноль». В оригинале было с ошибкой, но реальное положение можно было отследить хотя бы по числам. Разница между длиной линий должна быть гораздо меньше.
Это ещё более заметно на следующем графике: полоса в 150 % никак не может быть вдвое короче полосы в 160 %. И, кстати, где кончается полоса: до капелек или после них?
Сектора «Влияние йодированной соли на рост Bacillius subtilis в хлебе» тоже получаются с ошибкой. Если 50 % это половина окружности, то 80 % — это больше трёх четвертей, а нарисовано процентов 70.
Иван, верно, в квадратичной, больная голова дает себя знать ;) Тут согласен, надо кружки пересчитать.
Ноль обрезан не зря, поскольку разницу в микроны не только никто не увидит, но и никто не напечатает. Были перепробованы разные варианты. Тогда уж просто лучше перечислить значения, а этого не стоит делать в рамках как раз конкретно этой книги. Вот со следующим примером все верно, надо перерисовать от нуля. Спасибо, что обратили на это внимание.
Ну и за сектора спасибо. По невнимательности пропустил, там сначала другое значение было.
Со мной можно на «ты» ;)
Как раз квадратичная зависимость и не дает большой разницы по сравнению с настоящей круговой диаграммой (которая показывает отношения относительно целого) и столбиковой (которая показывает количественную разницу). Так что перерисовать было бы хорошим решением.
Сергей, круговая диаграмма не показывает ничего. Должна бы, но не показывает, потому что она для манипулирования данными, а не для их представления. При ее помощи, например, можно легко показать, что 33% у нашего кандидата это не намного меньше, чем 58% у противника (остальные против всех). В нашем случае квадратичная зависимость сделает визуальную разницу между кругами еще более удручающей, чем просто линейная. Это, насколько я понимаю материал, на руку повествованию. При том, что все размеры и зависимости между площадями будут соблюдены. Единственная проблема, которая может возникнуть (как только доберусь до компьютера, сразу проверю) в том, что маленькие круги могут оказаться слишком мелкие для того, чтобы их можно было различить. Тогда надо будет перерисовывать и возвращаться к одному из начальных вариантов, когда содержание йода было показано капельками ;)
Круговая диаграмма не покажет, если она трехмерная, и ее правильно повернуть :)
Я в первую очередь сравнивал с column или stacked bar.
Круг в круге, о котором мы и говорим, попросту не может сделать визуальную разницу удручающей. Именно потому что зависимость квадратичная. Вот прекрасный пример – http://www.artgorbunov.ru/bb/soviet/20100422/ (в настоящем случае ситуация ухудшается тем, что вы предлагаете на глаз сравнить круг “до” и круг с вырезанным центром “разница между после и до”).
очень очень достойная инфографика!
замечательная просто.
но только вот не пойму почему Сельдь, Креветки и Устрицы пишутся с большой буквы? Это что фамилии? Алексей Николаевич Сельдь? Мария Васильевна Креветка?
Можно было и с маленькой буквы.
Просто люди ведь безграмотные вырастают. Они думают что всё пишется с большой. Экватор с маленькой или с большой? они не знают.
Они не знают как правильно написать “Київський національний університет імені Тараса Шевченка”, потому что везде эта фраза пишется на капслоке “КИЇВСЬКИЙ НАЦІОНАЛЬНИЙ УНІВЕРСИТЕТ ІМЕНІ ТАРАСА ШЕВЧЕНКА”
Ну правда, почему нельзя писать с маленькой- все что пишется с маленькой, а с большой- всё что пишется с большой?
Ой! Наталка, с большой буквы пишется любое слово в начале предложения — любого, даже неполного, состоящего из одного слова ;)