Это была первоапрельская шутка.

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

В то время как визуализация данных становится все лучше и лучше при обработке представления числовых данных, те же методы затрудняются при попытке представить системы. Системы окружают нас, мы встроены в них, но, как ни странно, мы ужасно справляемся с их систематическим представлением. Недавние работы, такие как Loopy by Nicky Case, хорошо представили абстрактные системы, но как насчет реальных систем, основанных на наблюдаемой структуре?

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

Хотя эти системные визуализации являются мощными и аналитически ценными, единственный способ их развертывания - это использовать специальные инструменты для создания системной визуализации, такие как Illustrator или Modernism. Это решается с помощью animalia.js, библиотеки для визуализации систем на основе животных. Эта библиотека принимает структурированное описание системы и визуализирует ее на основе следующих факторов:

  • Количество частей
  • Частичные отношения (совместные, подчиненные, соревновательные)
  • Семантическое качество (положительное, отрицательное, смешанное)

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

const systemImperialBritain = animaliaSystem()
.parts(["coffee","tea","war","liquor",
        "tobacco","pluck","slaves","opium"]
   .semantics("negative")
   .relationship("subordinate")
   .label("British Empire")

Результат зависит от того, определяем ли мы значения и каким образом, генерируя инструкции по рисованию и данные перехода, необходимые для большого количества подходящих диаграмм. Это следует схеме, которую я описал ранее: преобразование методов исторической визуализации в воспроизводимые функции рисования, например, мое исследование в более ранней статье о переделке продуктов визуализации данных У. Э. Б. Дюбуа. Как и в случае с этой работой, ценность создания повторно используемых компонентов и макетов заключается не только в воссоздании одной диаграммы, но и в анимации и расширении этой диаграммы. Таким образом, приведенный выше код легко позволяет нам перенести эту исходную визуализацию системы в современную и бесконечно более эффективную среду визуализации данных, интегрируя анимацию и цвет, чтобы создать динамическую диаграмму осьминога, которая со временем регулирует форму влияющих факторов.

Головоногие моллюски - излюбленный фенотип для такого рода диаграмм, и быстрые и свободные игры с количеством его щупалец и его основной морфологией - давняя традиция в визуализации систем на основе животных. И я полагаю, я мог бы сосредоточиться на создании наиболее эффективного макета и анимации отображения информации в стиле головоногих. Но я думаю, что если бы animalia.js был просто генератором диаграмм осьминога, это выглядело бы немного глупо. Вместо этого эта библиотека учитывает количество элементов, а также взаимосвязь и семантическое качество системы, чтобы показать наиболее подходящее животное.

Давайте посмотрим на общий класс систем, отчаянно нуждающихся в визуализации: политические системы. Формы правления различаются в разных странах и на протяжении всей истории, но, за исключением нескольких мизерных схем однопалатных и двухпалатных заседаний в различных законодательных органах, эти системы практически не представлены. Но с animalia.js вы можете увидеть более эффективное и убедительное представление даже самых сложных систем:

const americanGovernmentPreTrump = animaliaSystem()    
   .parts(["executive", "legislative", "judicial"]
   .semantics("negative")
   .relationship("competitive")
   .label("American Political System (Pre-Trump)")

Эти настройки естественным образом создают визуализацию цербера:

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

const hemingway = animaliaSystem()    
   .parts(["short sentences"]
   .semantics("mixed")
   .relationship("collaborative")
   .label("Hemingway")

Опять же, animalia.js создает наиболее подходящую диаграмму на тему животных.

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

Несмотря на свою крайнюю редкость, animalia.js поддерживает семантически позитивные системы.

const nitw = animaliaSystem()    
   .parts(["crushing small town despair", "Lovecraftian horror"]
   .semantics("positive")
   .relationship("collaborative")
   .label("Night in the Woods")

Опять же, еще одна действенная системная визуализация, подходящая для развертывания на информационной панели или в отчете.

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

Очевидно, что системы более высоких измерений уменьшат пространство возможностей для выбора животных. В результате вы увидите, что animalia.js сильно опирается на гидр, многоножек, облаков, павлинов и косяков рыб, когда вы пытаетесь изобразить несколько десятков, сотен или более частей. Поскольку это первый выпуск, можно ожидать, что он будет немного грубоват по краям при анимации перехода, особенно при изменении семантики. Например, превращение головы гидры в рыбу - это нормально, но превращение тела гидры в пузыри кажется не самым естественным переходом. Исследования по этой теме неоднозначны - вероятно, из-за того, что подобные системные визуализации до сих пор были почти полностью индивидуализированы. Кроме того, иерархическая вложенность не очень сложна, и всего несколько вариантов для каждой комбинации это может привести к бессмысленным результатам, как диаграмма кукабарры, держащая диаграмму единорога во рту. Я надеюсь, что внедрение и внедрение библиотеки приведет к большему количеству реализаций, что приведет к расширению исследований лучших методов визуализации и перехода систем на животных.

К тому же Кукабарра не умел писать Хемингуэй. Он может быть веселым королем кустов, но этот чувак не умеет писать по буквам.