Существует много возможный вариантов реализации сложных графиков в ваших проектах. Я за несколько лет попробовал все возможные варианты. Сначала это были готовые библиотеки типа AmCharts 4. AmCharts сразу же оказался большим и неповоротливым. После этого были более гибкие и дружелюбные библиотеки, такие как Recharts. Recharts был поначалу очень хорош, но со временем сложные фичи создавались такими костылями, которые даже показывать стыдно, а какие-то фичи и вовсе были невозможны в реализации. Таким образом, я пришел к D3 и решаю на нем любые задачи, связанные с графиками. Иногда это занимает немного больше времени по сравнению с готовыми инструментами. Но остается одно неоспоримое преимущество мы всегда знаем, что никогда не упремся в рамки и ваш код не захочется отправить в помойку через пару месяцев.

Какая цель этой статьи? Я хочу рассказать вам про крутой инструмент и о том, как его максимально эффективно использовать в связке с React. Мы последовательно разберем универсальный рецепт для построения компонентов любой сложности.

Сложные данные

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

Пару примеров эффективного восприятия информации:

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

Что из себя представляет D3

D3.js это javaScript библиотека для обработки и визуализации данных. Она включает в себя функции для масштабирования, утилиты для манипуляции с данными и DOM-узлами.

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

1. Абстрагирование от физических размеров

Я не просто так начинаю с этого пункта. Самое первое, что необходимо сделать, когда приступаем к разработке графика это абстрагироваться от физических размеров. Ну скажем, чтобы мы могли получать координаты точек и сразу же записывать их в атрибуты. Соответственно, нам нужны какие-то методы, которые получают на вход значение или название категории, а на выходе отдают координаты в пикселях.

getY(`значение`); \\ возвращает координату по оси y в пикселяхgetX(`название категории`); \\ возвращает координату по оси x в пикселях

Мы один раз создаем такие функции на один компонент, какой бы он сложный не оказался в итоге. А дальше используем эти функции везде, где нужно создать какой-то элемент, позиция которого зависит от данных.

К счастью в D3 это сделать очень просто.

Получение координат по оси Y (ось значения)

На изображении показано положение точек из массива [4, 15, 28, 35, 40] в контейнере выстой 300px:

Теперь посмотрите как с помощью D3 создать функцию для получения физических координат для отрисовки этих точек:

const getY = d3.scaleLinear()  .domain([0, 40])  .range([300, 0]);

Мы создаем функцию getY с помощью D3 функции scaleLinear(). В метод domain передаем область данных, а в range передаем физические размеры от 300px до 0px. Так как в svg отчет начинается с левого верхнего угла, то нужно именно в таком порядке передавать аргументы в range сначала 300, потом 0.

Мы только один раз работаем с физическими размерами, когда создаем эту функцию и передаем в нее высоту графика. После этого мы работаем только с реальными данными и сразу же выводим полученные размеры в svg атрибуты.

Пример применения функции getY:

getY(4);  // 270getY(15); // 187.5getY(28); // 90getY(35); // 37.5getY(40); // 0

В качестве аргумента мы передаем значение, а на выходе получаем координату по оси y. Обратите внимание, что это отступ сверху контейнера.

Получение координат по оси X (ось категории)

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

На изображении мы видим контейнер шириной 600px и 5 месяцев. Месяца будут служить подписями по оси X:

Создадим такую функцию:

const getX = d3.scaleBand()  .domain(['Jan', 'Feb', 'Mar', 'Apr', 'May'])  .range([0, 600]);

Мы используем функцию scaleBand из D3. В domain мы передаем все возможные категории в нужном порядке, а в range область, выделенную под график.

Смотрим пример применения нашей функции getX:

getX('Jan'); // 0getX('Feb'); // 120getX('Mar'); // 240getX('Apr'); // 360getX('May'); // 480

В качестве аргумента мы передаем название категории, а на выходе получаем координату по оси X (отступ слева).

2. Отрисовка простых фигур

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

• rect прямоугольник;
• circle круг;
• line линия;
• text обычный блок текста.

Эти фигуры схожи тем, что они принимают 1 или 2 координаты и просто содержат разные физические свойства (цвет, размер и прочее). Остальные фигуры создаются более сложным путем, об этом позже.

Точки

Для примера попробуем нарисовать точки с использованием svg-фигуры circle:

