НАЧАЛО | ВИЗУАЛИЗАЦИИ D3 | KNIME АНАЛИТИЧЕСКАЯ ПЛАТФОРМА

От примера D3 до интерактивного представления KNIME за 10 минут

Интегрируйте красивые визуализации в свои рабочие процессы всего с двумя узлами

Интерактивные визуализации в Интернете стали очень популярны. JavaScript framework D3 превратился в одну из наиболее часто используемых библиотек многими веб-сайтами и издателями для богатой графики и визуализаций.

В этой статье я хотел бы показать вам, как легко использовать возможности D3 и использовать их в KNIME. Для этого я возьму существующий пример с веб-сайта D3 и создам интерактивное представление с использованием универсального представления JavaScript всего за 10 минут.

Итак, давайте начнем.

Если у вас базовая версия KNIME Analytics Platform, вам сначала необходимо установить Расширение KNIME JavaScript Views. Для этого перейдите в меню Файл и выберите Установить расширения KNIME…. Выберите категорию KNIME & Extensions и из этой категории выберите и установите KNIME JavaScript Views. Кроме того, вы можете перетащить расширение из KNIME Hub на свою платформу KNIME Analytics и следовать инструкциям по установке. После успешной установки вам потребуется перезапустить приложение.

На втором этапе давайте выберем пример, с которым мы хотим работать. Я выбрал его для этого поста в блоге, просматривая D3 Gallery.

Прокрутив немного вниз, вы увидите эту прекрасную реализацию Тепловой карты, которая также предлагает немного интерактивности.

Самое замечательное в большинстве примеров в этой галерее то, что все различные части, которые входят в визуализацию, даны и объяснены. Мы увидим, как это пригодится при настройке узла представления. Но сначала давайте посмотрим на рабочий процесс, который мы собираемся настроить. Это очень просто и включает только два узла: узел Контейнерный ввод (JSON) для подачи данных и узел Общее представление JavaScript для отображения визуализации.

Примечание. Узел Generic JavaScript View в текущей версии KNIME Analytics Platform (v. 4.5) поддерживает зависимость для D3 (v. 4.2.6). В этом примере, чтобы отобразить визуализации, доступные в галерее D3, мы извлекаем более старую версию D3 (v. 3.5.5) с помощью узла GET Request и используем эту более старую зависимость через переменную потока в узле Generic JavaScript View.

JSON-данные

Глядя на то, как данные считываются в представление в примере, мы замечаем, что считывается внешний файл JSON.

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

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

Обратите внимание, что эта настройка довольно необычная, с узлом Container Input (JSON) в качестве источника данных для узла Generic JavaScript View. Здесь используется узел Container Input (JSON), чтобы можно было легко копировать и вставлять данные .json из файла pm25.json на веб-сайт. Обычно данные предоставляются путем чтения CSV-файла, как показано на следующем рисунке.

Просмотр конфигурации

Перейдем к визуализации. Откройте диалоговое окно конфигурации узла Generic JavaScript View. Здесь вы найдете два больших поля ввода, одно для CSS и одно для JavaScript. Мы также можем использовать переменные потока в нашем скрипте и использовать несколько стандартных библиотек, одна из которых — D3.

CSS

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

HTML

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

JavaScript

Теперь перейдем к последней части, фактической реализации JavaScript. Поскольку все части уже на месте, мы можем снова скопировать и вставить код с веб-сайта в наш редактор JavaScript с правой стороны.
Однако есть одна вещь, которую нам нужно изменить, а именно способ доступа к данным в коде. Как я уже говорил, в примере он загружается в виде файла. Это делается с помощью функции d3.json(), как вы можете видеть здесь:

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

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

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

Требования:

— — — — -

Как впервые опубликовано в блоге KNIME: https://www.knime.com/blog/from-d3-example-to-interactive-knime-view-in-10-minutes