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

Таблица 7.1
(продолжение)

---

Глава 7. Визуализация данных и моделей
299
Скачать и запустить пример Jena­weather можно с помощью следующих команд:
git clone https://github.com/tensorflow/tfjs-examples.git
cd tfjs-examples/jena-weather
yarn
yarn watch
Эффективная визуализация за счет ограничения объема данных
Набор данных Jena­weather довольно велик. При размере файла 42 Мбайт он превы­
шает все предыдущие CSV и табличные наборы данных в книге. В итоге возникает 
две проблемы.
z
z
Первая — для компьютера: при построении графика данных за все восемь лет сра­
зу ресурсов вкладки браузера не хватит, она перестанет реагировать и, вероятно, 
произойдет фатальный сбой. Даже если ограничиться одним столбцом из 14, все 
равно необходимо отобразить примерно 420 000 точек данных, что превышает 
возможности визуализации tfjs­vis (или любой другой современной JavaScript­
библиотеки построения графиков, если уж на то пошло).
z
z
Вторая — для пользователя: не так уж просто понять, что к чему, при таком боль­
шом объеме данных. Например, как увидеть и извлечь полезную информацию из 
всех 420 000 точек данных сразу? Как и у компьютера, производительность чело­
веческого мозга в отношении обработки данных ограниченна. Задача создателя 
визуализации как раз и состоит в том, чтобы эффективно представить наиболее 
релевантные и несущие максимум информации аспекты данных.
Для решения этих проблем воспользуемся тремя уловками.
z
z
Вместо того чтобы строить график данных за все восемь лет сразу, предоставим 
пользователю возможность выбора промежутка времени с помощью интерактив­
ного UI. Для этого предназначен раскрывающийся список 
Time span
в UI (рис. 7.6 
и 7.7). Варианты временных интервалов включают 
Day
, 
Week
, 
10 Days
, 
Month
, 
Year
и 
Full
. Последний вариант соответствует полному промежутку времени в восемь 
лет. В случае всех прочих промежутков времени у пользователя есть возмож­
ность передвигаться по времени вперед и назад, нажимая кнопки, на которых 
изображены стрелка влево и стрелка вправо.
z
z
Для любого промежутка времени, превышающего неделю, производится 
по-
нижающая дискретизация
временного ряда перед построением его графика на 
экране. Например, рассмотрим промежуток времени 
Month
(30 дней). Полный 
массив данных для этого промежутка содержит примерно 30 
×
24 
×
6 = 4320 точек 
данных. Как видно из кода в листинге 7.7, мы выводим на график только каждую 
шестую точку данных при отображении данных за месяц, что сокращает число 
точек данных до 720, — это существенная экономия необходимых для визуализа­
ции ресурсов. Но для невооруженного глаза такое шестикратное снижение числа 
точек данных остается практически незаметным.
z
z
Аналогично раскрывающемуся списку 
Time span
мы включаем в UI список, позво­
ляющий пользователю выбрать вид метеорологических данных для построения 

---

300