JavaScript для глубокого обучения 2021 TensorFlow js Ббк

Глава 7. Визуализация данных и моделей
291
Листинг 7.2.
Создание линейной диаграммы с двумя рядами данных с помощью 
функции tfvis.render.linechart()
Для диаграммы нескольких рядов данных необходимо также должным образом 
задать поле 
value
первого аргумента. В нашем первом примере мы передали в него 
массив точек данных, в случае же диаграммы нескольких рядов данных нужно пере­
дать массив массивов. Каждый элемент вложенного массива представляет собой 
точки данных одного из рядов в том же формате, что и массив 
values
в листинге 7.1, 
где мы строили диаграмму с одним рядом данных. Следовательно, длина вложенного 
массива должна соответствовать длине массива 
series
, иначе возникнет ошибка.
Созданная с помощью листинга 7.2 диаграмма показана справа на рис. 7.1. Как 
вы видите на диаграмме, библиотека tfjs­vis выбрала два разных цвета (голубой 
и оранжевый) для визуализации двух кривых. Подобная цветовая схема, как пра­
вило, довольно удачна благодаря хорошей различимости этих цветов. При большем 
количестве рядов данных автоматически выбираются новые цвета.
Два ряда данных в этом примере диаграммы несколько необычны, поскольку их 
множества значений по координате 
x
в точности совпадают (1, 2, 3 и 4). Впрочем, 
в общем случае значения по координате 
x
различных рядов данных диаграммы с не­
сколькими рядами не обязательно совпадают. Можете попробовать построить такую 
диаграмму в упражнении 1 в конце главы. Но учтите, что строить два подобных 
графика на одной диаграмме — не всегда удачная идея. Например, если диапазоны 
значений по оси 
Y
двух кривых сильно различаются и вообще не пересекаются, 
будет непросто разобрать нюансы каждой из кривых при построении их графиков 
на одной линейной диаграмме. В подобных случаях лучше строить их на отдельных 
линейных диаграммах.
Стоит отметить в листинге 7.2 и пользовательские метки осей координат. Чтобы 
пометить оси 
X
и 
Y
выбранными строковыми метками, мы воспользовались поля­
ми 
xLabel
и 
yLabel
объекта конфигурации (третий из передаваемых в функцию 
linechart()
аргументов). В общем случае всегда следует задавать метки для осей коор­
динат, чтобы сделать диаграммы понятнее. Если не задать поля 
xLabel
и 
yLabel
, tfjs­vis 
укажет для осей метки 
x
и 
y
, как это произошло в листинге 7.1 и в левой части рис. 7.1.

---

292