const data = [  { name: 'Jan', value: 40 },  { name: 'Feb', value: 35 },  { name: 'Mar', value: 4 },  { name: 'Apr', value: 28 },  { name: 'May', value: 15 },];return (  <svg width={600} height={300}>    {data.map((item, index) => {      return (        <circle          key={index}          cx={getX(item.name) + getX.bandwidth() / 2}          cy={getY(item.value)}          r={4}          fill="#7cb5ec"        />      );    })}  </svg>);

Фигура circle абсолютно примитивна. В данном случае она принимает координаты центра cx, cy, радиус r и цвет заливки fill.

Здесь мы использовали новый метод bandwidth:

getX.bandwidth()

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

getX(item.name) + getX.bandwidth() / 2

Вот, что у нас получится в результате:

Подписи

Для создания текстовых узлов в svg используется фигура text. Она также принимает координаты и содержит свои личные атрибуты для стилизации.

Подпишем значения на наших точках:

return (  <svg ...>    {data.map((item, index) => {      return (        <g key={index}>          <circle ... />          <text            fill="#666"            x={getX(item.name) + getX.bandwidth() / 2}            y={getY(item.value) - 10}            textAnchor="middle"          >            {item.value}          </text>        </g>      );    })}  </svg>);

Что здесь нового? Мы обернули наш круг и текст элементом g. Элемент g один из самых распространенных в svg, обычно он просто группирует элементы и двигает их вместе при необходимости через свойство transform.

Вот как выглядят наши подписи к точкам:

3. Оси

Для осей существуют готовые элементы в D3.

const getYAxis = ref => {  const yAxis = d3.axisLeft(getY);  d3.select(ref).call(yAxis);};const getXAxis = ref => {  const xAxis = d3.axisBottom(getX);  d3.select(ref).call(xAxis);};return (  <svg ...>    <g ref={getYAxis} />    <g      ref={getXAxis}      transform={`translate(0,${getY(0)})`} // нужно сдвинуть ось в самый низ svg    />    ...  </svg>);

Вот что получается, если ничего не менять и не настраивать:

Попробуем добавить немного красоты и переопределим изначальные стили:

const getYAxis = ref => {  const yAxis = d3.axisLeft(getY)    .tickSize(-600) // ширина горизонтальных линий на графике    .tickPadding(7); // отступ значений от самого графика  d3.select(ref).call(yAxis);};const getXAxis = ref => {  const xAxis = d3.axisBottom(getX);  d3.select(ref).call(xAxis);};return (  <svg  ...>    <g className="axis" ref={getYAxis} />    <g      className="axis xAxis"      ref={getXAxis}      transform={`translate(0,${getY(0)})`}    />    ...  </svg>);

И немного стилей:

.axis {  color: #ccd6eb;  & text {    color: #666;  }  & .domain {    display: none;  }}.xAxis {  & line {    display: none;  }}

Посмотрим как сейчас выглядит наш пример:

4. Отрисовка сложных фигур

У svg нет каких-то встроенных простых методов для построения кривых по точкам, секций круга и так далее. Это достаточно сложный процесс на низком уровне. D3 предоставляет методы для построения таких сложных фигур.

Кривые линии

Начнем с обычной кривой линии, для которой мы уже построили точки:

const linePath = d3  .line()  .x(d => getX(d.name) + getX.bandwidth() / 2)  .y(d => getY(d.value))  .curve(d3.curveMonotoneX)(data);// M60,0C100,6.25,140,12.5,180,37.5C220,62.5,260,270,300,270C340,270,380,90,420,90C460,90,500,138.75,540,187.5

В качестве аргумента line() мы передаем наш массив с данными data, а D3 уже под капотом проходится по этому массиву и вызывает функции для поиска координат, которые мы передали в методы x и y. В curve мы передаем тип линии, в данном случае это curveNatural (таких типов достаточно много).

Теперь немного разберем полученную строку. Команда M используется в строки для указания точки, откуда нужно начать рисовать. Команда С это кубическая кривая Безье, которая принимает три набора координат, по которым строит кривую. Подробнее можно почитать здесь https://developer.mozilla.org/ru/docs/Web/SVG/Tutorial/Paths.

Теперь просто вставляем полученную строку в качестве атрибута d для элемента path:

return (  <svg  ...>        <path      strokeWidth={3}      fill="none"      stroke="#7cb5ec"      d={linePath}    />    </svg>);

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

Смотрим на результат:

Замкнутые области

Теперь мы попробуем построить замкнутую области с одной кривой стороной. Она будет использоваться в качестве заливки для графика.

В построении области с кривой стороной похожая ситуация, как и с кривой линией. Здесь используется функция area, а методов становится больше, потому что нужно передать отдельно функцию для поиска нижней линии. Если нам нужна прямая нижняя линия, то просто передаем нулевое значение по низу.

const areaPath = d3.area()  .x(d => getX(d.name) + getX.bandwidth() / 2)  .y0(d => getY(d.value))  .y1(() => getY(0))  .curve(d3.curveMonotoneX)(data);// M60,300C100,300,140,300,180,300C220,300,260,300,300,300C340,300,380,300,420,300C460,300,500,300,540,300L540,187.5C500,138.75,460,90,420,90C380,90,340,270,300,270C260,270,220,62.5,180,37.5C140,12.5,100,6.25,60,0Z

На выходе также получаем путь, который нужно передать в фигуру path. Здесь в конце пути появляется новая команда Z, которая замыкает контур, рисуя прямую линию от текущего положения обратно к первой точке пути. А также в середине строки есть команда L, которая рисует прямую линию от текущей точки.

Добавляем полученную строку в path:

return (  <svg  ...>        <path      fill="#7cb5ec"      d={areaPath}      opacity={0.2}    />      </svg>);

Смотрим на нашу красоту:

5. События

Мы игнорируем все методы для навешивания событий из D3. Эту задачу мы также перекладываем на React и вешаем все события прям в разметке JSX. А для хранения состояний используем знакомый всем хук useState.

Эффект наведения

Подробнее рассмотрим эффект наведения, остальные события делаются аналогично.

Наша задача сделать эффект увеличения точки при наведении на всю область категории. Так как у нас нет определенного прямоугольника в DOM, на которое можно повесить событие напрямую, то мы будем вешать событие на всю svg, а затем вычислять позицию.

Но для начало заведем состояние активной категории:

// null  если ничего не активно (по умолчанию)const [activeIndex, setActiveIndex] = useState(null);

После этого пишем наш обработчик:

const handleMouseMove = (e) => {  const x = e.nativeEvent.offsetX; // количество пикселей от левого края svg  const index = Math.floor(x / getX.step()); // делим количество пикселей на ширину одной колонки и получаем индекс  setActiveIndex(index); // обновляем наше состояние};return (  <svg        onMouseMove={handleMouseMove}  ></svg>)

И добавим событие, которое будет сбрасывать активный индекс, когда мы убираем мышку с svg:

const handleMouseMove = (e) => {  };const handleMouseLeave = () => {  setActiveIndex(null);};return (  <svg        onMouseMove={handleMouseMove}    onMouseLeave={handleMouseLeave}  ></svg>)

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

data.map((item, index) => {  return (    <g key={index}>      <circle        cx={getX(item.name) + getX.bandwidth() / 2}        cy={getY(item.value)}        r={index === activeIndex ? 6 : 4} // при наведении просто немного увеличиваем круг        fill="#7cb5ec"        strokeWidth={index === activeIndex ? 2 : 0} // обводка появляется только при наведении        stroke="#fff" // добавили белый цвет для обводки        style={{ transition: `ease-out .1s` }}      />          </g>  );})

И теперь смотрим на результат:

Итог

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

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

Мы выкидываем из D3 все устаревшие методы для прямой манипуляции элементами DOMа и делам это как знали и умели до этого.

В интернете будет много примеров, которые будут сбивать вас с толку и заставлять писать в стиле jQuery, будьте внимательны. Надеюсь эта статья вам поможет сделать всё красиво!

Каждый, кому хоть раз приходилось строить диаграммы в draw.io или Google Diagrams, помнит всю утомительность и медлительность этого процесса. Сегодня делимся с вами материалом, в котором шаг за шагом показывается, как можно строить красивые архитектурные диаграммы с помощью Python. Главное удобство встроенные узлы для обозначения сервисов и языков программирования. Только код и никакой мыши.

---

Предисловие

На этой неделе я наткнулся на ценную библиотеку Python. Эта библиотека называется Diagrams. С помощью этой библиотеки, достаточно быстро создаются красивые диаграммы, какие я мог бы сделать неуклюже вставляя изображения в draw.io или Google Diagrams. Я тратил бы часы, чтобы все правильно выровнять. В дополнение к этому изнурительному труду, когда мне позже нужно было обновить диаграммы, я поднимал и перемещал более половины компонентов ради нескольких изменений в архитектуре. После дальнейшего изучения библиотеки я смог увидеть, что она в состоянии облегчить задачу.

Начало работы

Нам нужен Python 3.6 или выше. Также нужна GraphViz: она визуализирует диаграммы. В репозитории Github есть довольно приличный раздел Начало работы. Мне для начала работы нужно было выполнить такую команду:

pip install diagrams

Код находится здесь.

Типы компонентов

Библиотека диаграмм предоставляет компоненты от различных поставщиков. Вероятно, что-то из этого списка соответствует вашим задачам.

• AWS/GCP/Azure предоставляют официальные ресурсы облачных сервисов для диаграммы. Моя команда в основном работает в GCP, и я потратил бы часы на создание этих диаграмм вручную, прежде чем наткнуться на эту библиотеку, поэтому я был немного взволнован, когда обнаружил, что узлы у меня под рукой.
• Универсальные и локальные эти узлы, скорее всего, будут использоваться вместе в случае, если вы хотите проиллюстрировать технологии в облаке независимо от него. Например, предоставление архитектуре компонента Beam поверх отображения Google DataFlow.
• Фреймворки эти компоненты полезны, когда вы хотите показать язык программирования.
• SaaS коллекция узлов SaaS, которые можно использовать, когда вы хотите показать, что ваша архитектуре есть уведомления вроде Slack.

Элементы диаграмм

• Узлы это абстрактное понятие, представляющее собой единый компонент системы.
• Кластеры позволяют организовать узлы в группы (или кластеры).
• Ребра отображают связь между узлами.

Первая диаграмма

Теперь, когда вы знаете основные понятия, давайте построим очень простую диаграмму с кодом в том порядке, в котором мы узнали эти понятия. Диаграмма будет описывать простой веб-сайт с балансировкой нагрузки на AWS с базой данных PostgreSQL и кэшем Redis, чтобы показать разнообразие сервисов.

1. Рабочая область диаграммы

Опишем пустую диаграмму с меткой:

from diagrams import Diagramwith Diagram("Simple Website Diagram") as diag:    passdiag # This will illustrate the diagram if you are using a Google Colab or Jypiter notebook.

Код находится здесь.

2. Добавление узлов

Теперь, когда у нас есть рабочее пространство, пришло время добавить узлы веб-сайта. Добавляемые узлы имеют разных поставщиков, это AWS и OnPrem. Скорее всего, если бы вы делали это по-настоящему, вы бы придерживались AWS, поскольку у них есть такие предложения, как RDS и ElastiCache, которые, вероятно, есть в ваших проектах.

from diagrams import Diagram, Clusterfrom diagrams.aws.compute import EC2from diagrams.aws.network import ELBfrom diagrams.aws.network import Route53from diagrams.onprem.database import PostgreSQL # Would typically use RDS from aws.databasefrom diagrams.onprem.inmemory import Redis # Would typically use ElastiCache from aws.databasewith Diagram("Simple Website Diagram") as diag:    dns = Route53("dns")    load_balancer = ELB("Load Balancer")    database = PostgreSQL("User Database")    cache = Redis("Cache")    svc_group = [EC2("Webserver 1"),                 EC2("Webserver 2"),                 EC2("Webserver 3")]diag # This will illustrate the diagram if you are using a Google Colab or Jypiter notebook.

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


Код находится здесь.

3. Группировка узлов (необязательно)

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

from diagrams import Diagram, Clusterfrom diagrams.aws.compute import EC2from diagrams.aws.network import ELBfrom diagrams.aws.network import Route53from diagrams.onprem.database import PostgreSQL # Would typically use RDS from aws.databasefrom diagrams.onprem.inmemory import Redis # Would typically use ElastiCache from aws.databasewith Diagram("Simple Website Diagram") as diag:    dns = Route53("dns")    load_balancer = ELB("Load Balancer")    database = PostgreSQL("User Database")    cache = Redis("Cache")    with Cluster("Webserver Cluster"):        svc_group = [EC2("Webserver 1"),                    EC2("Webserver 2"),                    EC2("Webserver 3")]diag # This will illustrate the diagram if you are using a Google Colab or Jypiter notebook.

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


Код находится здесь.

4. Единое целое из компонентов

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

from diagrams import Diagram, Clusterfrom diagrams.aws.compute import EC2from diagrams.aws.network import ELBfrom diagrams.aws.network import Route53from diagrams.onprem.database import PostgreSQL # Would typically use RDS from aws.databasefrom diagrams.onprem.inmemory import Redis # Would typically use ElastiCache from aws.databasewith Diagram("Simple Website Diagram", direction='LR') as diag: # It's LR by default, but you have a few options with the orientation    dns = Route53("dns")    load_balancer = ELB("Load Balancer")    database = PostgreSQL("User Database")    cache = Redis("Cache")    with Cluster("Webserver Cluster"):        svc_group = [EC2("Webserver 1"),                    EC2("Webserver 2"),                    EC2("Webserver 3")]    dns >> load_balancer >> svc_group    svc_group >> cache    svc_group >> databasediag # This will illustrate the diagram if you are using a Google Colab or Jypiter notebook.

Итоговое изображение можно увидеть ниже, и теперь вы видите логическую связь между узлами диаграммы. Направление связи можно развернуть, изменив порядок узлов. В дополнение к настройке потока вы можете изменить и другие вещи: объект edge содержит три атрибута: метку, цвет и стиль. Я не буду описывать здесь, как это делается. Если вам интересно, ссылка на документацию есть в конце этой статьи, эти атрибуты отражают соответствующие атрибуты GraphViz, что облегчает работу, если вы работали с ребрами graphviz.


Код находится здесь.

Заключение

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


А вот еще один лайфхак, но уже не на Python промокод HABR дает дополнительную скидку 10%, которая суммируется со скидкой на баннере.

• Курс Python для веб-разработки
• Профессия Веб-разработчик
• Профессия iOS-разработчик с нуля
• Профессия Android-разработчик с нуля
• Профессия Java-разработчик с нуля
• Курс по JavaScript

Читать еще

• Как сделать интерактивную карту с помощью Python и open source библиотек
• Система рекомендаций фильмов с GUI на Python
• Данные внутри нас: Чем занимаются биоинформатики?
• Machine Learning и Computer Vision в добывающей промышленности

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

В этой статье я расскажу о способе создания представления (диаграммы) модели предметной области (МПО), дополненное связями с точками интеграции, на базе которых построена функциональность системы: хранимыми процедурами, функциями и веб-сервисами. Таким образом, данное представление хорошо подойдёт проектам с большим количество точек интеграциий и поможет разработчикам и аналитикам быстрее ориентироваться в проекте, порой даже не заходя в код.

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

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

Вопросы, на которые отвечает такое представление:
какие сущности МПО существуют в системе?
как сущности МПО друг с другом связаны?
какие действия можно выполнять с сущностями МПО?
с помощью каких точек интеграции выполняются те или иные действия?

Представление сущности МПО

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

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

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

Методы бизнес-модели содержат все возможные действия, над данной моделью. Это могут быть CRUD и какие либо ещё возможные методы. Выделение метода зачастую ориентируется на точку интеграции, которая используется в данном методе. Есть смысл так же выносить производные методы, для понимания предметной области.

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

Точки интеграции это могут быть хранимые процедуры, функции или веб-сервисы. Описываются по формату %схема/веб-сервис%: хп/хф/метод веб сервиса. Стрелкой сояединяются с соответствующим методом.


Рисунок 1. МПО на примере одной сущности

Пример того, как описывается одна сущность МПО изображён на Рисунке 1.

Представление МПО

Итоговое представление МПО может выглядеть примерно как на рисунке. В примере я привёл значительно упрощённую модель. В реальной модели было в 10-15 раз больше сущностей с значительно большим количеством методов и точек интеграции. Однако даже с большими размерами МПО было достаточно просто ориентироваться. Свою роль сыграливозможностям Enterprise Architect и Visual Paradigm, однако в первую очередь помог логический поиск Функциональность->Сущность->Метод->Точка интеграции


Рисунок 2. Пример полного представления МПО.

На рисунке 2 изображён пример полного представления МПО. По этому рисунку уже можно сложить мнение о том, какая функциональность реализована в приложении.

Как представление МПО + точки интеграции может упростить разработку

Для наглядности я приложил диаграмму компонентов (Рисунок 3), распределённых по приложениям инфораструктуры проекта:
UIWebSite
MainOnlineBackendService
PCIDSSOnlineBankLogicService

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


Рисунок 3. Диаграмма компонентов.

Задача 1:
Допустим, что у нас стоит задача модифицировать функциональность открытия счёта и мы не знакомы с кодом проекта. В такой задаче может прийтись исследовать стэк вызова, а учитывая, что в каждом приложении существует свой набор компонентов, стэк вызова при клике на кнопку Открыть счёт может состоять из 8 уровней:
1 ReactUI
2 RestApiController
3 AccountCachedController
4 AccountServiceWrapper
5 MainOnlineBackendServiceImplementation
6 AccountServiceWrapper
7 OnlineBankLogicServiceImplementation
8 sheme1: sp_createAccount

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

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

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

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

Это две типовые распространённые задачи, при которых требуется находить точки интеграции.

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

Задача 4:
Вы исследуете систему и вам необходимо накапливать информацию о всех понятиях и функционале системы. Диаграмма помогает это выполнять в достаточно локаничном виде. В дальнейшем такая декомпозиция/композиция позволяет спроектировать архитектурные слои

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

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

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


Визуализация категорий в FiveThirtyEight, у Надии Бремер, в Pudding, New York Times, The Economist и Akkurat

Содержание

1. Вступление
   
2. Расширьте своё понимание цветов
   
3. Не танцуйте по всему цветовому кругу
   
4. Используйте насыщенность и яркость, чтобы работали тона
   
5. Используйте тёплые цвета и синий
   
6. При использовании зелёного сделайте его жёлтым или синим
   
7. Избегайте чистых цветов
   
8. Избегайте ярких, насыщенных цветов
   
9. Сочетайте цвета с разной яркостью
   
10. Сделайте цвета одинаково красочными
    
11. Избегайте слишком слабого контраста с фоном
    
12. Избегайте слишком сильного контраста с фоном
    
13. Выбирайте достаточно ненасыщенный фон
    
14. Просто копируйте цвета или попробуйте их понять

Вступление

Я буду много говорить о насыщенности, яркости и тонах. Это цветовые пространства HSB (тон, насыщенность, яркость) или HSV (тон, насыщенность, значение):

• Тон (hue) находится в диапазоне от 0 до 360, это ваш типичный цветовой круг:
  
• Насыщенность (saturation) изменяется от 0% (серый) до 100% (супер-пупер красочный!!):
  
• Яркость/значение (brightness/value) изменяется от 0% (чёрный) до 100% (фактический цвет):

Чтобы преобразовать цвета из HEX (например, #cc0000) или RGB (например, rgb(207, 176, 58)) в HSB/HSV, используйте такой инструмент, как colorizer.org.

Родственником HSB/HSV является цветовое пространство HCL. Там те же параметры (тон, цветность = насыщенность, яркость), но ближе к тому, как мы действительно видим цвета. Наш сервис Datawrapper использует цветовое пространство HCL в инструменте выбора цвета:



Поскольку в Adobe Photoshop или colorizer.org нет HCL, при каждом упоминании градусов (например, 0) или процентов здесь имеется в виду цветовое пространство HSB/HSV.

Хорошо, давайте начнём.

Расширьте своё понимание цветов

Вы можете подумать: Для диаграммы мне нужно пять цветов. Поэтому я использую зелёный, жёлтый, синий и красный. И хм может, оранжевый? Или фиолетовый!

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

Посмотрите на эту диаграмму и сравните её с основными цветами :


Кошки или собаки? Автор: Надия Бремер

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

Поэтому, прежде чем мы ввести правила, позвольте немного напугать вас: можно использовать буквально тысячи цветов. Есть жёлтоватый красный , синеватый красный и всё, что между ними. Есть серый , но есть также холодный серый и тёплый серый . А еще есть синий цвет. Так много синего! Как этот , этот , этот , этот и этот . И мы ещё не говорили об оранжевом и жёлтом.

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

Не танцуйте по всему цветовому кругу

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

В этот момент есть смысл посмотреть на цветовой круг. Для этого подходит Adobe Color или Color Calculator.


Color Calculator для выбора гармоничных сочетаний

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


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

Если расстояние достаточно маленькое, вы в основном используете взаимодополнительные или дополнительные (complementary) цвета. И это отличный выбор! Множество дополнительных цветовых пар прекрасно работают вместе. Если сомневаетесь, всегда используйте дополнительные цвета и их соседей.

Итак, давайте сделаем это на этот раз с помощью Adobe Color:


Наши дополнительные цвета в Adobe Color

Наши цвета противоположны на цветовом круге, поэтому явно дополняют друг друга. Ура! Но они также непригодны: два оранжевых слишком похожи. И все выглядит так ярко.

Вот где нужно изменить насыщенность и яркость.

Используйте насыщенность и яркость, чтобы работали тона

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

Вернёмся к нашей цветовой комбинации: . После игры с насыщенностью и яркостью она становится такой:


Более подходящие дополнительные цвета в Adobe Color

Я обесцветила светло-голубой и светло-оранжевый и сделала все цвета темнее, кроме светло-оранжевого. Чёрт возьми, с этим уже можно работать!

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

Вот что я сделала со всеми этими цветовыми палитрами: и и . Все они примерно дополняют друг друга и у всех разная насыщенность и светлость.

Используйте тёплые цвета и синий

Дизайнеры инфографики особенно любят ещё одно сочетание: жёлтый/оранжевый/красный и синий. Пролистайте, например, портфолио South China Morning Post или вот это от The Economist (PDF): они используют эти цвета гораздо чаще, чем какой-нибудь фиолетовый или зелёный.


Три страницы South China Morning Post

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

И они доступны: дальтоники легко отличают синий и оранжевый/красный.

Поэтому, если сомневаетесь, то используйте оранжевый/красный с синим.

При использовании зелёного сделайте его жёлтым или синим

Яркая зелень занимает шестую часть на цветовом круге, примерно с 90 до 150 , с пиком на 120 . Однако вы не найдёте хорошей инфографики с такими цветами. Почему?

Во-первых, зелёный сам по себе просто очень тёмный. А осветление зелени переходит в неуклюжий неон . Чтобы получить хороший тон, нужно сильно осветлить и обесцветить зелёный цвет больше, чем другие цвета. Это именно то, что Washington Post делает со своим зелёным здесь:


Как Трамп откатывает наследие Обамы, The Washington Post

Это 142 зелёный, но насыщенной только на 14%. Тот же тон с той же яркостью на 100% насыщенности: . Вот как.

И помните о дальтониках: чистый зелёный в сочетании с красным, оранжевым или коричневым им трудно различить.

Поэтому, когда вы используете зелёный, сделайте его немного жёлтым или немного синим. Вы можете увидеть это в примерах в начале статьи: у всех зелёных, кроме , тон больше 160 (то есть они голубее) или меньше 60 (то есть более жёлтые) . В этом проекте, который мы уже видели, Надия использует как жёлто-зеленый, так и сине-зелёный:


Кошки или собаки? Автор: Надия Бремер

Похоже, вы можете использовать их в инфографике как два разных цвета: беспроигрышный вариант!

Избегайте чистых цветов

Чистые тона расположены в цветовом круге точно на 60, 120, 180, 240, 300 или 360/0:



Вот пример: в HSV/HSB значение тона этого ярко-синего составляет 180, значение насыщенности 67%, а значение яркости 91%. Вы также можете посмотреть значения RGB вашего цвета: если хотя бы два значения совпадают, то цвет чистый. Например, наш это rgb(77, 232, 232).

Чтобы сделать цвета более естественными и приятными для глаз, можно либо изменить насыщенность чистых цветов, либо сделать их темнее. Если хотите яркие, насыщенные цвета, то выбирайте смешанные цвета, которые находятся по крайней мере на 5-10 от чистых.

На изображении выше у красного и оранжевого, синего и зелёного одинаковая насыщенность и светлость. Единственное различие тон: красный (0), синий (240) и зелёный (120) выглядят более сочными, чем оранжевый (40), средний синий (211) и синеватый зелёный (170).

Избегайте ярких, насыщенных цветов

Яркие цвета обязательно привлекут внимание читателей. Но эти читатели не скажут вам спасибо. Большинство немного напрягаются, когда видят такие цвета: очень насыщенные, яркие цвета НЕ будут уместны для серьёзного, доверительного или спокойного [общения], объясняют Бартрам, Патра и Стоун в своей статье Аффективный цвет в инфографике от 2017 года (PDF).

Если цвета приближаются к 100% насыщенности и 100% яркости, скорее всего, они слишком яркие. Это определённо относится к чистым цветам, таким как .

Но я видел раньше видел такие сумасшедшие цвета, и они выглядят хорошо, скажете вы и назовёте проекты вроде этих:


Статья New York Times о плейлистах


Статья Bloomberg о банкротствах


Статья Pudding о знаменитостях

Если сравнить цвета из этих примеров с , то они менее насыщенные или более тёмные. На 100% насыщенный и 100% ярко-зелёный цвет становится в New York Times менее насыщенным , а также менее насыщенным и тёмным в статье Bloomberg и в статье Pudding .

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

Всё это работает, потому что в Pudding, The New York Times и Bloomberg отличные дизайнеры. Если сомневаетесь, избегайте 100% насыщенности в сочетании со 100% яркостью.

Сочетайте цвета с разной яркостью

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

Например, на крайней левой диаграмме выглядят как в оттенках серого.

Чтобы избежать такой неприятной гаммы, есть два варианта:

• Исправить в оттенках серого: изменить яркость каждой области, сделав некоторые цвета ярче, а некоторые темнее, например: . Так они выглядят в оттенках серого:
  
• Разделить области, например, белой границей

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

В реальности правильный способ установить цвета для категорий это выбирать цвета из градиентов, вроде таких:


Цветовые схемы Viridis

Все эти градиенты плавно переходят от светлого к тёмному, поэтому у цветов различная яркость: или . Если вам нравится такой подход, попробуйте этот генератор цветовой палитры.

Сделайте цвета одинаково красочными

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

• потому что они намного темнее
  
• потому что они намного светлее
  
• потому что они более насыщенные
  
• потому что они более чистые

Но обычно вы просто хотите выделить один или два цвета. Большинство остальных должны быть более или менее одинаково заметными.

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

Или выберите менее чистый оттенок: на изображении выше зелёный и синий очень чистые, поэтому я их затемнила (вот как они выглядят со 100% яркостью: ).

Затем я хотела добавить красный но яркий красный слишком интенсивный как чистый оттенок (с 0) . Так что у меня было два варианта:

1. просто затемнить его: .
   
2. переместить оттенок (и только оттенок) на 30, чтобы сделать его более оранжевым .

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

Избегайте слишком слабого контраста с фоном

В удивительно большом количестве инфографике на ярком фоне используются пастельные цвета. Они часто не очень насыщенные и ужасно светлые.

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

Вот что нужно делать, когда цвета слишком ненасыщенные и светлые :

• Увеличьте насыщенность:
  
• Сделайте их темнее:
  
• Или сделайте и то, и другое для достижения наилучшего результата:

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

Избегайте слишком сильного контраста с фоном

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

Выбирайте достаточно ненасыщенный фон

Когда вы разобрались с цветами, хорошей идеей может показаться красочный фон. Но у такого фона два больших недостатка: во-первых, он легко отвлекает от данных. Во-вторых, чрезвычайно ограничивает потенциальную цветовую палитру и поэтому с ним трудно работать. На самом деле, чем насыщеннее фон, тем он сложнее, так что лучше выбрать ненасыщенные цвета. Вот некоторые базовые правила для цветового пространства HSB/HSV:

• Если нужен светлый фон, держитесь подальше от цветов с яркостью менее 95% и насыщенностью более 7%.
  
• Если нужен тёмный фон, сохраняйте насыщенность меньше 20%. Кроме того, не уходите в полностью чёрный держите яркость между 10% и 25%.

Просто копируйте цвета или попробуйте их понять

Трудно почувствовать и самостоятельно выбрать хорошие цвета. Так что это совершенно нормально просто копировать красивые сочетания. Серьёзно, в воровстве нет ничего постыдного. Я написала целую статью о том, где черпать вдохновение для цветов: в фильмах, у художников, в чужих цветовых палитрах и т.д. (и другие инфографики отличный источник).

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


Фото дерева niko photos на Unsplash

• Выберите картинку с цветами, которые вы считаете красивыми, например, произведение искусства или фотографию природы. Затем выберите оттуда цвета с помощью пипетки, например, в Photoshop или image-color.com. Попробуйте применить их в своей следующей инфографике.
  
• Установите Adobe Capture, который реализует ту же идею, но для живых изображений: он позволяет захватывать цвета из окружающего мира (удивительно, насколько ненасыщенные цвета вокруг нас!)
  
• Поиграйте с ручным выбором цветов: посмотрите на экран. Какие цвета вы видите? Насколько они тёмные и насыщенные? Какие оттенки близки, какие противоположны на цветовом круге?
  
• Выбирайте цвета из красивой инфографики. Измените некоторые из них. Они всё ещё хорошо сочетаются?

Кроме того, в следующий раз, когда создадите инфографику и будете недовольны цветами, проанализируйте их в цветовом пространстве HSV/HSB, например, с помощью colorizer.org:

• Насколько цвета насыщены насколько они становятся лучше или хуже, если увеличить или уменьшить насыщенность на несколько (или на много) процентных пунктов?
  
• Каково значение тона? Что произойдёт, если изменить тон всего на несколько градусов?
  
• Яркость цветов отличается?

Со временем вы перейдёте с уровня Это прекрасно, но я не знаю почему на уровень Это прекрасно по определённой причине. И обнаружите, что способны нарушать всё больше и больше этих правил и по-прежнему создавать отличные цветовые комбинации.